search

xz / new.css

A classless CSS framework to write modern websites using only HTML.
https://newcss.net
MIT License
3.96k stars 128 forks source link

Add `ui-monospace` to the `--nc-font-mono` stack #86

Open adiabatic opened 1 year ago

adiabatic commented 1 year ago

Making an Issue first since I'd like to bikeshed gather opinions on where in the stack to put it.

As of this writing, the --nc-font-mono stack is this:

--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

I tried viewing this on my iPad, and I got Courier (New?). Since the rest of new.css uses nice, modern sans-serif fonts, it stuck out like a sore thumb.

Happily, changing the font stack to

    --nc-font-mono: ui-monospace, Consolas, Monaco, "Ubuntu Mono",  "Liberation Mono", "Courier New", Courier, monospace;

made it so I got .AppleSystemUIFontMonospaced (SF Mono). This looks way better on my iPad.

I suggest putting ui-monospace right before Monaco, so the line reads:

    --nc-font-mono: Consolas, ui-monospace, Monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

My rationale:

  1. Monaco is a Mac OS/OS X/macOS-only font.
  2. Monaco has only one weight and one style: Normal. No bold, no italic, no bold italic. As much as I like Monaco as a typeface, it's not a good font.
  3. The last version of Safari to support only Monaco and not ui-monospace was superseded in March of 2020.
  4. Chrome and Firefox on macOS will still pick up Monaco, which is still better than any Courier font in most cases.

Thoughts?

(Also, I'd properly capitalize Monaco in passing, but that's much less important.)

malvese commented 1 year ago

I agree, even though I love Monaco. We could also replace it with Menlo, which has four styles and seems to use the same metrics. So the change would be very unlikely to break anything.