The Basics of Typography

Along with Colour, Typography is one of the most important elements of good design. Whether it is a custom typeface in a logo, text on a brilliant printed poster or part of a fantastic web design, typography must be carefully chosen. Having great typography across your brand, your brand assets and your website will set you apart from your competitors.

There are tonnes of articles on typography on the internet, comprehensive and well-written articles. I’ve listed a few brilliant ones at the end of this post.

Today, I want to concentrate on some techniques and examples that can be easily applied to your brand and website.

The Basics

Before we get going, let’s cover the basics. There are a number of classifications for a typeface.

Serif Typeface

Serif typefaces have the little decorative flicks and extensions at the end of some strokes, these are called “serifs”, hence the name. Merriweather is a Serif typeface.

Merriweather Font Screenshot

Sans-Serif Typeface

Sans-serif literally translates to Without-serif. Open Sans is a popular example.

Open Sans Font Screenshot

Slab Serif

Much like Serif’s, but heavier. Have a look at Patua One as an example.

Patua One Font Screenshot

Script

Script usually emulates that of the written hand. Caveat will give you an idea.

Caveat Font Screenshot

Monospace

All the above are variable-spaced typeface classifications. Usually referred to as proportional typefaces. Monospace is different, with each letter, number and punctuation they have the same fixed width. Check out Source Code Pro for an example.

With the basics covered, I’m now going to move on to some practical examples you can action today.

Source Code Pro Font Screenshot

Typographic Hierarchy

This is probably the most essential and also the most overlooked element of a good design. Sadly many websites fail on their typographic hierarchy, whereas print work tends to fare better.

What is Typographic Hierarchy? In its simplest form it aids and informs the design giving a consistent experience for the viewer. Taking a website as an example, if you have six headings with Heading One being the main page title and Heading Two being a sub title, Heading Three being a sub heading within a Heading Two section, this should remain consistent across each webpage and the whole website.

You can also make specific content stand out, like quotes to draw attention to points within a blog post.

You can also make specific content stand out, like quotes to draw attention to points within a blog post.

The main factors in creating a good typographic hierarchy are:

Heading Size

Continuing with the website example, HTML allows 6 main headings on a page from Heading One (<h1> is the HTML tag) all the way down to Heading 6 (<h6>). An H1 heading should be the largest on the page and the main page title, H2 should be smaller and denote the main sections of a page or article, H3 should be smaller still and denote less important parts of the page or sub sections within an H2 section. This then continues with H4 all the way down to H6 heading. None of the headings should be smaller than the main body copy or paragraph size and they should visually look different to the main paragraph font. The difference can be in a completely separate font or a change in the font weight, using bold for example. Take a look at this very page, we’re using one Heading One, a number of H2s for the main blog article and for the sidebar. We’re using H3 for sub headings underneath each H2 section and the social share title is an H4. You’ll see the font sizes reducing for each heading level.

Paragraph Size

The main content of a webpage needs to be in a readable size, especially for long form blog articles like this one. The paragraph size on this page is 21px on wider screens and 15px on mobile to make sure it is easy to digest. This means your heading sizes should be bigger than the base font size you’re using for the paragraph text.

Line Length

The recommended line length for blocks of text on the web is between 60 and 85 characters. With Responsive design, line length varies, on mobile this page is around 40 characters per line (with a smaller font size) and between 60 and 75 characters on larger screens and devices. The more characters you have per line the more you need to increase the Line Height.

Line Height

“Line Height” is the space between the two lines of text. A line height of 1.4 to 1.7 works well on web for long pieces of content and a tighter line height for headings between 1.1 and 1.3 due to the larger font sizes. You don’t actually need to specify a unit for line height (like px or em or pt), it works relatively to the font size you choose.

Bold & Italics

Emboldening and italicising text is a great way of breaking the visual flow and attracting your website visitors to key pieces of content. Italicising text is also a good way of denoting supplementary text, like a job title or an address.

White Space

Creating a good design around typography and making a well balanced visual flow brings white space into the equation. The best designs allow for breathing room in the design and layout. Make sure you have ample space around headings and between your main elements on the page so things don’t feel bunched up and hard to read.

How do you implement all of the above on your website?

This is actually simpler than you may think, everything above can be achieved with CSS (Cascading Style Sheets) which is the code that works alongside your HTML to create the visual part of the design.

If your website is in need of a CSS refresh for the typography, just get in contact using the form below and we’ll take a look at your website to see what’s involved.

Other Great Typography Articles

Here are a bunch of other great and in-depth articles on Typography:

Get a CSS Refresh

Fill out the form below and we’ll assess your website and let you know what we can do to help with a CSS Refresh.




MAIN IMAGE CREDIT: UNSPLASH.COM

Discuss your project with us

hello@weare2ndfloor.com or +441794513043