Optimizing letter spacing for display text We’ve stress-tested Untitled’s typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project. For example, if your display text is 60px, set the line height to ~1.2 or 72px and see how that looks.

As a general rule for display text (headings etc.), aiming for 1 to 1.25x is usually a safe bet. To complicate things further, there is an inverse relationship between font size and appropriate line height - the larger the text, the smaller the line height should be. For example, if your body text is 16px, set the line height to 1.5 or 24px. Determining the correct line height can differ between different typefaces and sizes, so it’s important to adjust and experiment until it looks and “feels” right - it’s not an exact science.Īs a general rule (and a good starting point), body text should be between 1.5 to 2x the text size, depending on the width and length of the content. What does “Display” mean?Ī display text style is intended for use at large sizes for headings, rather than for extended passages of body text.Īs a general rule, “text” styles should be used for the majority of informational copy (body, labels, UI elements) and small sizes in user interfaces, while larger “display” styles should be reserved for headings (H1-H6).ĭetermining the correct line height for a text styles is important to ensure legibility. We've written this post to help you choose the absolute best free fonts for modern web design.īut first, let's spend a bit of time on typography basics to help you make the most of modern fonts. These are web safe fonts that are tried and true, but they can make your UI design look dated. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out, choose the perfect font for each project, and improve user experiences.įont choices can be hard and it's easy to fall back on 'safe fonts' like Roboto, Source Sans Pro, Times New Roman, or Lato. Partly, because good typography skills are difficult to master. Often, designers fall back on trends rather than carefully considering the best fonts for a design. It reflects badly on the brand and leads to a poor user experience, even if users can’t pinpoint why. Even to non-design-oriented folks, bad typography is easy to spot. I've always felt that good typography is the most undervalued and underappreciated elements in modern product design.īad typography, by contrast, sticks out. It often goes unnoticed in good design, but good type design and a great font can elicit emotion, guide attention and even create a typographical identity.

That’s why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design and for different design projects. If your users are unable to read your websites due to bad typography or small sizes, you can say goodbye to them immediately. Choosing the right fonts for your designs is not about just choosing web safe fonts.

The typography system is one of the most foundational parts of user interface design.

Find free fonts