The Vocabulary of Visual Emphasis

2022-03-23

Something I learned from the fanastic free screencasts from Refactoring UI is the vocabulary of visual emphasis. For example, a piece of text might be emphasized with:

• color
• size
• weight
• background color

So far so obvious. But what's interesting is that we can trade off on these. If we increase the base font size for a web page, we can offset large headings by making them lighter in color or font weight. And there's something so powerful about explicitly naming and considering what knobs we can tweak here.

What's fascinating about the series is that you can see a designer constantly revisit a fundamental question: what is important here? And if we ask that question repeatedly and learn the basic vocabulary of emphasis and priority, we can make a page much easier to read and follow.

On this basis, here are som concrete changes I made to this blog:

• slightly increased the text line height for readability
• reduced the text size of the nav and de-emphasized it with a gray background
• moved dates to the right and lightened them, since the post title is more important than the date.
• added a nicer :visited color for visual identity

I'd also like to style the mailing list sign-up form, but it pulls from a third-party website and seems like it would be a big pain.