Make your site's typography make a statement.

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/100

^{Originally posted by **marybaum** April 7, 2023} 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?](https://wordpress.tv/2020/11/30/mary-baum-confessions-of-a-type-nut-quick-tricks-to-get-gorgeous-type-on-your-site-and-why-you-want-to/) Well, once a type nut, I say, always a type nut.

[marybaum]

Here's how we can break this down into posts:

1. The visual language of type: basic type terms, so we can start the discussion.
2. More type terms: the anatomy of a character. And what do we mean by a typeface's voice? What makes a face appropriate for automotive or fashion, tech or consumer packaged goods?
3. Making body type easy to read: a progression from naked HTML to nicely formed paragraphs and subheads
4. Picking type for a site, or a whole brand for that matter: a simple formula (battle-tested over 40 years of continuous use!) you can follow every time that will give you remarkably different looks that seem to arise organically from the nature of the site itself.
5. Where does type come from? There's a world of type beyond what's installed on your machine, and even beyond Google Fonts. There are sites full of supposedly free fonts that are full of student experiments and knockoffs of famous brands. There are big sites offering entire libraries of the foundries that built the type we see every day. And then there are the places I go, for bundles, subscriptions and deals.
6. Making type work in the block editor, no matter where it comes from. Yes—even Adobe type and that Mono type subscription for $10/month!

[marybaum]

Draft is here: https://docs.google.com/document/d/1WpVmVjaExxlf8hGt-x0xN_jsrbbG9141gP5qlM46AlE

I'm thinking about two things:

• Should the copy I wrote above, that starts this thing off, be the real first post?

-Or, should a condensed version of it be an intro to every post?

I also wonder if this post is a tad long, and should be maybe two posts ...

[bph]

@marybaum It's a great post, learn a lot! and I am looking forward to laying out all the things when it comes to publishing.

It feels more like a pre-beginners "Typography tutorial on terms and stuff" (you are the wordsmith here) . As that it's has a great length.

It's ok to have this as a first post. What I am missing is the overall picture, aka note on that this is the start of a series, and what other posts are planned. If you list them, we can make this a reusable block (aka synched pattern) and add it to the top and bottom of subsequent posts, with the links to the other parts.

Something like the "This is the start of a great adventure, and we are cruising the typography space, how it applies to modern WordPress development, we start with the basics as design language can be a bit confusing and new tools coming to WordPress."

What an advanced reader/designer might find missing is the accompanying theme.json vocabulary to all the typography terms and identify the onces that are not yet configurable, and need CSS love instead. You might want to mention that it will be part of Part 2 or 3 or so.

It's a bit unfortunate that the Fonts API won't make it into 6.3 yet, but that also gives us time to test things throroughly and start writing that piece when there is soemthing to write about. But it also could be listed in the parts that are planned.

Note: I didn't not do a 1st review on the copy, though. Maybe @abhansnuk or @justintadlock could assist there.

[justintadlock]

I've been away on vacation for a week and a half. Jumping in now...

[justintadlock]

I appreciate that you avoided the default Google Docs font size used and used something comfortable enough for reading. That made for a promising start to an article on typography. :)

I'm not much of a copyeditor, but I can usually find a problem or two. That wasn't the case here. Well done! I did note a couple of spots where the text didn't reflect what was in the image.

Also, TIL what a "superfamily" was.

The post isn't too long. I think I'd use the opener for this discussion as the intro in the post. Introduce this as a series.

Other than that, it looks good to move forward.

[marybaum]

Thanks very much for the review! I agree that it needs the intro, and I think I'll also add a list of the posts, maybe in a reusable block. I mean, synced pattern. 😜

[marybaum]

Okey dokey! Ready for second review, still in the Google doc.

https://docs.google.com/document/d/1WpVmVjaExxlf8hGt-x0xN_jsrbbG9141gP5qlM46AlE/edit

[justintadlock]

This looks good to go to me. I deleted an extra space in the doc, but that's it. I'll post in the Dev Blog Slack for someone else to "officially" sign off on this since I was technically involved in the first review.

[bph]

@marybaum are you ready to post it to the site? 2nd review is also a formatting review to see how it behaves on site... or maybe that's the 3rd review?

[marybaum]

I am! I did want to see how adding the intro felt to me in pure content terms. But it can go on the p2 now!

[bph]

Oh, the added insight into what the series is about reads very well now, and ties it nicely together..

[marybaum]

Public preview: https://developer.wordpress.org/news/?p=1656&preview=1&_ppp=52e53f70fa

[justintadlock]

I switched the post to the Centered Column template.

Did you add a new Visual Design category? That should probably be a tag. I don't know if we have anything official on it yet, but I think we want to keep the categories pretty limited (they're used in the nav bar). It probably wouldn't hurt to have a more all-encompassing "Design" category, though.

Otherwise, it looks good to go.

[bph]

Totally concur with @justintadlock 🚢

You should be ok re: Publishing , here is to double-check:

Pre-publishing checklist:

• [x] Post Title in Sentence case
• [x] Are Category or Categories selected?
• [ ] Are Tags identifies?
• [x] Is there an explicit Excerpt?
• [x] Do all images have an alt-text?
• [x] Props added? 🙌 Publish! 📗

Post-publishing checklist

• [x] add Props for reviews to #props channel in WP Slack
• [x] close the issue with a comment to link to the published post
• [ ] close the accompanying discussion with the link to the published post.

[marybaum]

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