Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using -apple-system for monospace and serif

Tags:

css

ios

fonts

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)?

like image 564
FryingggPannn Avatar asked Jan 03 '20 12:01

FryingggPannn


People also ask

What is the difference between monospace and serif fonts?

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?

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.

What is the difference between proportional and Monospace fonts?

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.

Do sans serif fonts really mimic handwriting?

“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.


1 Answers

Starting from Safari 13.1, they added font family names for system fonts:

  • ui-monospace — SF Mono
  • ui-serif — New York
  • ui-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).

like image 111
ayanami Avatar answered Oct 07 '22 21:10

ayanami