You can incorporate many elements into your web design that will create engagement, and keep your visitors’ attention. These include images, videos, and even sound. However, the most important part of almost every website is the content that visitors read in order to get the information that they read.

If you want to make that information easier to read, visually interesting, and for that text to add to the overall design of a website, you have to understand typography. This is the art and skill of making the written word both functional and aesthetically pleasing.

If you want to learn to use typography to your advantage, check out these 10 rules that every designer should keep in mind.

1. Stop Using LoremIpsum After The Initial Design Process

If content is king, why isn’t it given serious consideration in the web design process? By using fake content as a placeholder, web designers relegate content to a secondary role. This is a big indication that design priorities are all out of whack. It’s not so problematic in the early stages, for example, when you are mocking up a variety of page layouts. However, once you have narrowed things down, it is important to work with actual web content when creating the final design. This ensures that what is being said on a particular web page is given as much importance as the layout and visual elements.

In addition to this, having actual text matters in terms of design and layout. You don’t want to be in the position of having fully designed a web page, only to learn that it doesn’t work with the actual content. This is why it is extremely important to get the actual text from your client of the content writer as soon as possible.

2. Make Text Sans Serif

Serif text is absolutely beautiful. These are great fonts to use for print, and for larger print applications such as headings, titles, and subheadings. Unfortunately, on the screen, serifs don’t scale well when it comes to smaller displays of content such as blocks of text. The serifs that look nice at a larger size, make the text difficult to read when the font becomes smaller. Because of this, it is advisable to save serifs for big text and to rely on sans when readability might be an issue. Better yet, embrace the clean, sleek, modern look of sans fonts and save serifs for the printing press. This way you will never have to deal with the degradation of readability in favor of using a font that looks pretty.

3. Think About Smart Quotes And Other Symbols Early in The Design Process

Chances are, you’ve visited a website where certain symbols would not display properly. Sometimes they are replaced with a question or string of strange looking characters. Other times, they simply aren’t there. This frequently happens with smart or “curly” quotes. This is often the result of text being created in MS Word or another package and then ported over to a web page. Things simply do not translate as desired. It is also common for the Euro symbol, double byte characters, and other symbols taken from foreign content.

In order to avoid this problem in your final design, you have a couple of options. First, you can modify your content to get rid of these symbols. This works if you are willing to change the symbols into natural language. You can also use HTML to ensure that the symbols display properly rather than just relying on copying and pasting. Whatever you decide, be sure to test the web page in every browser that you can. What might solve a problem with symbols in one browser might not be effective at all in another one.

4. Advanced CSS Skills Are Extremely Important

If you have developed good CSS skills, your visitors should be able to navigate through the pages of your website in an absolutely seamless manner. If you create your stylesheets properly, you can even have multiple versions of the same page while still maintaining great continuity when it comes to typography. Of course, you don’t need to use lots of trickery. Good CSS can help you to avoid small yet, common issues such as having the typefaces and font size alter from one page to the next.

Why is consistent typography such a necessity? Using CSS to maintain consistent typography gives your website a professional and sharp look. It also means that you don’t need to think about typography as you design each page. Instead, you just use the appropriate stylesheet. If you do decide, on a particular page that you are going to break the norm and do something different with typography in order to create an effect or to draw attention to something, it will stand out more thanks to your use of CSS.

5. Both Micro and Macro Typography Are Important

Micro-typography relates to the details of typography that are related to readability. For example, spacing is a concern related to micro-typography, as is scaling, and contrast. The adjustments that you make to ensure that a block of text is readable on any device or browser are all related to micro-typography.

Macro-typography relates to the way that your choices regarding typography ties into your overall design. It relates to aesthetics.

Good typography takes into consideration both micro- and macro-typography. Have you ever paid a visit to a website that used a really neat looking, custom font that was also nearly impossible to read? That’s what happens when attention is paid to macro-typography, but not micro-typography.

6. Know The Content as Well as The Design

As you know, a good website has flow. Part of this is the readability of the content that is on the page. We’ve already discussed how this is impacted by things like serifs, and we’ve discussed how dummy text is no substitute for the real thing when it comes to the later phases of design. We’re not through yet. Content really is king. Once the final design, including content, is in place, you have to read the web page.

When you read the content after your design is finished, you can determine whether or not there are spacing or line break problems. These can make content confusing, or even unintentionally change the meaning of the content. Fixing these issues by using a few typography tricks can ensure that your final product communicates exactly what you or your client intends.

7. Understand The Importance of Hierarchy

Hierarchy is the road map that you give to people who visit your website. You can use images, video, color, and (of course) typography to create that hierarchy.

It’s simply a matter of guiding the visitor from the first thing that you want them to see to the next, and so on. With typography, you can use size, changes in font, and spacing to help define the hierarchy that you want users to follow. In fact, if you have a page that isn’t converting, you might want to play around with typography to see if any changes you make will help guide visitors to the call to action button.

8. Be Creative Yet Cautious With Color

The easiest way to ensure that you never have readability troubles due to issues with font color and background color is to use the highest contrasting colors there are, black and white. Unfortunately, that can make for some pretty boring design.

Don’t be afraid to use colors. In fact, don’t be afraid to use color combinations that don’t seem as if they would work. Sometimes, simply going one or two shades lighter or darker is all that you need to do. Then, your typography goes from unreadable to perfectly discernible and really cool looking.

9. Ditch Centered Text

The problems with centered text are numerous. First and foremost it can make your web pages resemble poorly designed flyers. In addition to this, you almost always wind up with strange margins and text that appears as if it is intended to be a poem or liner notes from an old rock album. While it can be okay to use centered text for headlines, you are usually best off avoiding it altogether. Stick with left adjusted text, and your readers will find your content much easier to read.

10. Consider What Your Text Looks Like Enlarged

Whether they use their thumb and forefinger or click on the zoom button, people are going to make your text bigger. Sometimes, they do this to compensate for a smaller screen. Other times, they simply do so because it is a struggle for them to read your text at the normal size.

It would be great if everybody was able to view your text as intended, but with boomers often needing some extra help to see text, that’s simply not possible. Be careful not to use a typeface that degrades if it is enlarged.

Helpful Tools And Resources

Here are a few useful tools and resources to help you do more with typography:

• FontFace Ninja: This utility helps you to identify fonts that you find on the internet. This is a great tool to have when you run across a font that really catches your eye. This Chrome plugin will help you to identify, find, and purchase any commercially available font that you see on any website.
• TypePlate: This is a complete typography framework that is perfect for web designers. TypePlate can handle drop cap, block quotes, scaling, colors, and a variety of other typography related challenges.
• Modular Scale: This is a scale that allows you to determine the ideal font and font size. It also helps you to create a balance between the size of the font of your titles and headings, and the font you select for your text.
• TIFF: This tool allows you to bring up two different fonts. Then, it displays the differences between each of the two fonts for you. It even allows you to compare different letters and numbers from one font to the next.
• TypeWolf: Use this website to get your fix of some of the coolest fonts and most inspirational use of typography on the internet. This is an excellent source of inspiration, as well as information.
• Why Fonts Matter, Sarah Hyndman: This is an excellent book exploring the importance of fonts, and the ways that typography can influence the state of mind. It’s a great book for people who are passionate about typography, but also for people who may need convincing of the importance of choosing the right type of the job.

Conclusion

Hopefully, this article influences web designers to put a bit more thought into typography, and also to find ways to use type more effectively and more creatively in their designs.