Ever have a project come along and create a “lightbulb moment” in your head? I had one of those brain-fog-clearing moments this last week on a project I was invited into. A client who had hired me for a shred came back later and asked me to take a look at their typography to see if I could make some adjustments to make it more user-friendly, both for readers and for them as site owners.
What I found when I looked underneath the hood was a valiant first attempt at coming up with a system of managing their typography. They had made each of the standard headings a different size, color, and font so they could pick a heading and be done with it (I'll explain what these "headings" are more in just a sec). Unfortunately, it left a lot of instances where they had to modify those headers with the WordPress post editor — adding colors here, changing sizes there — which ended up making their site inconsistent from page to page. Worse, it was hard to remember what styles were used where, so going forward would bound to be even more tricky.
Not a fun downward spiral.
A quick primer on web typography
I'm going to give you the "nutshell" version here so we're on the same page. Don't worry, I am going to spare you all the technical stuff you don't need to know, and just give you the simple basics. (You can thank me later… I accept chocolate.)
When Google looks at your website, it doesn't care (or cares very little) about what your site looks like when it tries to evaluate what's important. It simply looks at the HTML tags you are using and ranks the content within them based on that hierarchy. (That's a really loose and fast statement, but it'll do for now.)
What that means: Headings on a website use a simple number system: H1, H2, H3, etc. down to H6. The lower the number, the more important Google ranks it.
Okay, egghead, slow down! What are headings?
When you look at this post, what do you see? There's a title up top, a whole bunch of paragraphs, and then in between the paragraphs, you'll seeing little "subheadings" – those are headings. (No need to use the "sub" part. Just headings.)
The most important of those headings is your title. It tells Google (and humans) what the post/page is about.
From there, the other headings give more direction as what's in the paragraphs. And then, there's the paragraph text itself.
Google pays attention to headings because it knows people will use metaphors and descriptive examples in their body text, so it's going to be harder to rely on… but most of the time, the headings are pretty big clues as to what's going on. Signposts, if you will.
But how does Google know what's what, if it's not looking at the pretty colors and sizes?
Google only looks at code, not typography style. What's important is the hierarchy of the headers you use.
How do I know which ones to use?
Google doesn't like it if you use more than one H1 on a page. H1 tells Google, "Hey Googly, this is the most important thing here." That's why it's used for your title (and why it's a good idea to craft strong titles… but that's a post for another day).
Your best bet is to stick to H2, H3, and H4, and that's it. Otherwise, you will make paragraphs, and use block quotes and lists. And that's about it.
But how do I turn text into a heading?
To make headings, you'll want to code them in directly, or use the drop-down selectors in the editor to turn text into headings. If you just make your headings out of regular paragraphs but make them bold (don't say you don't – I see this every day!), that's not giving your readers—or Google—much to go on.
Where the nuance comes in
You could create your content using just the three H-tags I've described, along with paragraph text, and you would be set. But, we are rarely that content, are we?
In most of the designs I have built, there is a serifed font and a sans serif font, multiple colors, and sometimes different font weights as well. So, what happens is that people decide that instead of a typical H3 to introduce a new service, they want to make that H3 a different color than the other H3's. And then over here, they want to use a different font… and over there, something a little bigger or smaller than over here, etc.
And hey – customizing your site is not a bad thing. Where the train goes off the tracks is when there's no typography system in place to handle these kinds of changes.
What (unfortunately) most people do then is they go into the WordPress editor, select the text they want to change, and then use the little fiddly bits in the toolbar to make it the color and font they want.
Is that so wrong?
Hell yes, it is.
The problem there is twofold:
- they may get the color wrong from one page to the next, which makes their site ugly and inconsistent, not to mention confusing…
- and worse, now there is code written into their content which controls things like color, font, weight, etc. These are called "inline styles", and they are little demons that will wreck the look of your site over time.
What's wrong with inline styles?
There are two things horribly wrong with inline styles. First, the chances of introducing inconsistencies into your site increases over time. The more inconsistencies you have in your website, the more likely it is that you will appear unprofessional. And that is no good.
But even if you can dismiss the potential unprofessionalism, there's a worse problem at hand.
Change.
What happens if you want to change fonts, colors – or even your entire theme – in the future? It happens all the time. Heck, I would say it is inevitable.
Are you going to remember where you manually selected individual colors and font families in old blog posts stretching back years? Do you really want to pour through all of your pages and change all those by hand? Of course not. And, as a designer, it's the last thing I want to do either.
Classes to the rescue!
Instead of allowing these types of inconsistencies to creep into your website, you can use specific CSS classes to future proof your content. Here's how:
Let's say you're using two fonts on your website. One is a sans serif, and the other is a serif. If we create a CSS class for you called "serif" and another called "sans", then whenever you want to use the other font from what is normally specified, you simply add that class to that heading (or paragraph, or whatever), and voilà – it changes instantly.
This way, when you want to change fonts on your entire site in the future, or you change your design entirely, all you have to do is change which font the "sans" and "serif" specify, and Boom! Every instance is changed everywhere in your website, instantaneously. No pouring through old content, no leftover inconsistencies.
WYSIWYG "website builders" are NOT the answer, just a different problem
Some people read this kind of post and their eyes glaze over. "I just want to use a WYSIWYG website builder (WYSIWYG = What You See Is What You Get) so I don't have to mess around with css. If I want something in Comic Sans, I just go in and make it Comic Sans. Done."
Yeah, well… some people think letting their friends give them a tattoo is a good idea, too.
Control is important, yes. This entire article is about giving you more control over your website’s typography. But — and it's a big, hefty but — not at the expense of making your life easy.
I don't know if you've ever had a chance to use one of those kinds of interfaces before, but what seems like a huge convenience at the outset often turns into a royal pain in the derriere, because in order to change the way something looks on your site, you have to change every single instance of every single item you want to customize every single time. Talk about a breeding ground for inconsistency.
Case in point: I was recently doing edits on a website (that I did not build, just to be clear) and the theme uses one of those WYSIWYG interfaces. The owner asked me to change the styling of a couple sections on their homepage.
No problem, right?
Ehh…
If it was a typical theme that used typical CSS, I could've been in and done in less than fifteen minutes – more like five. But because they used a WYSIWYG website builder, where every change had to be done manually in multiple places, saved, previewed, tweaked and adjusted, etc., what should've been five minutes worth of customization took almost an hour.
Yeah. An hour. I wanted to cry. For both of us.
Look, I'm a big believer in giving my clients control over their websites. And, I'm also a big believer in efficiency and making your life easy. I know "website builders" seem appealing – to have the freedom to choose from every possible font combination and every possible color, every possible border, etc. at any given time sounds like a good idea. But when you look at it in terms of ease of use and consistency, I think website builders are an absolute menace, and should be avoided at all costs.*
* Quick clarification: when it comes to page layouts and the like, I will admit I do like plugins like Beaver Builder for ease of use. But for typography changes, I still think it’s best to keep it in the stylesheets. And if you want to use a page-building plugin, a) Beaver Builder is the best I’ve seen so far, and b) there are ways to accommodate its use in very positive ways. More on this in a later post.
Back to our original client…
When I logged into their site and found the range of styles they had tried to produce, I realized that what they needed wasn't a bajillion different header styles. What they needed was:
- a type scale that gave them the visual variety of size they were looking for
- the ability to easily change the font family and color on the fly (without messing with inline styles)
- and, have it be a simple, easy to understand system that they wouldn't struggle against, while providing the kind of consistency and future proofing that would make them happy for years to come.
By creating designated CSS classes for all the variations necessary, they can mix and match whenever they feel the need to break from the standard, and insure themselves against future headaches.
Type scale?
In case you haven't been able to tell by now by my designs and the way I talk about typography, I absolutely love it. I think well-designed type is some of the sexiest stuff around, right up there with a good espresso and well tempered chocolate.
Good thing for all of us, there are folks out there who feel the same way.
A few months ago, I came across a website called Type Scale, created by Jeremy Church, which does an amazing job of calculating all the sizes and CSS declarations you need to control the fonts on your website in a variety of scales, from "minor second" to "perfect fourth" to "golden ratio," along with Google font previews and the whole 9 yards. It's amazing, and I bookmarked it immediately.
When this project came around, I knew Type Scale would give us what we needed – a properly balanced set of sizes to set their headings to that would make their site look sharp and clean.
We went back and forth a bit, eventually settling on the "Major Third" scale, and voilà – the sizing issue was done.
From there, we used their logo colors to create classes for the colors they'd need (dark, light, and accent), and a "sans/serif" set like I mentioned above to cover their two font families.
With those variations in hand, they can now harness all the potential of a balanced, orderly typography system to highlight their words and offerings in whatever way they want, quickly and easily, along with the confidence in knowing they really can't screw anything up.
What's that saying about "The Cobbler's Child"?
I realized once I was done with the edits on this client's site that the typography system I was looking for for many years had just all come together. I also realized that my own site needed this same help.
Here's a screenshot of what my Sites page looked like before I instituted this new system:
The mishmash invaded my site, and I shudder to admit it. But hey – always forward!
I went into an unpublished page and created a sampler of some custom lorem ipsum text in all the various typographical headings and variations I would need. With my old styles, here's what it looked like:
I went to type-scale.com, played around with the options a little bit, instituted the new styles into my stylesheet, and came up with this:
Success! I cleaned up my stylesheets and refreshed the Sites page and saw this:
I decided to adjust one heading and add a little bit of extra code to skew that one section to look like the rest of the page, and here is the final version… ta da!
A typography system for the future
I'm chuffed, honestly. I'm going to use this new system on every site I do from now on. And if this looks like something that you are interested in implementing into your own site, feel free to drop me a line.
Leave a Reply