Typography

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

Looks like Mandy Michael has been busy lately! I’m just seeing her fairly new Text Effects site, which has a growing collection of cool looks for text with demos and tutorials (GOLD!). Then I noticed her Variable Fonts site has kind of joined the fray with a similar design and a third site, Text Lab as […]

Just a little appreciation for Dan Klammer’s Modern Font Stacks project. Not loading any custom fonts doesn’t need to mean being relegated to the Helvetica/Arial hole, system fonts (even though I do kinda love San Francisco), or some bummer typeface you feel pushed into. I particularly like the Geometric Humanist stack:

Stephanie Stimac: Use text-wrap: balance; on headings and subheadings. And use text-wrap: pretty; on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement. The performance impact is generally negligible but there in extreme conditions.