Skip to main content

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Wikipedia

 
There are probably a few websites out there without any type on the front end, but not yours. One of the most important functions of a website is for users to read about what you do. To help make that as easy as possible, here are some basic rules of website typography. I’m not trying to turn you into a designer that’s my job! but these concepts will come in handy when updating content on your website.

Reading Is Good

Only use the font(s) you need

Hopefully you have some basic brand guidelines in place that can be applied to your website, in addition to everywhere else your brand is displayed. Those guidelines should include what web safe font(s) to use for your website. If you don’t have brand guides you can start by picking a font that works well with your logo to use for any long blocks of text. In general a serif font is easier to read in longer blocks but it’s not mandatory. After you’ve selected a paragraph font you may decide to select a different font to use for headings and/or buttons. You almost never need more than 2 fonts for your website. Not only will too many fonts start to look messy and confusing, each font has to be externally loaded, slowing down your page speed and hurting your user’s experience and your SEO.

Use proper font sizing

If the text is too small people will have a hard time reading it. If the font is too large then your text will flow awkwardly and it will be hard to read more than a few words at a time. In addition to your human readers, search engines can be very discerning when it comes to what size your type is. I’m not going to get into all the specs here but the most important is for your body text to be at least 16px. Otherwise search engines like Google may lower your search ranking.

Keep paragraphs left aligned

If a block of text is more than a couple lines long then it should be aligned to the left, not to the right or centered. English is read left to right, then down and to the left of the next line. If the left side of those lines aren’t lined up your reader could get lost, and that’s not what we want. Shorter titles, headings or buttons don’t have to be left aligned as they are meant to stand out, but keep the overall flow of your content in mind.

Limit the width of your lines

This might be the most common type problem I see on websites. Many websites don’t consider how wide a browser window can get and end up with lines of text that go on for way too long. See my comments on left alignment above because you have similar issues when users are trying to get from one line of very long text to the next. The average laptop screen is about twice as wide as users can comfortably read across unless the text is very large. A general rule is to keep lines to around 60 characters long, including spaces, for desktop designs.

Use Sufficient Color Contrast

You don’t have to use 100% black text on a 100% white background. (You probably don’t want to use much white text on a black background either btw as that can strain a reader’s eyes) However you need to be sure that there is enough contrast between the color of your type and the background so it remains readable. If you want to get into the nitty gritty here are the WC3’s Web Content Accessibility Guidelines.

Another important point here is to be very thoughtful when placing text over images. You want to be sure there is enough contrast between your text and the image beneath it no matter how the screen is sized and positioned. This brings me to the final rule…

Don’t place words in an image file

Unless it is a logo, or another form of design that you will also be explaining via selectable text, avoid using image files with words in them. This used to be common practice as it gave designers control over how type displayed across devices. In modern times though designers have plenty of options that make this unnecessary. Many users (and search engines!) view websites differently than you do. Using actual type instead of images ensures they will be able to read your content. See my earlier post on “Is your website Accessible and ADA compliant?” for more information.

 

There is way more to cover when it comes to websites and type but I think these are the most important rules to keep in mind. If you have any questions, or think I left anything important out, please let me know.