Few things have changed as much in the past decade as online typography. We lived the first two decades of the internet within 8-10 different online type options, but the last decade has produced a lifetime of changes.
Online fonts have dramatically expanded the options available to designers; not every font is a quality selection, and many need further assistance to extract the best possible display of information. It also remains true that any font you use should be available in multiple weights and have an italic version available.
There is no magic bullet that will turn your work into a typographic masterpiece. It takes work, efforts, and yes — failure. The material included here is designed to breakdown and explain what your eyes have been seeing all along.
Importing custom fonts
One of the great advantages of designing with code today is the wide array of typographic options you have available. As I’ve mentioned before, typographic expression online was severely limited before web fonts becoming mainstream over the past 10-15 years.
Pulling fonts into your project from a resource often only requires the use of an @import rule at the top of your CSS. The CodePen below illustrates the syntax for connecting Google Fonts to a project.
In this instance, we imported two fonts. You could import far more but not without taking a significant performance hit when your project goes live. This is why it’s always a good idea to pair back any unused fonts from your project.
Property values
With your chosen CSS reset file handing any inconsistencies, you can focus on designing text-based solutions that will render reliably.
While margin and padding both play a huge role in how text is organized, there are a set of typography-specific properties that you’ll benefit greatly from mastering.
Fonts and fallbacks
While there are many important properties that we’ll need to cover, font-family is by far the most important.
You can apply the font-family property anywhere in your CSS. Obviously, if you use it within a <p> tag, the property will only impact text associated with that tag, but when you use font-family on the :root pseudo-class — all typography in the document will adopt the associated values until directed otherwise by declarations elsewhere in your CSS. The example below displays this concept and, as you’ll see in a moment — a lot more:
Font-family is one of the CSS properties that use fallbacks if resources aren’t available or can’t be rendered. In the example above, the browser will try to load Roboto first, but if that fails to load, the fallbacks give the browser a series of fonts to try next. If you delete the @import rule in the CodePen above, you’ll see what happens when the fallback is needed.
A combination of fonts used together as a fallback is often referred to as a font stack. The goal of a well-constructed font stack is to combine fonts that look similar; doing so will minimize the impact on your design should a font fail to load.
Font-size is an easy property to understand, but it can take many measurements confusing. Obviously, the property sets the size of the typography being displayed. You’ll see font-size set in pixels, and for years this has been a fine solution in many instances. However, pixels are static, which means they lack the ability to scale on demand — which means pixels pose an accessibility problem.
In the CodePen example above, we set font-size at the :root to 50%. Your obvious question here is 50% of what? The default browser setting for font-size is 16px, so 50% of 16px allows us to establish the measurement needed to apply an spacial system based on an 8px grid.
All this math means that we can now use the relative measurement form known as rem (root em). When font-size: 50% is applied to the :root element, all references to rem throughout the site are referencing that measurement. 50% of 16px is 8px — so 1rem = 8px and 10rem = 80px. More importantly, if someone wants to leverage the zoom function on their browser, they can do that if you are using rems on your site.
Also present in the example are font-weight and font-style. These properties are far more straightforward than the other two, but there are definite ways to misuse them. Most quality fonts will include more than one option, but you must specifically declare which options you want to make available in your design. An easy solution would be to import all variances of a font, but doing so could significantly slow down your site. Roboto has 12 different options alone! That’s why it is suggested that you choose the specific styles you want to import.
When you select a specific font-weight it will typically come over with a numerical identifier. In the example above, 400 and 900 are included, with larger numbers always indicating heavier weights. The same requirement applied for font-style as well, but here the browser will attempt to fake an italic style if you did not include an italic option. Know that these faked styles always look poor and will render with inconsistent results. It is always better to choose a font with an italic option available than fake it.
Innerspace
The difference between good and great typographical display often depends on how space is handled inside the typography itself. It’s possible to elevate most reading experiences just using the line-height and letter-spacing properties.
These values map directly to the concepts of leading and tracking from print design, and they handle the space between lines (vertical) and between characters within a line (horizontal). Unlike print, where properties like these were used to squeeze content into place, here, the space constraint is largely non-existent, which means we can focus purely on legibility and style.
While it might seem odd for designers to edit the visual display of professionally created typography, most type has to be adjusted to the format that it inhabits. Line-height is the perfect example of this principle. There are instances where predetermined font values work fine, but when you consider the context where a font is being used, the need to make adjustments becomes more apparent.
The example below contains two versions of the same content; option A contains no adjustments, while option B makes line-height adjustments specific to the displayed content.
The changes seem subtle, but the content types displayed require the line-height to change. Shorter text lengths are often displayed at larger sizes, think headlines. The folks at digital.gov want us to tighten this content up because it becomes easier to read when we do so. Equally, the longer passages need more space, so paragraphs need an increase in line-height.
The measurement shown in the example is considered to be a unitless number that multiplies the value present in font-size. This allows the line-height to scale for accessibility purposes. While the property can accept other values, using a unitless measurement is preferred.
While line-height is often used to stylize large swaths of a design, letter-spacing is typically used to tweak smaller attributes, like labels and buttons. Anything set in all caps is a likely target for a spacing tweak.
Unlike many other CSS properties, the values applied to letter-spacing do not override the original value but are added to or subtracted from the initial setting.
You can easily go too far with letter-spacing, which normally results from too little or too much space between the characters on the line. In the examples below, you can easily tell when illegible begins to degrade. Not only does it look poor, but it also negatively impacts accessibility.
The smallest of measurements (set in ems for maximum compatibility) can dramatically impact the type display. To see just how dramatic larger numbers can impact the display, change any of the values to a whole number. Record what happens in your journal for future reference.
I’ve also snuck in another property, text-transform, which often pairs well with letter-spacing. While it’s rare that lowercase typographic displays need character spacing help, adding spacing to all cap displays isn’t a requirement, but it is preferred.
Resources for review
Please use the following items to guide your exercise attempt:
Exercise
Length: About an hour to complete.
Typography is a pillar, if not the backbone of most digital products. Future success as a designer will be tied to your ability to create refined type solutions. So... no pressure :).
In this exercise, three different challenges gradually increase in complexity. CSS concepts covered previously will be required to complete the work that follows.
As with prior exercises in this series, you will not need to modify the HTML structure to recreate the solution.
- Exercise 1: CSS quote - CodePen | Finished image
- Exercise 2: CSS stories - CodePen | Finished image
- Exercise 3: CSS show detail - CodePen | Finished image
Fork the Codepen exercise and rename it before beginning your work.
///
Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.
///
Up next CSS Color