Ever thought about refreshing your website but don’t know where to start?
Usually people think about the style or look of a website – which is only a part of it. But for a quick refresh, have you ever considered the design of the text?
Sure, you have to figure out what your text is actually going to say and what images should accompany it to get the message across; but did you know that text design is a whole art form in itself? In this post, we’ll go over some tips and techniques of text design, also known as, typography!
Wikipedia says it best: “Typography is the art and technique of arranging type, type design and modifying type glyphs.”
Typography is a major player in design and some designers have dedicated their entire careers to studying, understanding and perfecting this centuries old, complex art.
If you pay attention, the art of typography is all around you – on your soda bottle, that magazine on your desk, your browser’s homepage and the billboard you pass everyday to work. If it’s text arranged in a particular way, that’s typography in action.
Why even care about typography? You’re not a designer, right?
It’s a little deeper than picking a whole bunch of fonts you like, throwing colors around and bolding the text; subtle details that you might not notice go a long way in expressing your message, invoking a mood or even getting a Call To Action clicked.
Do you think about alignment, emphasis or visual hierarchy? Do you pay attention to spacing, columns or the flow of the text? It’s these little details that give a website that extra “oomph” it needs for a quick, but noticeable, refresh and keep your visitors engaged.
We won’t go through the extremely technical things like the anatomy of typography (you can learn all about it here); but we’ll cover the areas that can be applied quickly and easily with tips on how to apply these techniques. We’ll also include some resources and tools to help you with your website refresh.
Ready, set, go!
Go Beyond Web Safe Fonts
Web safe fonts are fonts that are likely to render properly on everyone’s computer, browser and mobile device. Web safe fonts include:
- Comic Sans
- Courier New
- Times New Roman
- Honorable mentions: Helvetica, Trebuchet MS & Tahoma
While the worry of whether a visitor has these fonts or not is eliminated, you now only have a handful of fonts to use that will represent your website, your brand. That means so does everyone else too and this can make websites feel uneventful to a visitor without even realizing why. The only font in this list that doesn’t look like all the others is Comic Sans and EVERYONE knows Comic Sans is a no no.
Use Web Fonts instead!
With font libraries, like Google Fonts (free) and Typekit (paid), there are hundreds of typefaces – varying in style, size and weights – available to use without worry if the visitor already has the font downloaded on their computer. These libraries make it easy to embed the font within your website so it displays on anyone’s computer because whenever a visitor looks at a page with fonts from libraries like these, the font is coming from the library’s own server.
We recommend trying out Google Fonts before Typekit since Google Fonts is free, but if you’re looking for fonts with more “character”, Typekit is definitely worth the tiny investment.
If you have a very special font that you use for your brand, or you’d like to host your own web font with your website, you might be able to create your web font with services offered by Font Squirrel and Transfonter. These services are based on good faith that you have permission to use as a web font or that the font’s license allows it.
- Start using Google Fonts: A Beginner’s Guide To Using Google Fonts
- If you’re using a WordPress powered site and your theme doesn’t include Google Fonts, use the Easy Google Fonts plugin!
- Other Web Font Libraries:
When using Web Fonts, always stack other fonts in a font family – a list of fonts that a subscriber’s computer can use just in case your preferred font isn’t available.
In your inline CSS, you can specify a font family like this:
<span style="font-family: ‘Open Sans’, Arial, Tahoma, Verdana;"> The text here. </span>
If Google Fonts or Typekit is down (which is extremely rare) to display Open Sans, Arial is the backup. If Arial isn’t installed, Tahoma is its backup and so on. Here’s a guide that covers font families in a little more detail: Better CSS Font Stacks
So what if a visitor doesn’t have any of the fonts installed? Besides asking why a computer would have no fonts installed, in your inline CSS, you can add one of these to your font family:
<span style="font-family: Georgia, 'Times New Roman', 'Courier New', serif;"> The text here. </span>
<span style="font-family: Arial, Tahoma, Verdana, sans-serif;"> The text here. </span>
These two extras will display a generic version of a serif or sans-serif font as a last resort.
Serif or sans-serif? That brings us to the next part…
The Difference Between Serif & Sans-Serif
Okay, so I lied just a tiny bit about not talking about the anatomy of typography – but this little tip is a quick and easy piece to understand!
Look at these two letters:
Notice how the first one has extra pieces (called “feet”) hanging off either side of the top and another one at the bottom – the other doesn’t? Serif letters have feet, sans-serif letters don’t.
If you’re interested in learning more about different types of fonts (also called typefaces) – check out this article on Type Classification.
Combining Fonts & Emphasis
If there is one tip or trick that you absolutely must not forget or ignore from this post it’s: never use more than two fonts. This trick will help maintain balance and consistency throughout your text. More than two fonts will make your content look distracting and confusing.
To figure out which two fonts to use in the first place, look for “opposite” balance.
The more drastically different two fonts are from each other, the better the combination. Because the two fonts are so different, or opposite, they tend to balance each other out.
Since using only two fonts sounds kind of “blah”, in these examples, there are three kinds of emphasis: bold, italic and all caps.
If you’re going to use two serif or two sans-serif fonts together, be sure that there is something very distinguishable between them. Otherwise, the two fonts will look similar, but slightly off, giving your content an unprofessional, “not cared about” feel.
Let’s use Web Safe Fonts to make a point.
In the 1st example, Arial & Verdana are two sans-serif fonts but Verdana is bold to show distinction. The 3rd example, Times New Roman & Georgia are both serif fonts but Times New Roman is bold and in all caps, rather than just capitalized like Georgia.
The 2nd & 4th examples use a general font combination rule: 1 serif and 1 sans-serif. In the 2nd example, Georgia & Tahoma have similar natural weights, so Georgia has been emphasized with Italic while Courier New & Verdana in the 4th example already have very different natural weights.
If you’re ever unsure about which two fonts to use, follow the general rule: 1 Serif, 1 Sans-Serif – this creates the ultimate opposite balance.
Now that you have hundreds of fonts available to use, finding the right combinations are a little trickier. Use these tools to see example combinations and play with your own using the Google Fonts and Typekit libraries:
- Google Fonts – Font Pair
- Typekit – Typ.io
- The Ultimate Collection of Google Font Pairings
- Adobe Typekit Combos
A Little More On Emphasis
Let’s add a few more guys to team emphasis: size, color and combination.
In this example, we have a section of text that contains a header, a subheader and a paragraph of text. Even with a serif header and subheader, sans-serif body text, some bold and italics, the text still looks flat.
In the second round, size has been introduced to the mix. The larger sizes have been applied to the header and subheader and the paragraph of text is slightly smaller than the first example – I’ll explain why in a little bit.
This third example introduces color to the resized header and subheader (combination). Color is a great way to grab attention and designate sections.
Keep “emphasis” in the front of your mind as you evaluate your text. What’s important? What’s the main sentence in the paragraph? What would you want visitors to know even as they’re just initially scanning the page? What’s your CTA (Call to Action)? Is it clear and concise?
Don’t go emphasis crazy!
Once you apply them to the text, try to reduce the amount of emphasis while still pointing out the juicy stuff. Emphasis is easily lost when overused.
Want to learn more about emphasis? Check this out…
Since we’re visual creatures, Visual Hierarchy is important because it guides the visitor through your page using subtle, organized visual communication about how to “digest” or process your content.
Looking at the 1st example again:
Besides the text being bold, there’s really not much life to this content. It’s almost as if, while you’re reading it, you can hear the monotone voice of Ben Stein. Flat text like this will tire your the eyes and discourage reading.
Revisiting the 2nd example, the header and subheader have been resized larger because naturally, we pay attention to what’s bigger first. Most of the time, your visitors will just scan the content first.
The larger headers tell the reader, “this section starts a new topic, article, etc. and it’s called…”, the smaller and italicized subheader says “here’s a little more info about the article” and visitors will be able to know what the page is about in less than half the time it would take to read the entire thing.
If they find something interesting in the header and/or subheaders, they’ll likely read the copy – which is why the paragraph text has been slightly de-emphasized, by making the text a little smaller. It puts an even greater emphasis on the headers and subheaders and makes for easier, quicker scanning. However, don’t make your text too small – you know how you ignore most small print because you assume it’s too technical (or not important) to really read? Same principle applies here.
Color with Visual Hierarchy lets you add personality to the text and takes emphasis to the next level. The green header here stands out more than the black header in the previous example even though they’re the same font, weight and size. You can also de-emphasize with a color like the grey subheader in the 3rd example. The most fail-safe way to keep your content from looking like a rainbow exploded is to choose no more than three colors that compliment your brand, as well as each other.
So, what keeps Visual Hierarchy neat and organized? Consistency!
If you decide to make your headers bold and purple at 24px, subheaders grey and italicized at 14px, links a lighter shade of purple and underlined at 12px, and regular copy a very dark grey at 12px – you’ll need to keep it that way throughout your site. If you change one link to orange and bold on another page, your visitor may not think it’s a link and you’ll miss a click.
To keep your Visual Hierarchy settings in check, develop a style guide that you can reference at any time – it will make content preparation a lot easier and faster. Be sure to note specifics like the emphasis used and actual hex colors for each element.
Check out this article on Style Guides that includes more elements that you could be consistent with, like capitalization and punctuation.
Alignment & Measure
The things most people don’t pay attention to, like alignment and measure, is a way to make your content look more polished.
There are four ways to align content: left, right, center and justified.
Left alignment is what we see pretty much all of the time. It’s the default and preferred alignment because it’s the easiest to read.
Right alignment should be used for particular reasons and in small doses of text like headlines, a mini navigation menu, or a short quote.
Center alignment – the most unnecessarily overused alignment. Centered text should be treated like right alignments, only for small blocks of text. Centered text can work well for displaying product information in a side section or a multiple column section. Never center large and several paragraphs of text, especially over the full width span of your content area.
Justified alignment is a shout to print typography and is essentially combined left and right alignment of text. In big blocks of widely spanned text, it is often hard to read. When people are reading a magazine or a newspaper, they won’t think much of it, mainly because of the short width columns – so if you must use justified text, use it only in sections that contain columns.
Measure is the line length of your content. You’ll want to keep measure in mind because long lines of text make it harder for your visitor to keep their place. Remember, they like to scan so it’s actually faster to read content if they are reading lines 350 pixels long versus 600 pixels long.
To keep line lengths from getting out of control, here’s a few ways to make reading easier:
- Try inserting an image and either left align or right align the image to make it float within the content.
- Break up the content into smaller 2-3 sentence paragraphs when you can to break up the “bulkiness” of the content.
- Use columns and put those smaller paragraphs into two or three columns. Make sure the content length is balanced in each column.
Spacing of the lines, words and even letters can make or break your content. Take a look at these two examples:
The first example is the text at its default spacing. The second example shows how using a couple of CSS techniques can really make your content look neat and professional.
The line-height attribute lets you control the space between the lines of text. The right amount of space will make it easier to read and follow the content. To not overdo it, try this general rule: add 3 to the font size of the text to get the amount of line spacing. For instance, if the font size is 14px, start with: line-height: 17px; and adjust the line-height from there.
Letter-spacing is the space between the letters of the text. Don’t worry, you’ll use this for something easy: headers. It’s a little cosmetic trick that can create another way to add emphasis. Sometimes it can also be what’s needed to bring one word back up to the same line with the rest of the header.
This Is A Header Without Letter Spacing
This Is A Header With Letter Spacing
To bring your letters together, slip this into your CSS for your headers:
or to spread them apart, use:
Play with different numbers to see the crazy effects!
You can even adjust the spacing between words by using word-spacing: 30px;. Try different combinations of these spacing techniques to create unique and custom headers (be sure to jot it down in your style guide!).
Typography is an awesome art to learn and play with and what we we went over is just a little taste. Jump into a Typography and Web Typography Google search and have fun!
Photo by pilllpat (agence eureka)