Typography
05 / Digital Typography
Key question
How does typography behave on screen?
On screen, typography is fluid. Text adapts to devices, people zoom in, fonts are loaded over the web. Good digital typography embraces this movement rather than fighting it.
Learning objective: You will be able to integrate web fonts efficiently and with privacy in mind, use variable fonts, and design typography that is both responsive and accessible.
On screen, text is fluid.
5.1 / Web fonts
Load, view, protect.
Web fonts load with the page. This costs time and data. Three measures keep them lean.
01
WOFF2
The compressed web format. Smaller than OTF or TTF and supported in all modern browsers.
02
Subsetting
Only load the characters you need, such as Latin with accents instead of all languages.
03
Host locally
Load fonts from your own server instead of Google Fonts. Faster and better for privacy.
With font-display: swap, the browser initially displays a fallback font and swaps it as soon as the web font has loaded. This ensures the text remains readable straight away.
Text must be immediately legible.
5.2 / Variable fonts
One file, many cuts.
A variable font contains all weights and widths in a single file. Intermediate steps can be freely selected, such as a weight of 450 instead of just 400 or 500. This saves loading time as soon as more than two or three styles are in use.
Some variable fonts feature an optical size axis. Smaller sizes become more open and robust, whilst larger sizes are more delicate and compact—just like in the days of metal type, when each size was cut individually.
One file, many cuts.
5.3 / Responsive and accessible
A font that grows with you.
Font sizes are specified in rem so that they adapt to the browser settings. Using clamp(), headings scale fluidly with the screen width without becoming too large on mobile or too small on desktop.
Accessible means: body text at least 16 pixels, zoom to 200 per cent without loss of content, sufficient contrast, and no text as images. Learn more in the Accessibility course.
When you zoom in, you shouldn't lose anything.
Exercise
Typography for the website
Task: Define the web typography for the Theater Rheinufer website.
STEP 1
Choose web fonts, download them as WOFF2, and host them locally.
STEP 2
Define a type scale in rem and heading sizes using clamp().
STEP 3
Check the page on mobile, on desktop and at 200 per cent zoom.
STEP 4
Measure the size of the font files and reduce them using subsetting or a variable font.
Evaluation: How quickly can the text be read, and does it work at any size?