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

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/

The typographic scale

Typography shows hierarchy and brand presence

Arizona State University

DePaul University

Typography can bring together a design or feel of a product.

Typography

Material Design Documentation

Typewolf is a website built to introduce different typefaces and how they can be used.

For each typeface, a preview of the typeface, its use cases including real website examples, and what other typefaces get along with it are provided.



Resources

Language size and display style vary based on whether a character set is English-like, tall, or dense.

Language support

Use typography to present your design and content as clearly and efficiently as possible.

Learn Before

Related

Learn After

Learn After

Related