In addition to colours and images, fonts play an important part in website design.
In recent years the font choices for websites have expanded greatly. While web designers previously were restricted to 'web safe' fonts ensuring maximum compatibility between browsers and operating systems, we can choose from a vast selection of professional typefaces today. This has revolutionised the aesthetics of web design bringing the possibilities of print design onto the screen.
Aside from the new, fresh looks that come with the variety, it is a lot of fun working with fonts when designing your website and brand.
Before we go through some conventions and how to use fonts, let's have a look at the different font types on offer.
I would like to introduce you to five different font types: SANS SERIF, SERIF, DISPLAY, SCRIPT and MONO.
Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters. Serif typefaces are most often used in print documents. On the screen that tiny stroke can make content more difficult to read, especially on a tiny screen. This changed the preference in fonts from serifs to sans serifs.
They still have a place in logo design as they have got a lot of character and are often used in headings.
Display typefaces are bold and aim to stand out with the most variation. They are unsuitable for body copy as they are hard to read and are best reserved for headlines or other short copy that needs attention drawn to it.
Scripts are based upon handwriting and offer very fluid letter forms. There are two basic classifications: formal and casual. They are again used in headlines and for special paragraphs. Scripts is not usually chosen for body copy as their are more difficult to read.
Slab serifs have little to no contrast between thick and thin lines. Their serifs are thick and rectangular. Sometimes they come with fixed widths. Like its cousin the serif, it is great for headings, but harder to read in body copy.
In monospace typefaces each character takes up the same amount of space. Narrower characters simply get a bit more spacing around them to make up for the difference in width so that for instance there is no width difference, for instance, between the letter "I" and the letter "W." They come with a more technical notion as they are used by basic text editors such as Notepad and in tasks like programming as they rely on the easy identification of specific characters.
Designing with fonts
The choice of fonts matters. They help defining your brand's personality.
When designing your website, ask yourself the following questions as it will help you narrow down the choices as to what will appeal to your unique audience:
- Who will be visiting your site?
- What’s their age?
- What's the website about?
- What's its theme?
As a rule of thumb, don't work with more than two fonts and three colours in one design project to ensure a cohesive look.
Another principle is readability before design: Make sure the text is easy to read on the screen otherwise people will lose interest. Then worry about the design.
Depending on the type of a brand, I like to use a serif font for headings and in logos as it adds a professional notion to the brand. Have a look at the logo for the accountants from M+H Private or the financial planners from HH Wealth Creation as an example. Both being professional services, the serif gives the brand a more formal feel.
For my own website, being in web design, I chose a sans serif font for my headings and logo. I like their clean, crisp and modern look.
For body copy I generally stay with sans serif fonts as they are easier to read on the screen.
Fonts in Squarespace
Squarespace offers 130 different font choices including Google Fonts and Adobe Typekit. They group their fonts into the main categories described above with an additional OTHER block at the end. The other category includes fonts from all groups mentioned above.
Changing fonts in Squarespace
All fonts are available in any Squarespace template. You can change fonts in the Style Editor for the body text, headings 1 -3, button text, navigation, etc.
Here are the steps:
- In the Squarespace main menu, go to DESIGN -> STYLE EDITOR
- Then select the text you wish to change the font for (e.g. headings, body text, buttons) in your website preview on the right. This will bring up all the styling options for that particular type of text.
- In the style menu on the left, find the little down arrow next to the type of text you are about to change the font for. The list of styles including the current font will pop up.
- Click on the little down arrow again to open up the list of fonts.
- Pick your new font by clicking on its name.
- Then click outside of the popup window and the text will have changed in your website preview.
- Save the change on the top left.
That's it. Repeat the process for any other font changes you would like to make.
Fonts are an important part of your online and offline branding.
It is a lot of fun working with fonts as they are a very powerful design tool. The big variety of choices makes it enjoyable and challenging at the same time.
When choosing your fonts, make sure you
- limit the number to two per project and
- work with fonts that are easily legible, especially for the body font.
As a rule of thumb, use sans serif fonts for body text. For headings and quotes feel free to go with serifs, slab serifs, display or even scripts.
For design inspiration, visit the websites your customers are reading. What do they look like and which fonts will attract them and describe your brand perfectly.
Have fun creating your brand online 😀