At An Event Apart in Seattle WA 2014, Nick Sherman talked a few challenges with typography on the Web and the potential for designers to do a lot more. Here's my notes from his talk The Future of Responsive Typography:
- There has been a lot of advancement in Web typography over the years but there's still a lot we can improve.
- Paragraph widths: the big problem on sites today is overly long paragraph widths. Max-width: 40em is basic guideline for making text more readable.
- Kerning: can be used to tighten/loosen fonts. Ligatures: can combine letters to make them more legible. text-rendering: optimizeLegibility is one line of code that addresses these two issues and will instantly improve typography on the Web.
- Sub-pixel font lettering can sometimes clog up letters especially on OSX. webkit-font-smoothing: antialiased; Don't use this on small fonts.
- If everyone picked up these three tips , the Web would be better off.
Media Query Functionality
- Physical resolution is missing in media queries. The original spec had physical dimensions of pixels and screens.
- The way the spec works today is built around an assumption of 96dpi. If it changes, many things already built will break.
- How can you address the issue of physical size on the Web?
- In Windows 8, you can query the raw DPI of a screen (the physical size) but this can only be queried by native applications.
- When you have the physical resolution of each screen, you can render fonts at the same size across different sized screens.
- If you know the viewing distance, physical size of a screen -you can determine the perceived size of fonts.
- Size calculator is a tool that can help you determine perceived size of elements viewed from far away.
- Viewing distances are important to consider when targeting different viewports. There's no way to know for sure right now.
- There's a media query that is supposed to tell you whether something is projected, but it does not seem to be supported.
Types & Fonts
- Font should be made for specific purposes: low quality paper and low resolution screens for example.
- Sibling fonts within a font-family can address situations like small fonts on the Web (down to 9 pixels).
- Large font families with lots of widths and weights provide a lot of flexibility in web they could not with only a few styles. It increases their range of expressions.
- Sitka was a new family of fonts designed for Microsoft Word with multiple optical size masters. It changes automatically depending on the size you are using the font as: caption, display, banner, etc.
- In Web design, a lot is done dynamically and fluidly. Type, however, has a "glass floor": there is a hierarchy that can't be adjusted without loading a full font file. Changing width or weight requires a whole new font.
- A variable font format: would provide more of a system instead of a set of font files. Interpolating weights would reduce file sizes, download times, and more.
- We're currently stuck with "detect and serve": understanding screen size and loading an appropriate font face.
- Font‑To‑Width uses large type families to fit pieces of text snugly within their containers.
- A wide range of font styles is good for responsive designs because you can swap styles to fit into variable.