Talking Typography
If you were designing a road sign, which typeface would you choose?
As rule of thumb, typography should support the purpose of your design.
For a road sign, the purpose is to be legible to as many people as possible from a great distance. �And those people are zipping by in a car at 70mph.
Some words to talk about typographic tone:
Loud
Quiet
Aggressive
DIY
Luxury
Serious
Ironic
Playful
Messy
Neat
Empty
Full
Basic
Literary
“Green”
Brooding
Current
Digital
Homemade
Complex
Simple
Cheerful
Intense
Wild
Daytime
Nighttime
Overwhelming
Settled
Tense
Balanced
Off-balance
In motion
Still
Deep
Spooky
Elegant
So! What are some differences between a road sign and digital typography?
In short: web fonts are optimized for being read on the screen. Maybe this seems obvious! But it does have implications for how to best use typography in your work.
Designing typefaces with their medium in mind is nothing new!
Ink traps compensated for printing on low quality paper
A big reason typefaces have to work differently on a screen has to do with screen resolution. Typically, the screen resolution would be 100 points per inch or less, (web standard is 72 ppi, or pixels per inch. As you know, a high quality print would be something more like 300 ppi).
So, fonts designed for print are tailored for the specifics of printing: they would have ink traps, optical sizes and spaces inside letters of the same font would vary based on the font size.
Carta Nueva Display
Carta Nueva Deck
Whether it’s displayed on screen or printed, the computer draws a digital letterform the same way: by scaling a glyph shape to a certain size and activating the pixels that are inside the shape.
What does that mean?
What does that mean?
A designer in 1995 might say....
Often, screen-optimized fonts look clumsy in print, and vice versa — the fonts intended for print can be less than optimal for reading on-screen or in an app UI.
Miller might look too elaborate for on-screen applications, while Georgia might lack some detailing to look good in print (Sorry, Georgia fans 😔)
Fonts intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, ebooks, ereaders, and mobile devices.
ITC Galliard and ITC Galliard eText, a member of Monotype’s eText Collection, vary considerably. The eText version has been enhanced for onscreen reading with a slightly taller x-height, a less pronounced weight contrast, proportionally heavier thin strokes and serifs, and an overall heavier appearance.
Ultimately, in 2025, you should use whatever font you’d prefer on the printed page.
Those traditional “screen-optimized fonts” of the ’90s were optimized for screens of what we will soon consider a more primitive era. Fonts like Georgia and Calibri have no special legibility benefit on today’s screens. (Like all system fonts, they still have the benefit of being installed on nearly every computer, however, so they’re still useful for not worrying about compatibility issues or dropped fonts.)
That being said, here are some general considerations �for thinking through your typography use, now that �we’re working with the screen in mind.
Size
In short: smaller on paper, bigger on screen.
For body text in particular, try to keep things around 12-16 pt for mobile, 15-19 pt for tablet, �and 16-20 for desktop. This is a rule of thumb, but in general body copy needs to be a little larger for screens than it would be for say, a book.
However! There’s more to it than that! 🫨
Not all fonts are the same (again, duh). The point-size system is not absolute—different fonts set at the same point size won’t necessarily appear the same on the page.
However! There’s more to it than that! 🫨
Not all fonts are the same (again, duh). The point-size system is not absolute—different fonts set at the same point size won’t necessarily appear the same on the page.
That means you need to let your eyes be the judge. Don’t just rely on the point size.
Colors
In print, color is subtractive. When you combine all of your colors together, you get black.
On screen, color is additive. When you combine all of your colors together, you get white .
Subtractive
Additive
A major thing to remember about digital color is that screens, being backlit, project light at the eye. Sometimes, this is uncomfortable!
A major thing to remember about digital color is that screens, being backlit, project light at the eye. Sometimes, this is uncomfortable!
Unlike a piece of paper—which reflects ambient light—a computer screen projects its own light and tends to have more severe contrast. Therefore, on screen, dark-gray text can be more comfortable to read than black text. That’s why many digital-book readers let you reduce the screen brightness or change the text color.
A dirty secret...🤫
In many cases, when you see black text on a
website, it’s not black, it’s dark gray.
Think about it! Black text on white background has the highest possible contrast. This can wear your eyes out over extended periods of time.
High contrast is good for legibility! Maximum contrast is just exhausting.
Not to mention, those with different visual capacity and ability (truly, everyone, but in particular folks with dyslexia, photosensitivity, or even just tired eyes) might struggle to read your text if the contrast is too high, or too low.
👍These lines of text follow the
color contrast ratio recommendations and are legible against their background colors.
👎These lines of text don’t meet the color contrast ratio recommendations and can be difficult to read against their background colors.
Shape
In short: serif fonts are generally considered a good choice for body text in print, however, a rule of thumb is to use non-serif fonts for body text
on screens.
Like any rule of thumb, this one comes with a number of explanations and exceptions. A choice of a suitable font for body text on the web is not so cut and dry as ‘serif vs. non-serif’. There are characteristics which can help you recognize which font is a good candidate to be legible:
Tall x-height, or reduced ascenders and descenders. This increases the readability of the font, keeping letterforms recognizable, but not ‘wasting’ space on increased contrast between capitals and regular script.
Decreased contrast between strokes and serifs (in other words: thicker serifs, thinner strokes). This helps to avoid unpleasant blurriness at small font sizes.
👍
👎
Relatively wider letterforms and open apertures/counters. That extra bit of space inside the letters makes them more recognizable when the text is read quickly.
Relatively wider letterforms and open apertures/counters. That extra bit of space inside the letters makes them more recognizable when the text is read quickly.
Remember! These are generally rules of thumb!
Ultimately, what makes good design, typography or otherwise, can be kinda intangible.
But, using these guidelines and adding them to our designer toolbox, we can use typography to the best of our abilities 🥲
Css
Font-face
With the CSS @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Font-face
With the CSS @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Font-face
With the CSS @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
WOFF (the Web Open Font Format)
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
WOFF (the Web Open Font Format)
There are three main benefits to using WOFF:�
Letter Spacing
Adjusts spacing between letters
letter-spacing: 1px;
letter-spacing: -.5px;
Line Height
Increases the space in between lines
line-height: 1.1
line-height: .2
Examples
Some words to talk about technique:
Giant typography
Tiny typography
Bold thick typeface
Thin detailed typeface
Broken text baseline
Squished leading
Airy leading
All caps text
All lowercase text
Easy legibility
Challenging legibility
Airy tracking
Tight tracking
Type as image
Illustrative type
Extreme hierarchy
No hierarchy
Repetition
Type as image
Long line length
Short line length
Some words to talk about composition:
Single focal point
No focal point
Figure ground ambiguity
Rotated elements
Lots of empty space
No empty space
Spacious margins
Tight margins
Focus in center
Focus in margins
Fine detail
Bold gestures
Symmetry
Asymmetry
Density
Sparsity
Depth of space, layered
Collage (multiple media)
Allover composition
Some words to talk about color palette:
Bright
Vibrant
Dark
Muted
High contrast
Low contrast
Multi-colored palette
Monochromatic palette
Spot of color
Transparency
Gradient
Alternating colors
Background color
Receding color
Foreground color
Primary colors
Complementary colors
Clashing colors
Vibrating colors
Monochromatic