Using Web Fonts

Font vs Typeface vs Typography

I may be in over my head even attempting to talk about typography. But it's important to establish some terms so we're on the same page. What is a font, and what is a typeface?

Essentially, a typeface is what a character looks like, and a font is how that typeface is represented. Arial Bold 16px is a font, but Arial itself is a typeface.

Typography, on the other hand, is the art and technique of arranging text to make it legible, readable, and visually appealing. It includes choosing typefaces, adjusting spacing, line height, and ensuring good readability in design.

A nice font or fancy typeface doesn’t automatically mean good typography. Likewise, a simpler or generic typeface/font can look great with the right typographic choices. Again, this topic has a lot of weight to it (see what I did there?), but hopefully, this gives you a high-level perspective so you can dive deeper later.

Using Web Fonts

Now, that we're all on the same page. Let's talk about web fonts, or web safe fonts. Web fonts are the fonts that are pre-packaged in your operating system and web browser. If you create a web page and you don't declare a font-family in your CSS, your browser will set it to the default serif font like 'Times'. If you search for a font-family in your inspector you'll get a short list of available fonts. But, the list is typically longer than what the inspector shows you. There's a collection of Serif, and Sans-serif fonts that are readily available along with some odd typefaces like, fantasy, monospace, and symbol. Many of these have style variants like font-weight and italic styles.

Caveat: Font Availability

To the uninitiated, you might think all web fonts are available across all operating systems and browsers. Unfortunately, that's not the case. Browsers and operating systesms will always have their particularities. Some OS's offer fonts that others don't. It can be frustrating. Luckily, there are workarounds. You can use fallbacks to make sure if that your font looks good across different operatings systems, even if they vary in style slightly.

font-family: "Baskerville", Georgia, "Times New Roman", "DejaVu Serif", Times,
  serif;

Improving Web Fonts

I'm not an expert in typography, but we can go over some tools you can use to fine-tune a font. Some things are obvious—size, line-height, weight. Just adjusting those can completely change the feel of your typeface. But there are other properties, like letter-spacing, text-decoration, and font-variant for small caps, that can add more weight and character to your text.

Another underrated CSS property is font-size-adjust. It keeps the x-height (the height of lowercase letters) consistent when switching between fonts, so your fallback doesn’t look awkwardly big or too tiny. If you've ever switched a font and suddenly everything feels off, this property helps balance things out without messing with your entire layout. It’s one of those small tweaks that can make a big difference in readability.

font-size-adjust: 0.5;

Ligatures can be adjusted with font-variant-ligatures. You can optimize text rendering for better performance with:

text-rendering: optimizeLegibility;

And finally, you can improve visibility with:

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

Where to Find Web Fonts

After searching for available web-safe fonts one too many times, I decided to build a little app to make it easier. Yes, I borrowed heavily from Google Fonts. If it ain’t broke…

https://web-safe-fonts.netlify.app/

I'll add to it over time. For now, you can search for a font and see examples of how to use it. I've also added some notes and things to consider. Check it out.

Conclusion

You may not need a heavy custom font. Know what’s available and learn how to use it. Explore the built-in font features that can improve performance and readability. Happy coding