Typography

Just don’t.

[T]he line-gap-override, ascent-override and descent-override CSS properties […] allow developers more control over how fonts are displayed. The following snippet shows just how useful these properties are when using a local fallback font:

These […] properties help to reduce layout shift when fonts are loading, as developers can better match the intricacies of a local font with a web font. They work alongside the size-adjust property[.]

Walking down an aisle in a library, I no more than glance at the vast majority of books shelved on either side of me. Only a madman would suggest that my disregard of these books should sanction their pages being torn out. Nonetheless, because research has shown that visitors don’t read the average Web page in full, and because the “success” of a page is more easily measured by user action than cognition, we are often encouraged to marginalize our writing in favor of visual signifiers or action cues.

Sure, most people will “bounce” your content, but if you really have something to say, don’t alienate the people who are willing to give your writing a chance. Good typography does justice to your words, and good wording does justice to your ideas. If readers are comfortable reading your type, then they will more likely be comfortable with what you are writing about.

There are many design considerations for making your content more accessible to all. Some things to think about and build into your design workflow include:

• Choose a common font that most users have encountered before.
• The “serif vs. sans-serif debate” is not a huge deal if you choose a common font family or one that has unique characters.
• Avoid specialty display fonts or font families that are not unique (ex. letters or numbers that could mirror each other).
• Your fonts should have a minimum size of 14px (ideally more) and when coded should use relative values.
• Pay attention to color and contrast! Use tools to check the ratio between the text and background and be wary of gray.
• Don’t rely on color alone to signify information (ex. “click on the red button”).
• Clearly define paragraph and letter spacing.
• Do not let the overall width of the content exceed 80 characters (40 characters for logograms).
• Avoid paragraph alignment (such as justified) which creates whitespace within the content.

This is pretty cool: you can use this to visually display the differences between two fonts - usually a fallback font and a web font - and adjust the various CSS font properties to match them as closely as possible to reduce the amount of page shifting that may occur when the web font loads. Also includes a longer paragraph at the bottom that can compare the two fonts either by overlaying them statically or by switching between them at a regular interval.

For perhaps the first time since the original Macintosh, we can get excited about using system UI fonts. They’re an interesting, fresh alternative to web typography — and one that doesn’t require a web-font delivery service or font files stored on your server. How do we use system UI fonts on a website, and what are the caveats? System UI fonts being amazing kind of snuck up on us. Google has been toiling away at Roboto with great success (including regular updates), Apple made a splash with San Francisco, and Mozilla asked renowned type designer Erik Spiekermann to create Fira Sans.

The first grouping is CSS properties that map to the system’s UI font. That covers a lot of ground, and there is no chance that these fonts will be mistaken for something else:

• -apple-system targets San Francisco in Safari on Mac OS X and iOS, and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
• BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.

The second grouping is for known system UI fonts:

• Segoe UI targets Windows and Windows Phone.
• Roboto targets Android and newer Chrome OS’. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.
• Oxygen targets KDE, Ubuntu targets… well, you can guess, and Cantarell targets GNOME. This is beginning to feel futile because some Linux distributions have many of these fonts.
• Fira Sans targets Firefox OS.
• Droid Sans targets older versions of Android.
• Note that we don’t specify San Francisco by name. On both iOS and Mac OS X, San Francisco isn’t obviously accessible, but rather exists as a “hidden” font.
• We also don’t specify San Francisco using .SFNSText-Regular, the internal PostScript name for San Francisco on Mac OS X. It only works in Chrome and is less versatile than BlinkMacSystemFont.

The third grouping is our fallback fonts:

• Helvetica Neue targets pre-El Capitan versions of Mac OS X. It is listed close to the end because it’s a popular font on other non-El Capitan computers.
• sans-serif is the default sans-serif fallback font.

Ever needed/wanted to automatically determine if you should use light or dark text, given a provided background colour? This mixin does that for you.