Typography involves so much more than choosing a great font. When used effectively, it can enhance usability, readability, accessibility, and hierarchy within an interface. In this piece, I’ll share some tips and industry-standard principles for using type like a pro in a UI.

1. Typography Terminology

Typography terminology creates the foundation of our knowledge of type. Think of typography terms like kerning, leading, and weight as levers that we can pull to create more readable and aesthetically pleasing designs.TrackingTracking or letter-spacing refers to uniformly increasing or decreasing the horizontal spacing between a range of characters.BaselineThe baseline is the invisible line upon which a line of text rests.LeadingLeading is the vertical spacing between two baselines of type. This is more frequently called line-height in the modern age. Oh, and it’s also pronounced “ledding.”WeightWeight refers to the relative thickness of a font’s stroke.Serif/Sans SerifA serif is a small line or stroke regularly attached to the end of a letter or symbol within a particular font or family of fonts. A typeface that does not include serifs is a sans serif one (sans = without).

2. Hierarchy

There aren’t many interfaces that have no words on the page. The vast majority of UI designs are made up of a few standard elements — text, rectangles/boxes, buttons (arguably a rectangle + text), and icons. It’s what we do with these elements that can make or break an interface.Hierarchy helps us improve the scannability and readability of an interface by making it easier for users to find important information quicker.We should be using bigger, bolder text for our most important text because that’s what people’s eyes will be drawn to. For our less important information, smaller, lighter text is optimal.

3. Optimal Line Height & Length

Line spacing dates back to the days of manual typesetting on printing presses. Its technical name, leading, refers to thin strips of lead metal that separated the lines of text.In the modern age, line-height and width is essential to ensure our blocks of text are easily readable on different device sizes.Here are a few helpful heuristics to follow for line-height:Experiment with between 130%-180% for optimal readability and accessibility. The goal is to find a sweet spot — too much spacing, and it’s easy to get lost, too little, and it’s hard to read—test different scales on your typeface.Check line spacing when changing fonts or font sizes. Different fonts have different maximum heights, so double-check line spacing for readability.Limit line length to 70–80 characters. Long lines of text can be intimidating and confusing to follow.Small fonts should have more spacing because smaller fonts are more difficult to read so additional space makes it easier to parse.

4. Prioritize Readability

To ensure our typography is easily readable and accessible to people with disabilities like color blindness, vision disabilities, hearing disabilities, and so on, we should follow Web Content Accessibility Guidelines (WCAG).Here are a few standards that will optimize our UI for readability. Find more at Accessible.org.Rule of thumb; text size should be 16 at minimum. This is obviously device-specific, but it frequently stands. If it’s a TV interface, though, for example, then the text should be even larger.There must be a color contrast ratio of at least 4.5:1 between all text and background. Download the Stark plugin to ensure you’re meeting this standard in XD, Sketch, and Figma.Do not rely on color alone to convey information. For example, an error state shouldn’t only be displayed with a red outline, use a warning icon and descriptive text as well to alert that an issue has occurred.Text resize (1.4.4): Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions.Images of text (1.4.5): Do not use images of text unless necessary (e.g., logo).

5. Limit the number of typefaces

Mixing too many different typefaces can make our app seem fragmented and sloppy.Instead of introducing new fonts to the interface, use font families. Fonts from the same family are designed to work together, so they’re flexible and consistent.

6. Define type scale guidelines

If you’re reluctant to create typography guidelines from scratch, try the Material type scale generator to generate font sizes for paragraphs, headings, buttons, and so on.To create type scale guidelines for a UI project, here’s how I do it:Select a font to work with. My favorite places to get high-quality UI fonts are Google fonts or Adobe fonts.Establish a base font size. I start by establishing the most commonly used type scale for body copy like 16pt, for example, then determine a suitable line-height.Line height. As I mentioned earlier, experiment with between 130%-180% for optimal readability. This ratio isn’t always accurate, but it’s a good place to start and then make adjustments as needed.Define a scale. A scale provides consistency, rhythm, and hierarchy to our typography. To set type-scale for h1, h2, h3, body, captions, buttons, and so on, we need a scale value to multiply by our base font size. Common scales for type are 1.250x,1.414x, 1.5x, 1.618x. Again, find a scale that works for your typeface and UI.Test scales on devices. Test font with different scales on multiple device sizes to decide on the right value.

7. Use recognizable words and phrases

The rules and methods I’m mentioning in this article can do a lot to improve the readability and aesthetics of our interface. But what about improving the understandability of the words in our interface?To really bring it all together, we should follow some rules for what is actually being contained in the text.Here are tips to convey clear messages:Avoid jargon. Unless we’re designing an app for experts. Avoid industry-specific terminology like “buffering” or “configuring.”Write in the present tense. Instead of saying: “message has been sent” say, “message sent.”Keep it short and sweet. There is likely fluff in UX copy that can easily be removed with a quick audit. Instead of saying: “Only Premium members have access to this feature” saying “Join Premium to Access” will keep it concise and to the point.Begin with the objective. When a phrase describes a goal and the action needed to achieve it, start the sentence with the goal. Instead of saying: “Drag a photo to the trash to remove it from this album” say, “To remove a photo from this album, drag it to the trash.”Keep it consistent. When addressing the user, be sure to remain in first or second person, whichever was chosen. So instead of “edit your location in my account” say, “edit your location in your account.”

8. Emphasize important information

Some text is invariably going to be more important than the other text on the page. It’s essential that we emphasize an elements importance with weight, size, color, or all of the above to highlight and distinguish it from other elements.We can use color and visual weight to emphasize or de-emphasize typography. By using lighter text for supporting or less important blocks of text it draws more attention to the bolder, more vibrant text.This improves the scannability of an interface and allows users to make the desired actions quickly without using their precious brain power.

9. Consider language support

If you’re in the camp of multi-language support for your software then you know who you are. This is a constraint that can drastically change our pixel perfect layouts if not accounted for appropriately.The first thing to keep in mind is word length — it can vary across languages, even those that use similar glyphs, such as English and German. “New” for example is a short 3 letter word in English and fits nicely into a few pixels, however, in French we’d need enough space for “Nouveau” and its 7 characters.For some languages like Arabic and Hebrew, considering alignment is important because they’re displayed with characters appearing from right to left. Those fonts may appear smaller than Latin ones at the same font-size, requiring adjustments to line spacing and alignment so that the typography works well in that UI for all languages.

10. When in doubt, use system fonts

Typography can be challenging to get right and sometimes it’s just not worth the hassle. The good news is, iOS and Android have native system typefaces that support a range of weights, sizes, styles, and languages, so we can design comfortable and beautiful reading experiences throughout any app.On iOS they have San Francisco (SF) and New York (NY). On Android their main font is Roboto and Noto is the default typeface for all languages not covered by Roboto.When we use text styles with the system fonts, we also get support for Dynamic Type and the larger accessibility type sizes, which provides additional flexibility by letting readers choose their preferred text size.