Intro to Inter Interfaces

To provide a unified Vercel experience across all operating systems, devices, and browsers, we chose to use a custom typeface: Inter ¹. As performance obsessed engineers, we didn’t want design to get in the way of function – so we made Inter load almost instantly and without harming web vitals.

File Size

Vercel products are English-only, for now, so we only need to load Inter’s Latin glyphs. Specify a `unicode-range` in your `@font-face` declaration that matches the glpyhs you need. For Latin, that’s `231-671`. ²

Specifying this range in CSS is not enough, we need to make sure the font file we’re requesting only contains the glyps we want too. Google Fonts makes this easier for us by providing a file for each set of language-specific glyps (Latin, Greek, Cyrillic, etc.)

Using a variable font is crucial for minimizing the size of the file. By describing the way a font scales at different weights, the variable font format skips describing the paths of each weight individually and delivers the same information at a much smaller file size. It also means we don’t need to request a new file for each weight, reducing the number of network requests. Inter’s variable font file for Latin weighs about 36.7kb, compared to 128.9kb across 9 files if each font weight was defined individually.