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

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

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

`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

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