Our Guide To

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.

A Big List of Typography Books

For your holiday gift shopping needs! These my picks for some of the most popular books out there on typography, with a tilt toward web typography. Plus a couple of bonus picks by our own Robin Rendle. Related Posts …powered by Jetpack! The Jetpack WordPress plugin runs on this site, powering not just the related […]

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; } } That would scale font-size from a minimum of 16px […]

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 […]

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 […]

`font-size` With All Viewport Units

We’ve covered fluid type a number of times. This page probably covers it in the best detail. It’s a little more complicated than simply using a vw unit to set the font-size since that’s far too dramatic. Ideally, the font-size is literally fluid between minimum and maximum values. Related Posts …powered by Jetpack! The Jetpack […]

V6: Typography and Proportions

Here’s a good ol’ fashion blog post by Rob Weychert where he looks into the new design system that he implemented on his personal website and specifically the typographic system that ties everything together: According to the OED, a scale is “a graduated range of values forming a standard system for measuring or grading something.” […]

A Five Minutes Guide to Better Typography

Pierrick Calvez with, just maybe, a bunch of typographic advice that you’ve heard before. But this is presented very lovingly and humorously. Repeating the basics with typography feels important in the same way repeating the basics of performance does. Gzip your stuff. Make your line length readable. Set far expires headers. Make sure you have […]

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 […]

The Math of CSS locks

Florens Verschelde digs into the numbers behind the concept Tim Brown was talking about the other day. When I tried wrapping my head around Tim’s implementation, and creating variants of it, I had a hard time figuring out what was going on exactly. I did a lot of back-of-the-envelope calculations, and I thought it would […]

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag