Skip to main content
Guide Collection

Typography

Web design, it is sometimes argued, is mostly typography. Here at CSS-Tricks we mostly talk about the technical how-to’s of web typography, but there is a whole world out there to dig into around getting good at the aesthetics of typography.

Monthly Sponsor
Thanks, Mailchimp!
Link

A Big List of Typography Books

Article

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks.

Snippet

Fluid Typography

Getting right to the code, here’s a working implementation: html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw – 320px) / 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } It’s worth looking at our more recent post Simplified […]

Article

That Fluid Type Stuff Again

There have been a couple of articles lately regarding fluid type. Matt Smith (calling it “flexible type”): My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector Richard Rutter (calling it “Responsive Display Text”): In one fell swoop you can set […]

Article

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups. Then you may have tried explaining to me the pains of cross-browser compatibility and how different […]

Article

Design Your Content Typography First (and a Look at Type Nugget)

How often have you seen a “completed” site that still has lorem ipsum text lurking in the quiet corners? While we often strive for perfection in our designs and code, I am reminded every time I stumble across a garbled bit of lorem ipsum that not all aspects of web development process are given the […]

Article

Understanding Web Fonts and Getting the Most Out of Them

Using custom fonts is getting increasingly easier. We’ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.

Article

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts! The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so. Preload and font-display are landing in Safari and Firefox. Variable fonts are shipping everywhere. Using custom fonts in a performant way is becoming far easier. Let’s […]

Snippet

System Font Stack

Defaulting to the system font of a particular operating system can boost performance because the browser doesn’t have to download any font files, it’s using one it already had. That’s true of any “web safe” font, though. The beauty of “system” fonts is that it matches what the current OS uses, so it can be […]