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.

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

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