Typography is king (in web design)

Your words are everything. Not layouts, not colors.

Typography is the box AND the contents. It sets the rhythm of your content. The pace of engagement on your site.

Do you want your site to amazingly beautiful AND useful AND high-conversion? Then focus on your typography!

You can stop reading now and just get to work if you believe me…or keep reading if you need more explanations why.

Do you want to know how I can tell right away….if a website was done professionally by a high-end agency VS by an amateur (using templates)?

• I simply look at their typography. The sizing and spacing is all I need to know whether it was a $25k job vs a $5k job.
• Pro websites have such beautiful harmonious sizing and spacing that feels good no matter what you’re looking at, no matter what screen size you’re on. It emphasizes the important things, while fading out less important things gracefully.
• Amateur sites are best, “non-distracting”…and at their worst, convoluted and without rhythm. They always feel like they were meant for different content or more words or fewer words.

Your typography is more than just text.

• It is the shape of your content.
• The navigation of your content.
• It is also your content.
• It tells users where the content begins and ends.
• It tells users how which content is different from another.
• It tells users which content is similar to another.
• It tells users which content is most important.
• It tells users WHAT TO DO.
• Without words, websites become just random boxes of space and visual objects without any context or explanation. Just bits of unidentified content floating loosely in space without any arrangement.

Do you want an all-powerful divine website? If so, then you must empower your typography.

Pick 1 or 2 fonts, (3 is over-doing it unless you really really know what you’re doing.)

• One font serves as the body font. It tells people what you want to tell them.
• The other font serves as the title font. It tells people where to look, where to begin.
• You can vary your body font to use two different weights. Usually “normal” for regular text and “bold” for emphasized text.
• You can vary your title font via styling. Usually really large to signify the most important areas, and slightly smaller to signify subtitles. The subtitle version can vary from the bigger title version, usually in the form of ALL CAPS and/or with extra letter-spacing or even tighter letter-spacing. Or yes, you could use different font-weight as well…either thicker or thinner. You could also use an accent color for your title or subtitle font, but be careful to keep it clean!
• I won’t explain the personality of different fonts here, it’s too much work. But you can find great examples on Typewolf.com.

Explain your site hierarchy through font sizing and emphasis.

• Think of different organizations. Is it one all-mighty boss with many peons? Or is it only a small group of special employees and one slightly-elevated manager?
• Your font size must explain your content organization in a similar manner. Quite simply, you must decide how much bigger your section titles should be from the regular content text size within it. Think, dammit! THINK! Don’t just go with what looks good… go with what makes sense.
• A giant-sized headline with really small text says the headline is that much more important. A medium-sized headline with only slightly smaller text says the headline is practically just a lead-in into the text.
• How long are the headlines? 1 to 3 words? Or like half a sentence?

Explain your content relation through spacing and layout.

• How close are the titles to the content text? Single topic pages typically have them close together since the title is directly tied to the text below. But sometimes they’re farther away and it doesn’t matter because the title was only a categorial placeholder for a section.
• What shape is the content? Wider boxes say “don’t look at anything else, only look at me!” Narrower boxes placed side-by-side might say “we’re all equally important or equally unimportant, skim through us as you like”.
• Do you have multiple bits of different content on the same page? If so, how far away are they from each other? Group them tightly together and it says, “we different sections of the same thing”. Space them a little farther but on the same line and it says, “we different things but equally important and loosely related”. Space them really far and it says “each piece is an entirely different world”.

Coloring your typography carefully.

• In general, colored text should feel neutral. And what makes the color feel “neutral” is that it blends into the rest of your website colors so seamlessly that you almost don’t even notice the color. The color is there to help the eyes find contrast or find interest.
• However, the worst use of colored text IMO is when you use it only for the sake of having that color. Text should NEVER be used to highlight a color. If anything, it should be the color that is used to bring out the text!
• Again, keep colored text as neutral as possible. Text is like the “rice” of your page. It needs to be kind of bland to help everything else pop.

How do you know when you’ve mastered typography?

• When the text and the space around it are in complete harmony with each other. Where the text makes the space feel beautify and peaceful. And the spacing elegantly lifts the text into view without obnoxiously shoving it into your face.
• What you don’t want is text that wants more space. Or space that seems empty without text (to explain the important of that space).
• Beautiful typography makes your website sing!

What does your site typography say about you?

Here’s what I feel what my typography says about me:

• It says that I have a loose bunch of information crammed into a small space with small time limits.
• That I’m passionate about what I do but don’t care to spoon feed everyone.
• That I don’t care if my site is pretty or popular.
• That my content is only meant to be found and digested quickly. It is not a fun novel to read but more like a reference guide. (Somewhat like a dictionary.)

What does your site typography say about you?

• That every page is loved?
• That you’re important?
• That you’re trustworthy?
• That you’re really dramatic?
• That your site is fun?
• That your work is premium?
• That your work involves many people?

I’ll let you decide.