Inter: a closer look at the internet’s workhorse sans

Inter has become the internet's go-to sans-serif typeface for user interfaces, dashboards, and product websites due to its balanced design and versatility.

Why Inter became the default UI sans

Inter was designed by Rasmus Andersson with the specific goal of being highly readable at small sizes and on screens. Its x-height is generous, which enhances legibility, and its letterforms are open and clear, reducing eye strain during prolonged use. The typeface includes a wide range of weights, from Thin to Black, and includes true italics, providing designers with ample flexibility for creating visual hierarchy and emphasis.

Inter’s design is optimized for digital interfaces, with features such as slightly rounded corners that reduce pixelation at low resolutions. Its balanced letter spacing and open counters contribute to its readability, making it an excellent choice for user interfaces, dashboards, and websites. The typeface’s popularity has been further bolstered by its inclusion in the Google Fonts library, where it is freely available and easy to implement.

Variable features of Inter

Inter is a variable font, which means it includes multiple font styles within a single file. This allows for smooth transitions between different weights and styles, enabling dynamic and responsive typography. The variable features of Inter include:

Weight axis: From Thin to Black, allowing for fine-grained control over text weight.
Italic axis: Smooth transitions between roman and italic styles.
Optical size: Adjusts the font’s design based on the point size, optimizing legibility at both small and large sizes.

These variable features make Inter highly adaptable to different design needs, allowing for both subtle and dramatic typographic changes depending on the context.

Why pair Inter with Fraunces?

Fraunces is a high-contrast serif typeface with a strong personality, making it an excellent contrast to Inter’s clean and neutral design. Fraunces was designed by Undercase Type and is inspired by the elegant serif typefaces of the 18th century. Its high contrast and sharp serifs provide a striking contrast to Inter’s simplicity, creating a dynamic and engaging visual hierarchy.

Fraunces is available in a range of weights, from Thin to Black, and includes true italics, providing designers with the flexibility to create a variety of text styles. Its high x-height and open letterforms make it highly readable at both small and large sizes, making it an excellent choice for body text in digital applications.

The pairing of Inter and Fraunces works well because it combines the modern, clean aesthetic of Inter with the elegant, high-contrast design of Fraunces. This combination is particularly effective for app UIs and product sites, where a balance between readability and visual interest is key.

How to use Inter and Fraunces in your designs

When using Inter and Fraunces together, consider the following tips to maximize their effectiveness:

Use Inter for headings and UI elements: Its clean design and range of weights make it ideal for headings, subheadings, and UI elements such as buttons and menus.
Use Fraunces for body text: Its high contrast and elegant serifs provide a pleasant reading experience for longer passages of text.
Experiment with weight and style: Use different weights and styles of both fonts to create a visual hierarchy and guide the user’s eye through the content.
Consider color and background: Make sure the text color and background provide sufficient contrast for readability, especially when using Fraunces at smaller sizes.

Alternative pairing: Inter and Libre Franklin

If you’re looking for an alternative pairing that maintains a modern and clean aesthetic, consider using Inter with Libre Franklin. Libre Franklin is a versatile sans-serif typeface inspired by the classic Franklin Gothic. It offers a range of weights and styles, from Light to Extra Bold, and includes true italics.

Libre Franklin’s design is more neutral than Fraunces, making it a good choice for body text when a more understated look is desired. Its x-height is generous, and its letterforms are open and clear, ensuring excellent readability at both small and large sizes.

The combination of Inter and Libre Franklin is particularly effective for dashboards and product sites where a clean, modern look is paramount. This pairing provides a balanced and harmonious typographic palette that is both functional and aesthetically pleasing.

Frequently asked questions

What is the difference between Inter and other popular sans-serif typefaces?

Inter is specifically designed for user interfaces and digital applications, with a focus on readability at small sizes and on screens. Its design includes features such as slightly rounded corners and generous letter spacing, which distinguish it from other sans-serif typefaces like Roboto or Open Sans.

Can I use Inter and Fraunces together in print design?

Yes, both Inter and Fraunces are suitable for print design. However, their strengths lie in digital applications, where their readability and visual hierarchy are particularly effective. When using them in print, ensure that the text size and color provide sufficient contrast for readability.

Are Inter and Fraunces available in web font formats?

Yes, both fonts are available in web font formats and can be easily implemented using the Google Fonts library. This makes them accessible for web designers and developers who want to use them in their projects.

How do I access Inter and Fraunces?

Both fonts are freely available via the Google Fonts library under the SIL Open Font License. You can download them directly from the Google Fonts website or include them in your project using the provided HTML and CSS code snippets.