Branding

Branding is one of the key steps in designing a good-looking website. Branding is your visual identity and a reflection of who you are as a brand and how you want to communicate. The Swift branding settings control:

  • Typography – which is to say fonts and all related settings
  • Button design – primary and secondary

Together with themes this makes it easy for you to create brand uniqueness and consistency across the whole website.

To access the Branding settings navigate to Content > Swift tools > Design > Branding (Figure 1.1).

Figure 1.1 Branding settings

When making changes on the Branding page or after a deployment to a Staging site or a Live site you always need to preview the Branding page in frontend. Otherwise, the changes will not be loaded as the CSS changes will not be saved.

  1. Go to Swift tools -> Design -> Branding
  2. Click on Show page to view the Branding page in frontend
  3. Do a hard refresh (Ctrl + F5 or Cmd + Shift + R)

You have the following fonts available:

  • Header font: Your usual heading.
  • Display font: A larger and opinionated heading style.
  • Body font: A font for paragraph text, buttons, and more.

First, you select a font and then make your preferred adjustments using the settings related to the font (Figure 2.1).

For each font you have the following settings available:

  • Font weight: Select one of the available weights for the selected font.
  • Casing: Select how you want the letters to visually appear. This setting is only available for header and display.
  • Line height: Select the preferred distance between lines of text.
  • Letter spacing: Select the preferred distance between letters.

Next, you set up your buttons' visual appearance. Our goal is to make it easy for you to create visually consistent buttons styles and distinguishable primary and secondary buttons. The available button settings are following:

  • Button font-weight: Select between light, regular, and bold font-weight.
  • Button casing: Select between lowercase, regular and uppercase.
  • Button shape: Select between boxed, rounded, and pill.