8 Simple Typography Tips for Your Designs

Typography is more than fonts. It’s a curious, beautiful mix of science and art. You can make or break the comprehension and legibility of a web page content depending on the typefaces you use in your designs. There is more to using fonts like a pro than just picking the prettiest or raddest ones and sticking them on for visual effect. In this post, we will go over some do’s and dont’s of practical typography, which should hammer in just how big a role fonts play in the subtlest of manners.

• Top 8 Typography Trends in 2021

Think of these as creative constraints.

1. Mix and Match Fonts

While it’s tempting to pick the best fonts you can find and use them all on a single site design, it is not actually the best course of action. You risk messing up the hierarchy and drawing the user’s attention to the ambiguity and the various differences in font styles and typefaces, instead of the actual content. Unless that is the effect you are going for, refrain from doing so.

Pick 2 or 3 fonts that complement each other – but aren’t too similar looking – as well as the overall design. Note: Stick to pairing Serifs with Sans Serifs, otherwise the different fonts end up looking too similar and create ambiguity.

Consider playing with weight too. For instance, consider the effect of heavy and ultra thin. The super heavy adds personality and weight to the text – according to a recent Awwwards article, it is trending as a main design element – while the ultra thin font puts in an ‘afterthought’ text of sorts. This also serves the purpose of establishing a visual hierarchy and draws attention to the text that needs it, without any extra effort.

If you are looking for some genius inspiration, the website of Forefathers Group can serve the best example of how to mix and match fonts. Have a look.

2. (White) Space

All design elements need whitespace to truly shine and accomplish their intended purpose. That holds true for fonts and type too.

Mind your margins and leave room to breathe for your fonts to remain legible. Pay attention to line spacing so your text doesn’t clump together. A good rule of thumb is to start from half the font size for line space and work your way up to optimize legibility for any given font.

Be careful not to crowd the typography. If you are having problems fitting something in, resist the urge to squish it together. Select a condensed font, or just shrink everything down and allow some breathing space. This applies to the edge of the page too, allow some white space around the text.

Probably one of the best examples of web design that portrays White space aptly is that of Apple.

3. Align Up

Alignment brings order to a messy jumble of text. It’s practically what separates order from chaos on the web. Text that’s poorly aligned raises all sorts of hackles in readers’ minds on the web – mostly because we are used to a certain order and the flow of text of a given language, on web or on books we all read growing up.

You can experiment with the alignment of your typefaces, but within reasonable limits. Mind the general margin (always mind a healthy margin), and think of the text that needs to placed in form of grids in relation to one another (or a main design element, kinda like labeling a diagram or drawing a flowchart). From there, align the text in a way that suits you best. Note: When in doubt, align everything to the left for maximum readability (in left-to-right languages, that is), like everyone who has been using WordPress for creating a site. It makes sense to readers and users alike.

Duoh is a website that can serve as a great inspiration for your web design alignment aspirations. It also offers a great color scheme and a web design that is a feast to the eyes.

4. Consider Color

There are a couple of ways to play around with contrast in typography. The most obvious is color, which can really bring out the aesthetic appeal of your design when done right. Learn your color wheel and the basics of color theory before diving headfirst into experimenting with colors in typography.

A standard light-dark background-text contrast works well for legibility of text on web, but it’s not necessarily set in stone and can be flipped for artistic purposes. Complimentary colors (from opposite sides of the color wheel) are also great for light-dark contrast when used sparingly.

The website from Forever Agency is a true depiction of a marvellous color scheme in a web design. They have managed to add many bold colors on the page in a manner that it appears very pleasant and attractive to the eyes. Have a look.

For even more creative outcomes, don’t shy away from breaking open the hues and saturation panels on that font color. Imagine deep metallic grey on an ivory background, for instance, or a deep blood red type over a light salmon pink background. Keep in mind though that heavily color saturated backgrounds or font will not sit well with the audience – so treat saturation as a double edged sword that is to be used very sparingly to draw attention to little things.

5. Sizes and Weights

Size contrast makes text scannable for the human eye. Recall the ‘F’ shaped reading pattern? It’s basically how you’re currently scanning over this post – basically title > heading > next heading, and so on, occasionally glancing over the nearby text and reading it if it suits your fancy.

It’s a rule of thumb that everyone needs to stick by – Large headings, significantly smaller (but still legible) paragraph text, midway for subheadings or so. Here’s a great sample of the same by Rally.

We also discussed some of the merits of using contrasting weights for effect in a previous point. Font families like Lato come with over a handful of weights, each of which you can use to tie things well together without adding a discordant element to your type.

6. Text Layout

Think about adding text over an image – one that you intended to use as background. Text layout is just that – making typography a part of an image and arranging text in-image without making it look unseemly or out of place.

Weird? Kinda, but you see it done everywhere from movie posters to book covers to advertisements to web designs that use large background pictures as their main design element. Tinker Watches inspires to present a strong CTA in their web design and in every step of it; text layout being brilliant, obviously. Have a look at what we intend to tell.

Imagine a splendid picture (of a product or a person, doesn’t matter which). Now where and how you place your text can very well make it speak volumes. Do you want to curve just right around the edges of the vase in the photo? Or do you want it big and bold but also, in 3D? It’s up to your text layout art to determine whether that’s a good thing or a bad thing.

The only constraints in this bit is to clean up after yourself. Try to organise the information that you’ll be delivering in bite sized chunks of text that can be placed around the object in question without disrupting visual hierarchy or putting a dent in comprehension, while also tying up the whole image-type as a kickass design.

7. Kerning

Kerning or tracking is the space between adjacent letters for any given font type.

While it’s a good, safe bet to keep it consistent and clean for legibility, you can also play around for a bit of kerning contrast to spice up some boring typography regardless of the font used. Imagine two characters on a slow motion collision course that abruptly paces up to a sudden thwack. Kerning contrast can convey a diluted version of that effect, and without as many words as I used to describe it.

Keep in mind that under no circumstance should you ever squash or stretch your characters (that’s just lazy) when you’re trying to adjust the spacing between letters – there’s a special control all for kerning in photoshop so use it. Maintain aspect ratio of the letters at all times. Bad Kerning is not rare to find. A lot of brands and websites have got it entirely wrong. Here’s an example.

8. Consistency

Consistency is key, especially in typography and web design. It’s part of the reason why some of the biggest brand names in history haven’t changed their logo font in forever. I’m talking Coca Cola, Cadbury, Tide, and born in my generation – Google and Amazon.

With your own font selection – be consistent. It would behoove you to stick to the same 2 or 3 originally picked fonts, at least until you’re going for a complete brand image overhaul. It keeps things simple (painfully so for a novice, mayhaps), but the best part is, you choose better next time

Back to You

That’s all the tips I had to share with all the typography nerds out there who are on their way to learn the finer distinctions fonts bring to any design.

As for a sum up, keep things simple (which is often directly related to being readable), keep yourself in check (especially with the effects), and learn to look at the big picture. Before long, your type will talk and speak what you want it to say – even with the placeholder text.

Which typography tips do you swear by in your web designs? Share with us in the comments below.

Credit: RawPixel.com