Global Colors & Typography Guide

Our theme makes it easy to establish your brand identity globally. Instead of changing colors and fonts on every single page, you can set global rules that apply across your entire website.


Global Colors

To manage your site’s color palette, navigate to Appearance → Customize in your WordPress dashboard, then go to General → Base Colors.

1. Accent Color

The Accent Color is the most important color setting on your site. It is used subtly throughout the theme to call attention to key elements, such as buttons, active menu items, and highlights. Set this to your primary brand color.

2. Content Colors

Expand the Content section to manage the colors used in the main body of your website:

  • Text Color: The primary color for standard paragraph text. Usually, a dark grey (like #333333) is best for readability.
  • Link Hover Color: Defines the color that text links inside your post content change to when a user hovers over them. (Note: Standard links will automatically use your Accent Color, this setting only changes the hover state).
  • Headings Color: The default color for all H1, H2, H3, H4, H5, and H6 headings across your site.

3. Boxed Content Background

If you are using a “Boxed” layout (configurable under General → Layout), you can define the Boxed Content – Background Color here. This is the color of the “paper” your text sits on, usually white or a very light grey.


Global Typography

To manage the fonts used across your site, navigate to General → Base Typography in the Customizer.

The Business Interface theme integrates seamlessly with Google Fonts, giving you access to hundreds of high-quality typefaces.

1. Base Font Size & Smoothing

  • Base Font Size: This controls the REM base of the root HTML element. Adjusting this slider will proportionally scale all typography across your entire site. The default is usually 16px.
  • Font Smoothing: Enable this to apply anti-aliasing to your text, which makes fonts look crisper and more elegant, especially on Mac/iOS devices.

2. Body Typography

Expand the Body & Content section to set the font for all standard paragraph text.

  • Click on Body Typography to choose a font family, set the font weight (e.g., 400 for normal, 700 for bold), and adjust line-height (spacing between lines of text).

3. Headings Typography

Expand the Headings (H1 – H6) section to control your title fonts.

  • Headings Default: Set a global font family for all headings here. This saves time so you don’t have to select the font 6 different times.
  • Specific Headings (H1 through H6): If you want to override the default for a specific heading level (for example, making your H1s much larger, or using a different font just for H3s), you can adjust them individually here.

4. Emphasized Text

  • Heading Emphasized Text: The theme allows you to add special styling to <em> tags used inside of headings. This allows you to create beautiful, magazine-style typographic elements by italicizing specific words in a title with a completely different font family (like a script or serif font).

Saving Your Changes

Once your colors and fonts are perfectly aligned with your brand, click the blue Publish button at the top of the Customizer to save your settings.

Leave a Reply

Your email address will not be published. Required fields are marked *