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.
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.
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.
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.
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).
Subscribe to the Developer Insider Newsletter
From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays