Achieving Better Website Typography

For a long time, when developers and designers were building websites typography wasn’t high up on the priority list. This was due to a number of factors, sometimes it was simply lack of diverse web safe fonts and other times it was adherence to strict SEO (Search Engine Optimization) standards. Now, due to the number of internet connected devices and our ability to ceaselessly consume content, digital mediums require strong typographical sense to convey their content to the masses. Included in this article are 4 hard and fast rules to help your website’s typography provide a better user experience.

Establish a Visual Hierarchy

All design is based on communicating visually and a key component of successful design is always establishing a hierarchy, and web typography is no different. What this means is ensuring that there is an obvious separation in size between headings, subheadings and body copy. Establishing a visual hierarchy allows users to scan the content and find content that interests them quickly and easily. Additionally, establishing consistent design patterns across your site will allow users to seamlessly navigate through the experience without confusion. Creating this hierarchy also has a practical purpose as establishing it using HTML best practices creates an easy blueprint for Search Engine crawlers to work through, helping your website rank higher based on SEO best practices.

Font Selection & Sizing

When selecting your font it is important to consider what fonts the brand uses and if they are available for use on the website. This is because of font licensing, basically when you purchase a font you have either a license for printed materials or for a digital license (which is based on the number of visitors/views, but I’m not going to get into that). If the brand’s fonts are unavailable, Google has a fantastic selection of free web safe fonts for use on websites, and almost any brand’s fonts can be somewhat emulated by something in this library. When fonts are decided upon, a good baseline for your body copy is having it at least size 18px (sometimes as high as 22px, depending on the font), which may seem large, but this helps with accessibility and causes less eye strain.

 Line Measure, Alignment & Spacing

Think of physical mediums that you typically read (novels, newspapers, magazines, etc.). One thing they all have in common is a short line measure. When a user is reading your copy you want them to be able to read it without moving their head at all, and this typically means having roughly forty to sixty characters per line. Additionally, opening up your body copy’s line measure a bit helps users more easily consume your content. Finally, if a chunk of copy is over three lines long, it shouldn’t be center aligned as it makes the content difficult to follow. A final word on text alignment, NEVER JUSTIFY TEXT.

Get Rid of that Ipsum

When designing a website or digital product it is important to understand what the final content will resemble. Lorem ipsum is a great solution for initial concepts, but the longer it stays in the design the more of a pain it is to change out and modify the design based on new content types. Typically, designing without content is never a good idea, it’s hard to predict what could be available in terms of copy as designers are rarely experts in the field their website is typically for.