Optimizing letter spacing for display text We’ve stress-tested Untitled UI’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.

Website headers are a great example of where a display typeface should be used.Īs a general rule, “text” styles should be used for the majority of informational copy and body copy (paragraph text, 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. Each typeface listed in this post is free to use for both personal projects and commercial use.īut first, let's spend a bit of time on typography basics to help you make the most of modern fonts.Ī display text style or display typeface is intended for use at large sizes for headings, rather than for extended passages of body text. We've written this post to help you choose the absolute best free fonts for modern web design. 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, 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 creative projects. 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 and UI design.īad typography, by contrast, sticks out. It often goes unnoticed in good design, but good type design and a the perfect 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 or the best free fonts. The typography system is one of the most foundational parts of user interface design.

Best place to find free web fonts