Typography is the way how the texts are
arranged and visually appealing 💅
Benefits of typography
Make the interface more accessible and usable.
Set the right mood or tone.
Improve the product and the brand appearance and familiarity.
Accessibility in typography is about
visual clarity.
Legibility
What is legibility?
How it is easy to see, distinguish, and recognize the characters and
words.
Typefaces and fonts
Typefaces
Usually, sans-serif typefaces are more legible than
serif, display, or monospaced ones.
Basic legible typefaces
Special legible typefaces
Typefaces on practice
Font size
The minimum font size for desktops is
16 pixels; for mobiles, the good size is
12 pixels and bigger.
Font size on practice
Users settings: Text customizing
Text must be resizable and adjustable without requiring
horizontal scrolling in a full-screen window.
Fluid typography
Responsive typography technique where the text scales automatically with
the screen size.
For text
use %, em, or rem (flexible units), such as instead of absolute font sizes like pixels.
Default font size: 16 pixels
Custom font size: 36 pixels 🤔
Let's try again
Now it is 36 pixels 🎉
Users settings: Page zoom
Allow users to increase the zoom level of a page's content from
100% to 200%–400% without loss of content or
functionality.
Clipped text with 200%
Horizontal scroll with 200%
Overlapping text with 200%
Default text zoom (100%)
Increased text zoom (200%)
Wow, no issues with 400%
Font weight
Regular fonts are good for most text. Bold is
suitable for headings and emphasis.
Thin and light fonts work best for
decorative text.
Font weight on practice
X-height
It's easier to read texts with
larger uppercase letters in proportion to
lowercase letters.
X-height on practice
Aperture
Open and closed aperture
Use typefaces with more open aperture.
Aperture on practice (latin)
Letter spacing (tracking)
Bigger letter spacing helps with the legibility
of all-caps text or thin fonts.
Smaller letter spacing is legit only for large
fonts.
Letter spacing on practice
Custom letter spacing
Letterforms
Visual shape or design of a letter.
Latin imposter letters
Cyrillic imposter letters
Mirroring characters
Use typefaces where similar letters are
easy to tell apart.
Letterforms on practice
Line height (leading)
On a desktop, space between lines should be
1.5 to 2 times the text size. On mobile
phones, make it 1.3 to 1.45 times.
Line height on practice
Line width (length)
The optimal number of words per line is
between 45 and 80 with spaces. It depends on
language and screen size.
Long line width: 207 ch
Optimal line width: 100 ch
Contrast
Difference in brightness between two colors: For text and
its background.
Browser's contrast checker
Contrast ratio anatomy
Big text should be 3 (3:1) to 7 (7:1) times
lighter than its background. Small text needs to be at least
4.5 (4.5:1) times lighter than its background.
Contrast ratio
High contrast ratio: Dark
High contrast ratio: Light
Too high contrast for somebody
Astigmatism.
Light sensitivity.
Attention-deficit/hyperactivity disorder (ADHD).
Autistic spectrum disorder (ASD).
Comfortable contrast ratio
Dyslexia
This is a learning disability that affects
reading skills. Unlike other learning disabilities,
intelligence isn't affected.
