More on Fonts
- Smashing Magazing on Responsive Web Typography
- Marko Dugonjić — Responsive Web Typography (SmashingConf Oxford 2014)
General typesetting for the web
Tools
- dropcap.js
- CSS 3 Font-Feature-Settings OpenType demo - Test OpenType features
- State of Web Type - Test OpenType features
- Typetester – Compare and test Web fonts from Adobe Edge, Google and Typekit web hosting services
Basic Methods
-
Provide different font sizes for different reading distances, currently achievable by detecting a device’s form factor using @media queries. Long term, this is probably not ideal — that is, until reading distance-detection techniques become more feasible. In the meantime, use Size Calculator by Nick Sherman and Chris Lewis to calculate the physical or perceived font size when factoring in reading distance.
-
Maintain perfect proportions in a paragraph with letter spacing, word spacing and line height properties for each breakpoint. Universal Typography’s demo by Tim Brown of Nice Web Type is a very useful tool that can help you experiment with and adjust your paragraph proportions accordingly.
-
Establish hierarchy using either a typographic scale (Modular Scale is a useful tool by Tim Brown and Scott Kellum) or different styles at the same font size — for instance, uppercase for h2, small caps for h3 and italics for h4 subheads. For more options and ideas on styling subheads, may I suggest you read “Setting Subheads With CSS” and explore examples of subheads set with CSS.
-
For small screens, indent paragraphs and separate page sections with white space. For large screens, use block paragraphs and separate page sections with graphical elements (lines, shapes, color).
-
Use graded fonts to normalize rendering across different pixel densities. Font grades are very subtle font weights used to compensate for different ink and paper qualities, as well as for different pixel densities on screen. This method is explained in detail in iA’s article “New Site With Responsive Typography.” In short, lighter grades are used for low-DPI screens and heavier grades for high-DPI screens, while graded fonts will also compensate for different sub-pixels’ direction between portrait and landscape mode on mobile and tablet devices.
-
Look for type families that have multiple optical sizes, and use appropriate styles for body copy, tiny text and display sizes. For instance, Font Bureau, the company behind the Benton Modern family, makes many families like this with a wide stylistic palette.
-
Use different font widths according to the width of the screen (see what happens with the subheads on the Benton website when you resize the browser window). For instance, use a condensed font for small screens and a wider font for larger desktop screens, just like on the brochure website for Input (again, resize the window). In the case of the Benton project, we set different font widths manually for each breakpoint, but there’s also a solution for automatic swapping using Font-To-Width (by Sherman and Lewis) that takes advantage of multiple-width type families to fit pieces of text snugly within their containers.