How To Set Global Fonts, Colors, and Buttons

This guide provides you the best practices Authority Blocks regarding fonts, colors, and buttons.

Option #1: Use Kadence Theme

I recommend using the Kadence Theme for multiple reasons. For starters, you’ll get the best results with Authority Blocks when you use Kadence.

The free theme is lightweight, super-fast, and is highly customizable to your needs.

  • Install Kadence Theme.
  • Click on Customize in the Appearance Tab.
  • Click on Colors & Fonts.

Option #2: Use Custom CSS

I wouldn’t recommend this unless you’re locked into your current theme and cannot change to Kadence.

  • In your WordPress Admin click on Customize in the Appearance Tab.
  • Click on Additional CSS.
  • Add the following CSS codes to the field, update the colors with your preference.

Custom Colors

Alert: WordPress themes (like Kadence) have the global palette function built into their theme. Check to see if the theme you’re using has the feature built-in before using this code.

:root {
    --global-palette1: #3182CE;
    --global-palette2: #2B6CB0;
    --global-palette3: #1A202C;
    --global-palette4: #2D3748;
    --global-palette5: #4A5568;
    --global-palette6: #718096;
    --global-palette7: #EDF2F7;
    --global-palette8: #F7FAFC;
    --global-palette9: #ffffff;
}

What Fonts To Choose

Authority Blocks inherits the global heading and body text that your theme uses. For best results, use a bold font like Montserrat or Poppins for headings. I would recommend a sans-serif for the body text in most cases.

Recommended Font Sizes

  • Body: 16px | 1.8em line-height | 400 weight
  • H1: 42px | 1.3em line-height | 800 weight
  • H2: 36px | 1.3em line-height | 700 weight
  • H3: 24px | 1.3em line-height | 700 weight
  • H4/H5/H6: 20px | 1.2em line-height | 600 weight

What Colors To Use

Less is more. That is especially true on websites that intend to engage audiences and generate sales.

Authority Blocks uses 9 colors, but in reality only two of the nine slots should be used for color. The rest are black, white, and a variety of gray colors.

Read this guide from Kadence for more details.

Accent

1 – Accent #0948ED

I recommend using your primary brand color. However, some bright colors may not work well with some of the block designs.

Alt Accent

2 – Alt Accent #F50031

I recommend using a red or color that stands out, but make sure white text is still readable.

Strongest Text

3 – Strongest Text #000000

I recommend black (#000000) for the strongest text color. This needs to be your darkest text color.

Strong Text

4 – Strong Text #353535

I recommend using a dark gray like #444444.

Medium Text

5 – Medium Text #707070

I recommend using a medium gray like #999999.

Subtle Text

6 – Subtle Text #C0D4FB

I recommend using a light gray like #DDDDDD or light version of your accent color.

Subtle Background

7 – Subtle Background #F2F2F2

I recommend using #F2F2F2 or something similar.

Lighter Background

8 – Lighter Background #F9F9F9

I recommend using #F9F9F9 or something similar.

Accent

White/Off-White #FFFFF

I recommend using white (#FFFFF) in almost all cases.

Links

Blue #0000EE

In most cases, I’d recommend using your 1 – Accent color as your link color. However, if your accent color isn’t legible, use a blue color like #0000EE and use 4 – Strong Text or 5 – Medium Text as your hover color.

Buttons

Red #F50031

I recommend using your 2 – Alt Accent color as your button background color. However, if your alt accent color doesn’t grab attention, use a red color. Use the same hover color as your links.

See Also