The font that tells the browser to use whatever font is native to the system.
- Example: Github
- Tips when use: 1) preview them on a website like Google fonts, 2) avoid using too many font-weights -- not all the system fonts have for example, extra thin or black.


"System-UI" font

"System fonts come pre-installed on your computer or device. They typically have wide language support and no licensing costs for developers. "

- Pros: consisteny with the platform, zero latency
- Cons: may not stand out

- Examples:
Roboto for Android, San Francisco for Apple, Fire Sans for Firefox OS, Segoe UI for Windows

- Pick a system font? 
https://practicaltypography.com/system-fonts.html#:~:text=System%20fonts%20are%20the%20fonts,system%20fonts%20aren't%20good.

University of Michigan - Ann Arbor

Typography shows hierarchy and brand presence

Understanding Typography

Material Design Documentation

Typeface - design of a letter form

Font - a collection of typefaces

Picking a typeface for it's style, legibility, and readability are effective when following the fundamental principal of typographic design

Type properties

"While legibility is determined by the characters in a typeface, readability refers to how easy it is to read words or blocks of text, which is affected by the style of a typeface."

Some properties that can affect readability: letter-spacing, line length, line height, paragraph spacing, type alignment and how figures are displayed (tabular or proportional).

Readability

System fonts

There are five categories of fonts: Serif, Sans Serif, Monospace, Handwriting, and Display. 

Type Classification

An article written by Spencer Mortensen introducing the history of the development of typographic scale and how designers should use them to make content readible and aesthetic.
- https://spencermortensen.com/articles/typographic-scale/

Learn Before

Related

Learn After