Squarespace Tip 3 | The font matters

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. 

 
The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
 

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.

      Font types

      I would like to introduce you to five different font types: SANS SERIF, SERIF, DISPLAY, SCRIPT and MONO. 

       
      Serif and sans serif fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Sans serif

      Sans-serif typefaces lack serif details on characters which are extending features called "serifs" at the end of strokes. Sans-serif typefaces are perceived as more modern in appearance than serifs. They are often used to convey simplicity and modernity or minimalism.

      MY FAVOURITES

      Favourite sans serif fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Serif

       Serif. Source:  DesignCrowd

      Serif. Source: DesignCrowd

      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.

      MY FAVOURITES

      Favourite serif fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

       
      Display fonts, script fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Display

      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.

      MY FAVOURITES

      Favourite display fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Script

      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.

      Favourite script fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

       
      Slab serif, mono fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Slab serif

      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.

      MY FAVOURITES

      Favourite slab serif fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Mono

      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.

      Favourite mono fonts. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
       

      Designing with fonts

      The choice of fonts matters. They help defining your brand's personality. 

      The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane

      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.

       
       Logo for M+H Private

      Logo for M+H Private

       Logo for HH Wealth Creation

      Logo for HH Wealth Creation

       

       

      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. 

       On Port 80 logo

      On Port 80 logo

      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.
       
      Changing fonts in Squarespace. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane
      • 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.
       
      Save font in Squarespace. The font matters. Web design tips for small businesses| Logo & web design by On Port 80, Brisbane

      That's it. Repeat the process for any other font changes you would like to make. 

      Conclusion

      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 😀