Typography Guide for Websites

A common thing that’s overlooked when anyone designs a new website is the text on the pages. Not just what it says, but how it looks. Think about some of the most beautiful website designs you’ve come across.

What makes them look so good? There’s a number of things that it could be a combination of. Here are just a few:

  • Quality photography
  • Precise layouts
  • A unique dynamic between sections
  • Contrasting elements
  • A well-chosen colour scheme
  • The copywriting
  • Great typography

We all know that you don’t need a perfectly visually polished website to run a successful business, but having a decent visual home for your business can quickly increase your authority, create more trust, and increase conversions.

Let’s say that you already have a website. How can you quickly and easily make it look 10x better?… Typography!!

Text blocks will likely take up a huge percentage of the real estate on your website. But does it look any good? Could it look better? Let’s work on that.

Before we start it’s worth noting that the appearance of the text on your website is called its typography. Here are a few typography laws that you can use to make your website look 10x flasher.

Right size

Making sure the text on your website is the right size can make a huge difference to the reading experience and overall appearance of the site.

I recommend making your body text anywhere between 12px to 18px. Consider your target market. What would they prefer? Small or large?

Once you’ve set the size of your body text it’s time to establish the font-size for your headings. It’s important to keep even proportions to create harmony between all your text elements. That’s why I like to double or quadruple the size of my body text.

For example: If I chose a 15px body font-size then my sub-headings will be 30px in size and my headings will be 60px. Increasing the font-size by a factor of 1.5x or 2x will create enough contrast in size for each element to be strong on its own, and also work together with the other elements.

Choosing a font

When choosing fonts for your website it’s best to use no more than 2 unique fonts. This will ensure that your text is cohesive and saves you from slowing down your website. The more fonts you have on your website the slower it will come.

It’s also worth choosing a classic font. Classic fonts are extremely well crafted and have passed the test of time.

Alignment

You have a few alignment options. Right, left, centre, justified. I’d recommend choosing 1 alignment for all your text and using a second alignment only for special cases.

I suggest keeping all your text aligned left apart from the occasional heading or blurb that’s aligned to the centre. This is much more legible than right-aligned and justified text. It’s also mobile-friendly.

Avoid jamming your text

Make sure that your text has white space around it. This lets the text breathe and slot into the page nicely. If your text is to close to the edges of the page or other elements it will look messy and crowded.

If your text boxes look a little messy try given it some space on all sides. Does it look better? If not, try giving it more space by moving it into its own section.

Styling your text

Now it’s time to give your text some character. But how can you do that without creating a mess? Here are a few ways you can style your text easily, effectively and elegantly.

Use a mix of these in moderation to create dynamic, excitement and a unique identifier for your website. Now that you know the basics it’s time to put it into practice. Once you’ve done that it’s time to break the rules!

Author: Yoran Nap

I help life coaches and authors create beautiful brands and websites. Keen to see what I could do for you? Work with me

Pin It on Pinterest