The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
Honor text measure.
Text measure is your line length, or how long your text runs across the page before it breaks.
If you just said aloud “Well, that depends on my user’s screen size” then you’re almost certainly, almost definitely not honoring text measure. Also, you know I can’t hear you, right?
The ideal text measure is 50-75 characters. Whatever number you choose, you should keep it consistent(ish) across your site.
This is the most important and most overlooked aspect of typography on the internet. Nothing makes a page look lazier than big, fat, running-too-long paragraphs.
Too-long type is like when you realize you have to go to the store for butter and, suddenly: Dinner’s off. It instantly says to your reader “This is going to take a long time to read.”
That’s the worst thing to say to a reader on today’s internet. The stakes are clear: People will leave and never come back. They’ll never be able to vocalize why even if they answer the survey you emailed them.
But, now that you’ve read this book, you’ll know: It was the text measure. You sat down on the first date and said, “Here’s 120 characters” and it was just too much, too fast.
All of the other stuff matters too. But text measure matters the most. When people stress about fonts– that’s how much time and energy they should be putting into text measure.
The thing that matters the second most is contrast.
If this book were called “You suck at contrast” it could be twice as long as it currently is. There’s a lot to say about contrast ratio, accessibility, design sacrifices and well, just the whole topic of deciding how dark your pixels should be.
But the 95% rule here is that you should just use white or black text, whichever works better. This will get you to WCAG level II standards all of the time if you’re using #000 and #FFF, and most of the time if you’re using a near-white or near-black adjusted for your base color. The latter strategy can mitigate the design drawbacks of harsher text, if you use a white or black that fits with your color scheme.
The web standards for contrast are more forgiving for headlines. If you want to do colored text, that’s the place to do it. The effect is usually lost in body copy.
For things like fine print, consider just going smaller, instead of going lighter. People have gone to court over fine print on the internet. Make sure all of the text on your site is readable, even when you’re trying to de-emphasize it. Don’t do it for the lawyers; do it for the user.
Don’t make it too small of course. People have gone to court over that too. I’m not a lawyer (the smug attitude sometimes confuses people). This isn’t legal advice. But I will be there as the expert witness testifying against you, finally getting paid for my longwinded explanations of contrast ratio calculations.
Kerning is great but leave it to the visual designer. In CSS it’s called letter-spacing and it’s a fussy thing that looks different across browsers.
Web fonts are friction. Make sure they’re worth it. They don’t need to be decided upon or implemented early in development. Your user has a whole bunch of fonts that you should be trying to use with well-designed font stacks.
If you do load up a web font, stick to just one and trim down which versions of it you do use. Implement late; optimize early. Web fonts are some of the heaviest things on your page in terms of rendering. And they do it all at the most inconvenient time. So keep it lean.
Use the type composable to make an element the width of the project’s text measure. For some elements, like paragraphs, this is the default behavior.
Use padding to keep your text away from the edges of containers. Use tight with it to make the padding smaller.
In most cases, contrast is already handled for you. Text is always black or white, whichever works best for the background color. You can override it with the text-light and text-dark classes, for white and black text respectively. Text color can be changed with the text-color composable, combined with any color composable, but that’s all 5% stuff.
The Gumroad version contains a secret chapter that spills the dirt on CSS preprocessors, a tech CASS no longer uses.
