Walkthrough #9 – Fonts & Buttons

This article is part of a walkthrough series detailing how to build yourself a website, from scratch in less than 2 hours. To see each article in this series click here, or, for the full blog post, click here.

1. Fonts and Buttons

   Ok, we’re getting near to the end now – just the last finishing touches to go!! Skizzar allows you to set global styles for text and buttons on your website. Lets start by looking at how to change fonts.On the main customizer menu, navigate to Site Settings > Fonts.

   Skizzar splits text into four categories:

   – Body text – this is the main text on your site (i.e. excerpt text)
   – Headings – this is all heading text
   – Header Menu – the text in your main menu
   – Buttons – button text

   Skizzar is also integrated with the Google Fonts library, so head over to fonts.google.com to take a look at what all the fonts look like. When choosing a font, it’s important to consider your reader first – whilst a handwritten, swirly font might look nice, it might not be the easiest to read, so start by deciding what sort of font you are after – Sans Serif are blockier, whilst Serif fonts are a bit curvier – often, a mixture of the 2 can work well! For this tutorial, we’re going to use something quite blocky for headings, menus and buttons and then something a little bit more mature for the body – here are the settigns we’re using:

   Headings – Lato
   Body – Crimson Text
   Menu – Lato
   Buttons – Roboto

   Head over to fonts.google.com where you can also see what font pairs work well together!

   Consistency is key when approaching typography – it’s worth making note of the sizes you use for each heading and excerpt and make sure it is the same across your entire site. Now is a good point to check the typography across your site and make changes. In this tutorial, we are using the following typography settings:

   H1 Headings (i.e. on sliders):
   Size – 60
   Letter-spacing – 8
   Uppercase

   Slider excerpts:
   Size – 20
   Uppercase

   H3 Headings:
   Size – 30
   Letter spacing – 6
   Uppercase

   Main Excerpts:
   Size – 20
   Uppercase

   H5 Headings (i.e. content)
   Size – 20

   Body excerpt:
   Size – 16

   Now let’s chat about buttons. Skizzar splits buttons into 2 types – buttons on dark backgrounds and buttons on light backgrounds – and you can style each from the main customizer menu. Navigate to Site Settings > Buttons and you’ll see a list of design options available for each. For this tutroial, we’re going to change the background colour of buttons on light backgrounds to a hex value of #3498db and reduce border radius to 6px (inline with the Skizzar branding). We’ve also gone in and added a read more button to the about text on the homepage, linking to the new About page.