I know that -apple-system
defaults to San Francisco on macOS and iOS, but what defaults to SF Mono and New York (the default serif font for Apple products)?
Monospace are designed to make characters easy to read and find in hundreds of lines of code. In the other hand, serifs and sans serifs fonts are designed to be used to improve legibility in large amount of texts, example books, magazines, and so on.
When to use serif fonts. Serif fonts can look authoritative, professional, and suggest the weight of history or experience. Serif typefaces like Times New Roman are suggestive of typewriters’ old style — The New York Times and other reputable institutions that have existed for over a century still use this font.
Text set in a monospace font is also easier to align, leading to the creation of images constructed using characters, known as "ASCII art." On the other hand, because of the fixed width of all the characters, a block of text set in a monospace font will typically take up more space than the same text set in a proportional font.
“The conventional wisdom is that sans serif fonts are supposed to mimic handwriting, which has more of a flow to it,” says Todd. Sans serif fonts also work well where there’s very little room for copy.
Starting from Safari 13.1, they added font family names for system fonts:
ui-monospace
— SF Monoui-serif
— New Yorkui-sans-serif
— San Francisco (same as system-ui
and -apple-system
)See the blog post.
The CSS I use to get the system monospace on most platforms is as follows:
code {
font-family: 'SF Mono', SFMono-Regular, ui-monospace,
'DejaVu Sans Mono', Menlo, Consolas, monospace;
}
The first three are SF Mono, then the Bitstream Vera-derived fonts on Linux (DejaVu) and Mac (Menlo), closing with whatever works on Windows (Consolas).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With