How To Use Typography Effectively in Web Design

Sep/10

How To Use Typography Effectively in Web Design

By Robert Bowen

Typography is everywhere across the Web, so many different applications and missions all relying on their chosen fonts to cleanly and legibly convey the bulk of our web-based projects over to our readers. However, from time to time, we notice a wrench thrown into the works, gumming things up and interfering with our message transfers. This is something that as designers and developers for the web, that we have undoubtedly experienced, and something that today, we are here with some tips to hopefully prevent from happening again.

If you are unprepared for all of the interactions, you never know when the wrench will end up in your way. Image credit

One thing that we can often overlook, or let slip our tired minds as we work ourselves late into night or early into the morning, is that the typography that we use in our web projects has to interact with and is impacted by nearly every other element that we add in. The typography weaves its way throughout the projects, and sometimes we let these elemental interactions proceed without being subjected to a full battery of tests to make sure that each engagement ends properly without breaking our project in any way. Not just that, but beyond all of its so-called interactions, there are all of the basics that you have to keep in mind as well.

Below is somewhat of a breakdown of the various areas that impact the typographical elements in our design/development creations and what to look out for as we set in to implement our typography for the web. Welcome to Minding Your P’s & Q’s: Implementing Typography in Web Design! For years that old familiar phrase has been bandied around, telling us to be on our toes with our writing, and we are taking the advice into the web and up to the next level. Take a look through this checklist of sorts for a refresher on what to keep in mind when you are handling your typography.

Check out some of our previous articles.

50 Useful Design Tools For Beautiful Web Typography is a past from the Smashing archives that compiles dozens of resources to help with your web typography.
50 Helpful Typography Tools And Resources is another post from Smashing’s past that pools together even more tools to make more out of your typographical design inclusions.

First a Look at the Basics

Now the basics of typographical usage seemed like a natural place to start, so here we are. This section will talk a bit about web-safe fonts, spacing, alignment, and so forth. Making sure that we have a firm enough grasp on the foundation, before we go into an examination of all those elements that are built on top of it. Even if you are a seasoned pro when it comes to all things type, you may still want to scan through this section for somewhat of a refresher.

Is it Safe?

When it comes to implementing typography on the internet, the first step before you go any further is making sure that the font is actually safe for web use. This is not a matter of whether or not the font needs some sort of protection while surfing online, but a matter of whether or not it will show up.

There are so many fonts that you may have in your arsenal that you want to use in your online design projects, however, if the viewer doesn’t have them on their system then the font will not show up. Therefore, most designers just opt to use the web safe fonts that they know will show up as they have placed and intended.

If we aren’t playing it safe, then our design could have a few things missing. Image credit

Font Stacks

Since web safe fonts can vary depending on the operating system you are using, some designers turn to font stacks to help give them a little bit more flexibility in their design. Font stacks allow you to set a number of different fonts in a hierarchy of preference to fall back on in case the viewers system does not have the specified font.

Most stacks commonly contain four fonts, again arranged by preference, with your top choice listed first, followed by an alternative, then a more common font, and then finally a generic font type that is guaranteed to be on any machine. For example: “Helvetica Neue”, Helvetica, Arial, sans-serif

@font-face & Typekit

Given the lack of available web safe fonts, only being found by the handfuls, alternatives have been developed to add more variety to web typography without resorting to the non-SEO friendly, less than savvy image replacement option. Enter @font-face and Typekit. @font-face allows you to host a font yourself and have the design just call it up as you would any other web safe font.

Using this option is particularly simple, however, there are considerations to be made in pursuing this option. One of the most important of which is to be sure that the font you are using is licensed specifically for @font-face use. Just because a font is free for use does not necessarily mean it is also available to host publicly like you would need to in order to be used through @font-face.

If easy is the recipe that you like when taking on typographical additions to your web design project, and you are willing to pay the price that often accompanies convenience then Typekit maybe more your speed. Typekit is a premium service that essentially handles all of the specifics of web typography licensing for you. And when it comes to all the loose ends and details that need your attention in your project, anything that can remove most of the guesswork from the implementation of any element is worth pursuing.

Google Font API is another service that hosts the fonts and makes sure all of the fonts are correctly licensed, and one that is free of charge. Which can also prove helpful, especially when working on a budget. The difference between the two services is that Typekit licenses premium fonts where Google only seeks out free fonts.

Adventures in Space

We want our designs to feel open and roomy. Image credit

Another basic that you need to pay attention to when you are implementing typography in your web design work is the issue of spacing. Every bit of usable online real estate matters to most of our clients, and they may become insistent on a maximum use of said space. As the designer, however, you have to be aware of which space cannot ever be compromised, and the spacing involved in your typographical elements certainly falls under this umbrella. And there are a few different areas that this applies to specifically.

Letter & Word Spacing

First we are going to discuss the more obvious typography related spacing areas, the letter and word widths. The white space in and around your type plays a huge role in the readability of your web design project, especially if it contains large chunks of body text for the user to read.

Being mindful of your letter-spacing and word-spacing is vital in maintaining the legibility necessary to keep your design readable and relevant, rather than having it drive people away. Depending on the fonts you use, you may need to make some adjustments to ensure the flow and accessibility of your work. Now the letter and word width is a bit more abstract than the line-height and will take some experimentation and time to get just right.

Line-Height

Another issue of spacing that impacts the readability of the type you have included in your design is the line-height. This is concerning the spacing between the lines of text that are stacked on top of one another. If you are going to include typography then you might as well take the time to be sure that it is effective in each of its applications.

And as far as spacing adjustments go, the line-height is probably the easiest to tweak. So take the time to adjust this aspect of type, and show pride in your work by looking after these minor details. If nothing else, your type could almost certainly use an increase in line-height to about 140% for optimum readability.

Alignment Check

Now another basic typographical area to bare in mind as you work it into your web based project is the alignment check. Mind your rag! The rag is the way the end of the paragraphs of text line-up or more often than not, don’t line-up. This is an easy check and adjustment often times, but it is the easy minor things that we tend to overlook. And the alignment falls victim to this designer oversight more than you would think.

Owing to the fact that line breaks can differ when viewed from one browser to another, it is sometimes a good idea to make manual line or word breaks to keep the rag clean and neat. You never want an overly exaggerated jagged edge to break the comfort and feel of your text boxes, so keep the alignment check somewhere on your type checklist.

Keep ahead of the design pitfalls by keeping a mental or physical checklist. Alignment, check! Image credit

In the Mix

Something else that you must consider when applying typography to your design, that would also fall under the basics would be the mixing of different fonts within your project. Like mixing a drink, there is a balance to maintain so that the different elements blend well and do not overpower and detract from the overall flavor of the project.

To keep things in check it is a good idea to try and limit yourself to no more than 2 different fonts per web site design. For variance in the face of such limitations, go with some combination of a serif header with a sans body typeface, or vice versa. Furthermore, using a combo of upper and lowercase sans-serifs while mixing in a bit of a script can also offer some nice variety for your design.

Typographical Hierarchy

Moving on to another important aspect of typography implementation on the web to look after, is setting the hierarchy for your project. Through Flash or Javascript it would be possible to help guide the reader through the design, but in the absence of that you can always opt for the traditional route and establish this hierarchy through the typography in your project.

The type should effectively take the reader by the hand and lead them through the site. The most common way to achieve this is by consistently using size and boldness to highlight and steer the users attention where it needs to go. Other ways include using all caps or italics and mixing font types to draw the readers eyes through the project. Not to mention the use of h1 to h6 tags (which are how bots read the site hierarchy), if they are styled correctly, can be used to create the page’s visual hierarchy as well. Or to at least assist the visual walk-through.

Am I Looking At a Link?

Finally, the last basic area of typographical implementation that we are going to look at today, concerns the hyperlinked content in your web design project and the expectations attached to them. Links are old hat by now, which is why users have the expectations that they do about them. After years online, linked content is now assumed that it will stand out from the rest of the typed information that it is often buried within.

Usually this is done simply by underlining the link and altering the color from the rest of the text. In fact, you should differentiate between link types, i.e. unvisited, visited, and active, assigning each one of them their own color. To help cut down on confusion for your users, do not underline anything that is not a link. Highlight if you must with either the ‘strong’ or ‘em’ coding.

You want to help the users by clearly marking the way forward. Keeping the path clear. Image credit

Typographical CSS Terminology

Before we venture beyond the basics, we wanted to include a quick reference dictionary of code terminology related to fonts and typography implementation for the web. Take a quick glance through this brief glossary to ensure that you have a firm enough grip on the basic terms concerning this ever present design element. Then we will move on to the interactive side of things.

color – sets the color of the text – values include any hex code or rgb combo
line-height – sets the distance between lines – values include normal, the numerical length and the percentage
letter-spacing – increases or decreases the space between individual characters – values include normal and the numerical length
text-align – sets the alignment of the text – values include left, center, right and justify
text-decoration – sets the decoration effect of the text – values include none, underline, overline, line-through and blink
text-indent – indents the first line of text in an element – values include numerical length and the percentage
text-transform – controls the letters in an element – values include none, capitalize, uppercase, and lowercase
vertical-align – sets the vertical alignment of an element – values include baseline, sub, super, top, text-top, middle, bottom, text-bottom, the numerical length and the percentage
word-spacing – increases or decreases the space between words – values include normal and the numerical length
font-family – specifies the font family for text – this is where you will palce your font stacks
font-size – specifies the font size for text – values include xx-small through xx-large, smaller, larger, the numerical length and the percentage
font-style – specifies the font style for text – values include normal, italic and oblique
font-variant – specifies whether text should be displayed in a small-caps font – values include normal and small-caps
font-weight – specifies the weight of the font – values include normal, bold, bolder, lighter and values from 100-900

Interactive Typography

Now comes the section of the post where we discuss the other elements that are going to impact and interact with your type when on the web. From padding to margins, navigation elements, and more, we are going to look at how to make sure your typographical elements play nicely with the rest of the web crew. By design, web projects are inherently interactive, and if you design without considering the many ways and the various elements that will engage your typography then you risk compromising its effectiveness.

I’m in a Box!

First up, when you consider the typography that is employed in your project, you have to remember that it sits in a box. Not metaphorically, like an actual box. The box model contains every element of a website, so it makes sense that this also plays a pretty large role in the way your typography looks. You never want your typography to feel confined and squeezed in, leaving the user with an uncomfortable sense of space whenever they visit.

So leave enough room for your typography to breath, so to speak. Given that the default setting for your margins, padding and borders with the box model is set to zero, you may need to adjust them accordingly to offer your type a little bit of wiggle room.

Once again, you want some room for your elements to breath. Give them the proverbial wiggle room. Image credit

Flight Risk of the Navigator

As far as type interactions go, navigation is one element that is heavily type reliant, and given its importance, we had to mention it in this section of the post. In most web design projects, there is going to be some depth to the design that is accessed via your navigation elements. You want to be sure that you select the right font for this task, and you want to highlight it in some way that is specific for your navigation.

Earlier we mentioned how to handle your hyperlinks, which could be the simple approach you take to your navigation as well. However, most designers opt for a more elaborate solution, which is when you need to take special care. Where you might be using scripted fonts elsewhere with success on your project, the navigation should always be clear and highly legible.

Conflicts of Contrast

Another interactive set of elements that effects the typography in your web design, would stem around issues of contrast. There are design additions that sometimes end up behind your type, interfering with the readability of your font. So we have to be aware of these interactions, and watch out for things like background colors, patterns, images, anything that might be placed behind the typed elements of the design.

This is where a second set of eyes could come in handy, when adding in these additional elements. This way you get multiple perspectives on anything that goes behind the type. If they could be visually disruptive in any way to the legibility and comfort of reading your type you have to ask yourself if they are truly necessary. What is the point of having them there? If they are a must, then find a way to adjust the contrast and bring the type out more.

If it Must Pop, Do it Right!

One less than favorably looked on interactive element that more interferes with your typography on a web based project, than it does interact with it, are the presence of pop-ups. This is still a inescapable reality if you spend a moderate amount of time on the web, where you have pop-up elements that show up unannounced, usually projecting themselves over the top of the main body text or at least the main points of interest in the design.

If you find yourself having to use a pop-up element of some sort, at least be mindful of the main body text and navigation. The readers eyes will notice the movement from our peripherals if the pop-up was offset to the side, and if we are interested we will check it out. But encroaching on the main body text, essentially interrupting the users, can often lead to lost visitors.

Keep your eye on the typographical interactions in your web design, or you may be watching your intended audience walk away. Image credit

Typography Tools

Below are a handful of tools and various resources for making your life as a designer easier when it comes to implementing typography into your work. If this is an area of interest, or simply an area you are being forced to work in, the selections we have gathered here will help you get a little bit ahead of the game.

Typester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.
HTML Ipsum is a set of precoded lorum ipsum for web designers to suite all of your place holding, and type testing needs.
EM Calculator is a small JavaScript tool which helps in making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
Font Stack Builder is used to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.
CSS Typography Reference Sheet is a reference tool that is split into three sections: CSS Typography Property Table, Web Safe Fonts Table and CSS Typography Value Conversion Table. Also includes a downloadable pdf option.

BlogmyQuery – BMQ