Make your site's typography make a statement.

[marybaum]

In fashion, designers talk about statement jewelry — a necklace, for example, that takes a simple sheath dress and ramps up the visual impact by a factor of ten or two hundred. In kitchen design, my mother used to use a range hood over an island as the statement piece. In both cases, the statement is the outstanding, showy element of an overall design that draws the eye and brings all the other elements together.

We see it on the web, too. Closest to home, the current design of wordpress.org uses an oldstyle version of Garamond in a light weight, but huge, for headings. That's a statement, for sure. And a quick look through the design blogs will show lots more examples of statement type.

All well and good, you might be saying. But how do you achieve it, and why would you want to? Especially, you might be thinking, when most of the sites you build are in industries that don't put aesthetics first, and when you don't have a big budget for design. How about when you can only use certain type families, because the client has brand standards?

And how in Heather Hill do you achieve sophisticated type effects in a block theme? Can you use hosted web fonts besides Google? Do you have to upload font files to the server in your theme? How do you know what custom CSS is going to play nicely with theme.json and its style variations?

Well, fear not.

In this piece — or a series — we'll cover some basics of pairing typefaces. You'll discover a formula for getting started that starts out the same way every time — but ends up with WILDLY different-looking type out in the wild. And we'll sort those CSS-plus-JSON issues so everything winds up singing the same songs from the same songbook.

And if some of the themes in this piece look like they might have come from this talk? Well, once a type nut, I say, always a type nut.

[justintadlock]

I ❤️ this idea, especially as a series. I'm already excited to read it based on your description.

[bph]

Created an issue to move this forward. Please continue to discuss there.

• Make your site's typography make a statement. #115

This discussion is locked.

[marybaum]

Published first post at https://developer.wordpress.org/news/2023/07/make-your-sites-typography-make-a-statement/