cssfonts

What are the different .tff files given by Google fonts that differ only by <number>-pt?


Curious about the way fonts worked before web/variable fonts. I'm building a web page's CSS, following a video course. I downloaded the Inter font from fonts.google.com, and the download included multiple sizes for each style such as:

Inter_18pt-Regular.ttf
Inter_24pt-Regular.ttf
Inter_28pt-Regular.ttf

Why does it include multiple sizes? I guess if I use font size 20pt on my page it will scale whichever font I pick up or down to the target size. Should I pick the font file that's closest to the desired size? Or are these intended to be used together somehow?

I'm actually not using these files. I'm using the "embed" button to grab the fonts from Google's CDN, but I'm curious about these static files in the download.


Solution

  • These three file names represent three different optical sizes of the font Inter Regular. Here is an excerpt from Google’s explanation of the concept of optical size:

    Optical sizes in a variable font are different versions of a typeface optimized for use at singular specific sizes, such as 14 pt or 144 pt. Small (or body) optical sizes tend to have less stroke contrast, more open and wider spacing, and a taller x-height than those of their large (or display) counterparts.

    In the case of Inter Regular, the only difference seems to be the letter spacing.

    image comparing the three optical sizes You asked:

    Should I pick the font file that’s closest to the desired size? Or are these intended to be used together somehow?

    Yes, I imagine that you’d choose the font closest to the desired size. That would give you the appearance intended by the font designer. But at the end of the day the three optical sizes are available and you can decide whether to use one of them or a combination. It would only be really picky designers who would notice the difference.