on fedora 36 with whatever weird fonts i have installed

I prefer serif typefaces for block text, and sans-serif for titles and headers, but I think there's some tweaking to try to make this look less awkward. It isn't horrible on this Chromebook, but it wouldn't exactly make Edward Tufte happy.

Praise be, in Tufte's name 🙂

If it's possible to use slightly lighter font weights, it might help the "stuffy" feeling you're getting. Not super-light, obviously, but I think you're getting that feeling because it looks a lot like a printed book (where ink has physical limitations). Try moving one click down the font-weight scale (e.g. from 500 to 400) to see if this helps.

I'm used to sans-serif everywhere, but each has its place, for sure. Perhaps there are easily replaceable variables that could stand in for a few different system font stacks?

css
:root {
  --font-system-serif: ...;
  --font-system-sans: ...;
  --font-system-fixed: ...;
}

Those exist in missing.style already, unless I'm missing your point.

--display-font

,

--main-font

, and

--mono-font

. In my experiment, all I've done is redefine those variables in my own stylesheet using the "system fonts stack" suggestions, and attached them to a few additional selectors.

FWIW, I used to prefer sans-serif electronically until resolutions got high enough that all serifs didn't look like slab serifs.

I'm not a typeface snob, but I'm often surrounded by them.

it doesn't look like a book, it looks like PDF documentation for a microcontroller

i just want a grotesque sans-serif with italics that don't look like they are about to fall over

San. Fran. Cisco.

i guess i should have clarified that i would also like the rights to use them

That's fair, but it is available to anyone on a Mac. I think you're already using

-apple-system

right? So you're already using San Francisco.

this is for my personal site that's currently using Alegreya

Oh, gotcha!

https://missing.style/docs/forms/ how to make nice forms with missing.css

> Inputs without labels will cause nasal demons.

Oh my.

Btw for anyone using this, you need this for mobile devices.

css
html {
    text-size-adjust: none; /* Fixes chrome on mobile. */
    -webkit-text-size-adjust: none; /* Fixes safari on mobile. */
    font-size: 10px; /* Every rem size derived from this. */
}
body {
    font-size: 1.8rem; /* 1.8 rem = 18px */
}

Quashed some fairly significant mobile bugs by turning

text-size-adjust

off.

setting px font sizes will break people who customize the font size on their browser. consider:

css
:root {
  font-size: calc(10em / 16); /* = 10px if default font size is 16px */
}

the html / root font-size is adjusted by the user agent.

gonna run your snippet through the paces and see if it interacts better though!

it might be different across browsers, i'm pretty sure in some browsers the px value overrides the user's preference

Oof, okay, highly recommend testing your stuff on safari mobile if you haven't. CSS transitions and createElement (probably other things too) are just freaking broke without this in your

:root

with both the

10px

and

calc(10em / 16)

method.

css
:root {
  text-size-adjust: none; /* Fixes chrome on mobile. */
  -webkit-text-size-adjust: none; /* Fixes safari on mobile. */
}

I wish I knew what was going wrong, and appreciate any insight, but if you haven't, highly recommend testing on mobile.

It's easy to notice on safari because text will start to visually vibrate as the browser struggles to apply the user agent size on top of the rem stuff. on transitions or newly created elements

Really sad because your snippet should just work in an ideal world.

The only browser that works as intended is Firefox mobile. Both Chrome and Safari have vibrations with css transitions/createElement.