How to choose fonts in Google Sites

Google Site editors and organization designers may now explore Google Site font options. Read on to find out if your site font is “on brand.”

Photo of Google Site with "Fonts in Google Sites (Libre Baskerville 48)" header displayed, with four other font styles in text below (Lexend, Comic Sans, Courier, and Lobster).

Image: Andy Wolber/TechRepublic

In December 2020, Google announced that Google Sites now offers access to many more fonts and text customizations. Site editors may now choose from a large list of fonts, font sizes, colors, line spacing, and traditional italic/bold/underline formatting options (Figure A). The availability of more font options in Google Sites is both good and bad news. The good news? People may change and customize fonts. The bad news? People may change and customize fonts.

Figure A

Screenshot of Google Site with two paragraphs of text selected, which brings up text options that include the options to change font, size, styling, and more.Screenshot of Google Site with two paragraphs of text selected, which brings up text options that include the options to change font, size, styling, and more.

As an editor of a Google Site, when you select text, you may then modify how it displays. Changes include the ability to change the font, font size, bold, italic, underline, or color, as well as add a link or adjust alignment and/or spacing.

Font options that make it possible to present a tastefully distinctive design also let people create visual chaos. The following covers how an individual Google Site editor might make reasonable font choices, as well as how graphic designers in an organization might guide people toward brand-appropriate fonts.

SEE: Google Sheets: Tips and tricks (TechRepublic download) 

Site editor? Choose fonts for meaningful and readable distinctions

A minimalist might select a single font–either a serif font (e.g., Times New Roman or Georgia) or sans serif font (e.g., Arial or Roboto)–for all text on a Google Site. When you use a single font, you can use size to make distinctions between headers and body text. For example, headers might be set to size 36, while body text might be size 12 or 14. At those sizes, both serif and sans serif fonts are typically considered to be relatively readable on the web (Figure B). Currently, TechRepublic displays nearly all text in sans serif fonts.

Figure B

Screenshot of Site font panel with Sans Serif fonts listed, including Lexend Mega, Hammersmith One, Lexend Giga, Do Hyeon, Gill Sans, and more.Screenshot of Site font panel with Sans Serif fonts listed, including Lexend Mega, Hammersmith One, Lexend Giga, Do Hyeon, Gill Sans, and more.

The simplest choice might be to standardize on a single font. You may filter and select fonts in a variety of ways, such as the Sans Serif fonts displayed here, sorted by Trending.

Or, you might decide to use both serif and sans serif fonts (Figure C). For example, TheAtlantic.com uses serif fonts for titles and article text, but relies on sans serif fonts for things such as author names, menu items, and navigation. NYTimes.com, similarly, uses a mix of serif fonts and sans serif fonts. In both cases, these sites use different fonts to convey distinct content. 

Note: These sites don’t mix font types within sentences or sections.

Figure C

Screenshot of panel with Serif fonts listed, such as Roboto Slab, Merriweather, Playfair Display, Lora, PT Serif, and more.Screenshot of panel with Serif fonts listed, such as Roboto Slab, Merriweather, Playfair Display, Lora, PT Serif, and more.

Often, you will want to use both serif and sans serif fonts. The Google Site font selection panel shown here shows serif fonts, sorted by popularity.

You might also consider font spacing. Fixed-width fonts, for example, provide the same horizontal width for each character. Often, this type of font is used to indicate specific text to be typed (e.g., as in the code instructions for Tensorflow). A monospaced font, such as Source Code Pro, might distinguish code from other instructional text. In contrast to monospace, the width of variable fonts varies. For example, Lexend (covered previously on TechRepublic in How to use the Lexend font in G Suite), offers several different font width options.

To learn more about selecting fonts, read and explore the fonts suggested in Choosing Web Fonts: A Beginner’s Guide by Google Fonts (Figure D). Font selection is a blend of science, art, and design.

Figure D

Screenshot of the Choosing Web Fonts article at Google Design (shows header image, article title, and initial paragraph of text).Screenshot of the Choosing Web Fonts article at Google Design (shows header image, article title, and initial paragraph of text).

Organizational graphic designer? Suggest Google Site standards

In an organization, people who are in charge of brand look-and-feel elements may want to review and recommend Google Sites font options. One way to do this is to create a test Google Site, then explore available fonts to identify close matches to the organization’s currently used fonts. Not every font available at fonts.google.com is available for use in Google Sites. For example, the Noto family of fonts, which Google has supported and promoted, isn’t yet an option in Sites. With the combination of search and filters, you should be able to find acceptable fonts that approximate your organization’s branding. Additionally, you also may want to suggest font sizes for people to use for headers and body text in Sites.

Brand caretakers might also stay alert for the availability of Google Site themes, which the company has said will be available in 2021. Hopefully, an organization’s design department will be able to customize themes, and then make those themes available for organizational use, since some organizations prefer to have distinctive designs for external (e.g., public or collaborative websites available to everyone or to partners) and internal (e.g., internal project or team sites) sites.

What’s your experience with Google Sites fonts?

Which fonts do you use on Google Sites? Do you simply use whatever default displays, or do you select specific fonts for specific purposes? Have you identified any specific font/font family as especially readable by your intended audience? If you’re in charge of branding for your organization, what steps have you taken (if any) to help people select “on brand” fonts? Let me know your thoughts about fonts in Google Sites, either in the comments below or on Twitter (@awolber).

Also see

Leave a Reply

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