How to use Typography in Web Design for your Northern Irish website

This blog post will help you understand the importance of typography and give you an insight into how to use the perfect typography combination to create beautiful and more aesthetically pleasing website designs.

To build a successful website there are some elements to be taken into consideration. Images and colours are the most obvious, but there are also other elements that must be considered. Among them, typography and fonts are a key part of communication in web design.

In fact, it is crucial for a web designer to understand the fundamentals of typography and how to choose the best font pairings. An efficient typeface choice communicates the right values and meanings and these should be perfectly aligned with your brand message.

When you are going to choose a font for your website, it is vital that the font you choose is readable, user-friendly and perfectly responsive for all the devices.

In this post, you will gain an insight into How to use Typography in Web Design for your Northern Irish website.

 

What is typography?

Generally speaking, Typography is the “art and technique of arranging type”. Type is a fundamental means to deliver a message correctly, whether you’re designing a website, an app, a poster or even a postcard.

Two main purposes are related to typography: 

• To ensure the text is easy to read, making it legible and improving the user experience (UX)
• To create a specific mood and aesthetics, to attract your target audience.

Learning the fundamental rules of type may take some time and practice, but will definitely help you become a better web designer. 

Psychology of fonts

A golden rule for branding is to understand the goal. Each font has its own personality and specific characteristics, which convey a mood and atmosphere that must be consistent with your project.

Before choosing one or more fonts, ask yourself, ‘What does your brand want to convey?’. This principle is valid in general, but even more so for your website, where the textual parts will probably be more substantial.

Talking about web designed-applied typography, a 10-year study suggested that people pair fonts up with personality traits. For example, “Arial” was perceived as stable, it was also seen as “unimaginative”.

But 10 years in the high-tech context is a long time. Meanwhile, other tests and research had been carried out. For example, Venngage had been looking at typefaces used in some Netflix show’s posters and how they reflect the message of the show. They divided the fonts into six categories and described their characteristics:

• Serif: traditional, respectable
• Sans Serif: minimalistic, straightforward
• Decorative: quirky, fun
• Headline: bold, dramatic
• Handwritten: personal, fancy
• Modern: efficient, forward-thinking

Font and Typeface

The first definition we should look at is related to the difference between font and typeface. 

• A Font refers to a specific style within a typeface family.
• A Typeface is a collection of fonts

For example, Roboto is a typeface (used by Google); Roboto Bold is a specific font within the Roboto typeface family

We should also refer to font-family. A font family is simply a group of fonts that are designed to use together. For example, Playfair Display is a font family – it consists of several weights, styles and more.

Two families: Serif and Sans-Serif

When you are choosing the font for your website, one of the first decisions is whether to choose a Serif or Sans-Serif font.

Why? In a nutshell, this is because of the differences in the small features on the ends of strokes you can find in some fonts: in fact, a serif is a small line or stroke attached to the end of a larger stroke. In most cases, they are at the top or at the bottom of the letter.

Fonts that have these features are called “Serifs” or “Serif fonts”.  Those that don’t are called “Sans-Serifs” or “Sans-Serif Fonts”. 

Serif

Serif typefaces are formal and traditional. For this reason, they are mostly used in an editorial context, for example in magazines, newspapers, and the body copy of books. The most well-known serif typeface is Times New Roman.

Not all serifs are equal, as there are slight variations depending on the specific typeface: this is a part of what makes a typeface unique.

One serif family can have a regular, italics, semi bold, semibold italic, bold, bold italic, small caps, and more.

Sans Serif

The Sans Serif are typefaces that don’t have serifs. They are modern and fresh, a great solution for headlines or even body copy for most websites. Among the most well-known Sans Serif typefaces are Arial and Helvetica.

Also Sans Serif family can have a regular, italics, semi bold, semibold italic, bold, bold italic, small caps, and more.

Decorative

A decorative typeface is a variation of the aforementioned Serif and Sans Serif. It should be used sparingly, mostly for titles and headlines. This is a good way to add character to your website, just remember to avoid using it for long paragraphs, as it could be difficult to read.

Anatomy of a font

Typography has its own language and definitions. Considering that a single letter can be divided in many different parts, referring to the anatomy of the font is a valuable metaphor to understand how it is really composed.

Aperture: The partially enclosed space of a letterform.

Ascender: An upward vertical stroke that extends beyond the x-height.

Baseline: The invisible line on which all letters rest.

Bowl: The generally round or elliptical forms are the basic body shape of letters.

Cap height: The distance from the baseline to the top of the capital letter.

Counter: The white space enclosed by a letterform.

Crossbar: The horizontal stroke in letters.

Descender: A downward vertical stroke that extends beyond the baseline.

Dot: Also known as a tittle, is a small diacritic on a lowercase ‘i’ or ‘j’.

Eye: The closed counter of a lowercase ‘e’.

Finial: A tapered or curved end on a letterform.

Ligature: Two or more letters tied into a single character.

Lowercase: A smaller form of letters in a typeface.

Shoulder: A curved stroke originating from a stem.

Spine: The main curved stroke of a lowercase or capital letter.

Stem: The main stroke that is more or less straight, not part of a bowl.

Serif: A stroke added to the beginning or end of one of the main strokes of a letter.

Small Capital: Short capital letters designed to blend with lowercase text.

Stroke: A straight or curved line that creates the principal part of a letter.

Terminal: A circular form at the end of the arm, leg or brow in letters.

Uppercase: A typecase containing capital letters.

x-height: The distance between the baseline and the height of the lowercase letter ‘x’.

Weight: The thickness of a character’s stroke.

Examples of Fonts

Let’s see some examples of how fonts can determine the character of the page. Just remember, there’s no right or wrong font. It all depends on the context and tone of the message. 

ROBOTO

This suggests a cold and detached approach. The sobriety of this font makes it versatile and adaptable. Roboto is the main font used by Google.

Typology: Sans-Serif

Characteristics: neutral, sober, pragmatic

Also try: Verdana, Myriad Pro, Gill Sans Mt

GARAMOND

With its discreet decorative elements, it has a traditional, almost official aspect, excellent for conveying authority and seriousness

Typology: Serif

Characteristics: formal, serious, respectful

Also try: Perpetua, Times, Caslon

LEMON TUESDAY

Tracing the flowing forms of handwriting, it creates an informal and friendly atmosphere

Typology: Sans-Serif

Characteristics: personal, stylized, accessible

Also try: Brush Script, Snell Roundhand

CLARENDON 

The shapes of these fonts convey confidence and compose a style that captures attention

Typology: Serif

Characteristics: assertive, self-confident, direct

Also try: Memphis, Rockwell, ITC Lubalin Graph

The definitions mentioned before gave us a better understanding of what typography is and some of the main categories of type. Now we can look at some tips for how to choose the best fonts and how to use typography in web design for your Northern Irish website.

1. Where To Start

There are two obvious starting points when choosing the right font for your website. These depend on the current state of your project.

Follow your brand

It could be that your project already exists, and the website could be an important addition to boost your online presence.

If you already created a logo, a social media campaign, or even a brochure, you have already faced the crucial question “which font shall I use?”. We always recommend being consistent and coherent while using your brand elements. The same of course applies to typography.

Research and get inspired

For those who have yet to decide the font of their brand, we suggest starting researching and gathering inspiration.

You can take inspiration from literally any newspaper, magazine, poster or from other websites. Remember that it is crucial to choose the right font, as it will be an omnipresent element for your brand to powerfully express your project’s values.

2. Choose your main font

This may sound obvious, but having a main font is crucial. It will be the font of your website’s headlines and titles. For this reason, it is important that it stands out from the other elements.

3. Secondary font

For the secondary and following fonts, the choice could be even trickier. There is no general rule, as most depends on your project identity and general design. You will probably face a few different scenarios, in which you could choose between coherence and contrast in your design.

Coherence

On some occasions, secondary fonts need to follow the main font’s style, with just small variations. This will create a low contrast but a dynamic nonetheless.

This could be a good solution for blogs, online newspapers, or other websites whose brand focus is on other elements to create movement and dynamics.

Contrast

On other occasions, you may need a secondary font that dramatically differs from the main one to create a contrast. You could also try to pair opposite styles, for example using a bold sans serif for your title and a serif typeface for the body.

This is a good solution for a fresh and youthful brand, or a photographer that needs to create variations.

4. Limit the fonts you use

Google offers tons of typefaces, and you could easily get carried away with all the possibilities available to use for your website design. 

We suggest sticking with a maximum of three typefaces for your design. Obviously, there can be exceptions, but generally speaking, good use of 2 or 3 fonts will get you the result.

How to use your fonts (with an eye for SEO)

Titles and headings

We mentioned the opportunity of having two fonts. The main reason for this is that you may prefer to use different fonts for the headings and another for the body. The importance of headings must not be underestimated, both for design and SEO purposes. You can recognise them as they have the tags <h1>, <h2>, <h3> and so on. Generally speaking, as the number of the heading increases, the font will usually get smaller. Websites like WordPress use this kind of format. 

In terms of SEO, good use of headings helps search engines understand the page structure. Obviously a good on-page SEO is user-oriented, so the page structure is a fundamental part for the reader of a blog post as well. Did you notice the table of contents at the top of this article? Headings are essential in creating a clear hierarchy for the elements of the page.

<h1> 

<h1> is used for page titles. There should be only one H1 heading per page, and with tools such as Yoast SEO or Rank Math, it can also be hidden.

<h2> and <h3>

<h2> and <h3> are used for the main sections of the page, that indicate different topics and the hierarchy between the elements.

<h4> – <h6>

<h4> and below are headings of lower hierarchy order. They are helpful to specify more elements: for example these sections in which we have spoken about the specific heading are all with <h4> tags.

Body

The body is simply the text that goes under the headings. In terms of SEO it is the paragraph (<p>) of your copy. Here it is really pretty straightforward, as you will use the main font for the body of your website.

 

Conclusion

In this blog, we covered the basics of typography theory and psychology and how they’re used to create impact in website design. Generally speaking, a website is built using these guidelines about How to use Typography in Web Design for your Northern Irish website, a UX and UI oriented web design, high-quality images and colours and great copy. Include all of this on your website and you can help your business grow in terms of both branding and website conversions. 

If you think your website needs improvement in terms of design, here at Rapid Agency we deliver bespoke Web Design in Belfast, SEO, Digital Ads, Copy services that will help to improve visits for Northern Ireland websites and the user navigation, getting you the results you are looking for. Get in touch with us, we are happy to help!