Fonts and Typography Theme Builder Options for Modern SharePoint Sites

Introduction

The Fonts and Typography Options for Modern Pages are now available in the ShortPoint Theme Builder. If you have used these options for Classic Pages before you should be familiar with the way they work. If you haven’t used them before, then this guide is for you. You can control the fonts of different site elements to modify their appearance like so:

New Fonts & Typography Features

The Fonts and Typography settings for Modern Theme Builder are now active and various options can be tweaked in order to achieve the desired look and feel, similar to how the Theme Builder works for Classic Pages.

The available options are:

• Base
• Headings
• Advanced Headings
• Web Parts
• Body
• Site Title
• Page Title Area
• Primary Menu
• Hub Menu
• Sub Menu
• Mega Menu
• Side Menu
• Side Sub Menu
• Footer

Let’s go through each one by one and find out what they do.

1. Base

The Base section allows you to set the base font for all elements on Modern Pages. It's a global options that will change the fonts for everything, including navigation elements, the header, the content area, webparts and so on. You will only be able to set the Font in this section, with other sections offering more options for detailed customization.

2. Headings

The Headings section allows you to set fonts and text related options for all the headings located on a page, overwriting parent rules if they are set. The affected HTML elements are H1, H2, H3, H4, H5, H6.

This section allows you to set the following options:

• Font
• Line Height
• Letter Spacing
• Color

3. Advanced Headings

In the Advanced Headings section you will be able to set fonts and text related options individually for all the H1, H2, H3, H4, H5 and H6 elements respectively.

This section expands into six different sections, one for each heading type element, and you can set the following options for them:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Link Color
• Link Hover Color
• Link Visited Color

4. Web Parts

The Web Parts section will allow you to customize web part related elements.

Here's an example of the Countdown Web Part with a title and description being customized in real time:

4. a. Web Parts Title

Changing any settings in the Web Parts Title section will affect all titles of the web parts placed on the page.

You can set the following options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

4. b. Web Parts Description

Similarly, changing any settings in the Web Parts Description section will affect all description areas of the web parts placed on the page.

You can set the following options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

5. Body

The Body section will affect all elements located in the body area, or to be more explicit, all elements located under the Header.

From the body section you can set the following options:

• Font
• Color
• Link Color
• Link Hover Color
• Link Visited Color

6. Site Title

This section is part of the header and it contains site information.

Here's an example of what you can modify in real time:

6. a. Site Title

The name of the current site, usually the most visible element in the header.

In this section you can set the following options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

6. b. Site Subtitle

The site type or description, displayed as a subtitle below the site title.

From the Site Subtitle section you can configure the following:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

7. Page Title Area

This section of the page contains information about the page you're currently located on, such as the name, the author and the published date.

Take a look at these configuration options in action:

7. a. Page Title

This is the name of the page which you have added when you first created it. In the example above that name is "Home".

Available options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

7. b. Text Above Title

You can define this element by editing the Page Title Area in SharePoint. 

Available options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Background Color - you can also set the background color of this element here

7. c. Page Author

The Page Author is displayed right under the page title.

Available options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

7. d. Page Date Published

The display of this element can also be hidden or shown from the Page Title Area in SharePoint.

Available options:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color

Here's a screenshot showing you available options for configuring or displaying these elements from SharePoint:

8. Primary Menu

The Primary Menu is the main navigation element of the page, located in the header. On Modern Team Sites it is located on top of the page title and logo, while on Communication sites it is located under the page title.

Communication sites:

Team sites:

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

9. Hub Menu

The Hub Menu represents the hub associated navigation element. It's located on top of the header.

Communication sites:

Team sites:

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

10. Sub Menu

The Sub Menu items show up when hovering over navigation menu items that have drop down arrows located next to them. The look and feel of the sub menu items is the same for both the hub navigation menu and the site navigation menu, so configuration options will be applied to both.

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

11. Mega Menu

The Mega Menu option will help you configure the way mega menus are displayed. Mega menus enable site navigation to be displayed at-a-glance on communication pages and hub sites.

Mega Menus have Headers and Items located under those headers, which you can configure using SharePoint's user interface.

11. a. Headers

The Headers represent the title of the sections you organized your items in.

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

11. b. Items

The Items are represented by the individual elements you have categorized.

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

12. Side Menu

The Side Menu is only available for Team Sites so any fonts and typography configuration options you are going to apply will obviously not affect Communication Sites.

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

13. Side Sub Menu

The Side Sub Menu section will control all non-root level items located in the sidebar.

The available options in this section are:

• Font
• Font Style
• Text Size
• Line Height
• Letter Spacing
• Color
• Text Active/Hover Color

14. Footer

The Footer section will affect the fonts and typography of all elements located in the footer.

The only available option you can customize here is the Font, since footers can contain different types of elements with different colors and font sizes, which you can further modify in the Generator page.