Typography

A rather exceptional CSS trick discovered by Roman Komarov that uses scroll driven animations to resize lines of text to fit exactly to their container.

TODS: “an open source typography and opentype default stylesheet” from Richard Rutter. I like the idea of slightly-opinionated stylesheets that do a bunch of things you might forget to do, or just as likely, don’t know you can do to begin with. There are loads of goodies in here including a slew of utility classes for […]

Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.

Syntax highlighting code on the web happens like coloring any other text on the web happens. You wrap the bits of text you want colored uniquely in some element, probably a meaningless <span>, then select that in CSS and apply a color. Ideally, the span-wrapping happens server-side so client-side JavaScript isn’t tied up doing something […]

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned […]

Figma has support for variables, and they work with the various typography features you may want to set. For instance, you could create a variable called “Header Font” with a value of “Ideal Sans” and use it in many places.

This article explores creating a typographic effect that “reveals” text in an interesting animated way.

Zooming in browsers is an accessibility feature. I’d say that any attempt to fight against it is bad form. Don’t do it. Leave it be. I have seen compelling examples of ways to code that work with browser zoom that help make a site look nicer when high levels of zoom are applied. But they […]

Just to cut to the chase, the superpower is being able to adjust their weight (or at least one of their attributes, or as variable fonts call them, an “axis”) without changing the space they occupy. This means that interactive effect and animations can be done without worry for awkward reflow situations and performance problems. […]

Nikita Prokopov with a pretty humorous article about centering things in web design. This is my claim: we, as a civilization, forgot how to center things. Centering things is almost trivial in CSS at this point. There are different approaches, because there are different situations. The knowledge to do so is pretty easy to find. […]