10 Typography Tricks Every Web Designer Must Know

Typography for web designers is the thoughtful and deliberate selection of; point size, colour, line length, typefaces and all the other elements that make a layout legible and pleasing. The modern web offers a range of options for the user to control the appearance of elements to suit their needs. As a result, you might think of discarding the responsibility of making elements look beautiful! I advise against this.

As a matter of fact, it is impressive to you clients when you know your craft well. As with any other skill, you need to learn a few new tricks to expand your skill set. Here are 10 tricks that will go a long way in curving your skills as a designer.

1. Limit Your Fonts

One of the more common blunders made by designers, especially beginners is the use of several styles and fonts. As a result, the layout becomes hard to read and lacks order. If you have to use several fonts, limit yourself to two or three fonts. Use one for the body and the rest for the heading and subtitles. This will give your layout a cohesive feel.

2. Correct Alignment

Alignment is an important aspect of Typography. The wrong use of alignment results in text that is hard to read. For instance, if you have used Microsoft Word, you already are familiar with the four major options: Left, right, center and justified alignment. Using them interchangeably would result in text that is messy.

Left alignment is the most accepted position as it is easy for the eyes. Right alignment works well if and only if it is used correctly. However, the use of these might results in ragged lines. Keep an eye for ragged lines and rectify it by adjusting the length. Center alignment will definitely result in bumps if wrongly used. Finally, justified alignment is a nightmare to developers. It leads to typographical anomalies.

For this reason, use the text align property to carefully align your words. This will make your layout friendly and easy to go about.

3. Work with Grids

Grids work as frameworks on which you can carefully organize your elements. It therefore is of utmost importance to understand and employ them in your design process.

Working with a grid warrants logical and visual harmony as it ensures affinity for every little thing on your page with something else.

4. Spanning

If you intend to span elements, you can wrap the affected elements in their own tags. After doing that, you can use CSS to control it. However, this might turn into a struggle so it’s best to use them sparingly.

On the other hand, you can make use of kern to adjust the space between your elements. One way to go around it is imagining balloons of equal size and volume between each letter. Aim to space the letters so that the balloon fits perfectly without being squeezed above and below. Secondly, kern the letters upside down. This is not for meaningful work (as the characters are upside down) but it will give you a clear understanding of spacing.

5. Blur It

Blurring is another spacing technique. By blurring, you are able to focus on the whitespace and contrast in your letterforms without being distracted by characters. There are a number of ways out there to blur, but I would recommend taking a screenshot and blurring it using an image editor.

6. Rental Revolution

What is rental revolution? How does it help me as a designer?

Rental revolution is a new service that allows you to try fonts before purchasing them. As opposed to previous methods, where you were forced to buy fonts without getting a feel of their full capacity: rental revolution is here to rectify that. Your therefore are in a position to pick the fonts that suit your needs.

7. Avoid Stretching Fonts

Unless you are looking for a specific effect, don’t skew or stretch fonts. Fonts are created with a detailed attention for their measurement and shape. Stretching fonts results in an ugly-distorted typeface.

If you are looking to make the font longer or wider, choose from the libraries online. They have an endless supply of fonts of different height and thickness. This will save your elements from being distorted.

8. Whitespace

Keep in mind that whitespace is not necessarily an empty space. Whitespace can be used to bring a unique touch in your design. A stylish whitespace can be used to implore focus on an individual part of your design. Use them to effortlessly add sophistication in your design.

9. Forget Small Caps

Small caps can be an efficient tool to add expression to your typography, but if you use them wrongly your plan will fall apart. There are two types of small caps: real small caps and fake small caps (which are everywhere nowadays). Fake small caps scale the capital letters down. Real small caps, are drawn separately from the standard capital letter in a font.

Unless you can tell the difference between the two, avoid using them. Use all caps instead. No one will judge you for using all caps. Just don’t overdo it since no one wants to read a block of capital letters.

10. Use ‘O’ to Space Words

This is another method to help you space your words, is imagining letter ‘O’ between your words, both on top and sideways. This will give your typography a beautiful visual look.

Parting shot

Like in everything else, find things that inspire your work. Study the available topographies and see what makes them appealing and effective. Try to spot fonts that beg your attention and make use of them. Finally, focus on readability. Whatever you design, ensure that it is easy to read.

  • Published on:
  • Under: Resources
Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
About The Author
Freddy Muriuki
Freddy Muriuki

Freddy is a WordPress theme reviewer at WP Theme Raves, writer, web developer and founder of Vista Media Enterprises, a nice place dedicated to the online entrepreneur looking to boost conversion rates using effective web content.