Web Fonts by Google
Font family
When you build a website, you don’t have to choose a font. The other person’s computer already has many fonts installed, and their web browser has one picked out for web pages. But if you want to force their computer to use a certain font on your web page, you can specify it in your CSS file with the term ‘font-family’. The other person’s computer will obey your CSS commands (unless they went out of their way to forbid that).
CSS
{font-family: “Times New Roman”;}
If you really care, you should include a few backups in case the other computer doesn’t have the font you specified. List your choices in order of your preference and separate them with commas. All computers have generic serif and sans-serif fonts. Make sure to put quotes around any font name that has spaces in it.
{font-family: “Times New Roman”, Georgia, serif;}
Typical fonts
My CSS textbook (published in 2017, mind you) said most web browsers default to Times New Roman (on PC) or Times (on Mac). These are the classic newspaper fonts with serifs on the tips of the letters. However, the book said these classics can be hard to read because they are tight. The Georgia font is a common, wider alternative, but you must specify it with CSS in order to trump the default.
My book said PCs have Times New Roman installed for a serif option and Arial for sans-serif, but not Times or Helvetica fonts. Macs have Times and Helvetica but not Times New Roman or Arial. If you specify a font that’s not there, it will be replaced with your next option, or their default. Including a generic ‘serif’ or ‘sans-serif’ in your CSS will ensure they at least get that much of a match.
At the time of this writing, Time Magazine used a serif font for titles and body text. Washington Post used serif for titles and sans-serif for body text.
Endless fonts
Hi. My name is Amy and I am a fontaholic. Recovering. I am a recovering fontaholic.
You see, my web design days grew out of my desktop publishing days. I have a 30-year history of designing newsletters, marketing materials, logos, business literature, greeting cards, presentations, signs, worksheets, and classroom materials. Font matters.
Remember Print Shop? That was the original software package that started the font snowball. Of course, the Googlemonster has gradually taken over. Now we have a whole planet full of designers making fancy alphabets and offering them for our perusal on Google Fonts. You can even paste in your own text or name or title and see it in all the different fonts at once!
When you find a font you like, just download it and voila! Or in the case of web design, just grab the font’s code to embed on your page.
Oh my gosh, the hours I’ve spent trying on different fonts. Thousands of fonts and thousands of hours, I’m sure.
Believe it or not, I even had to make my own font one time! Yes, it’s true. I wanted my HomeMade Chemistry website title to look like Bunsen burner flames. Amazingly, there was no such font. Even more amazing, I was able to pull it off in Gimp with MUCH ado.
In fact, it was so much ado that I haven’t found the time to finish out the alphabet and sell my magnificent font. Someday, I will do that, and I will write a post on how to make your own font.
Title case
Google advises web developers to use sentence case for titles. That means only the first letter and proper names are capitalized. At the time of this writing, Washington Post followed that advice. Time Magazine, on the other hand, used title case for titles. That means every word in the title is capitalized except articles. I find it hectic, but to each his own.
If you find yourself with many a title to change the case on, you can use this fun tool called Case Converter. It’s also a quick way to solidify the difference in your mind. I hope whoever made that tool is getting decently compensated from those ads, because it truly is a gem of the internet.
Font Sizes
Back in the paper day, the standard formal print typeface was Times New Roman 12 point. When different fonts came along, some looked smaller and larger even at the same size. For example, the font Georgia is a wider version of Times New Roman. It looks larger even at that same font size.
When I worked in research, my reports were laden with numeric tables. Font size 12 was overpowering for data tables. We kept the paragraphs at 12pt but reduced the tables to 9pt. Our titles were 20pt. Somehow that became a habit I’ve never been able to shake, on paper, anyway.
Web font sizes are larger than print. We read web content on computer screens farther from our face, or on phone screens smaller than a book. Font size 16 has become the digital norm for paragraphs, with 32pt titles.
Consistency
Web design gurus harp on consistency. Consistency helps users navigate. Inconsistency makes people go away.
CSS
CSS was invented specifically for consistency. If you specify your style on a separate CSS document, it can be assigned to every page of your website uniformly, once and for all. If you change your mind, you change it once in the CSS document rather than many times on many web pages.
WordPress and page builders
If you are using a page builder rather than writing your own code, specify your font in the most central setting so that it is disseminated consistently throughout your website. If you choose fonts directly on a page, you run the risk of being inconsistent in your choices. If you’re like me and you find everything fun and interesting, you are guaranteed to be inconsistent in your choices.
WordPress websites use a theme to store their style choices. WordPress provides a Theme Customizer to give you access to basic style choices. Make sure to set your font choices in the Theme Customizer so that they are applied uniformly throughout your site.
You can also change fonts directly on a page or post, but that’s a bad idea. For one thing, it invites inconsistency, which erodes your reader’s comfort. For another thing, if you change your font sitewide in the customizer, it won’t apply to the one you set directly on the page. Just don’t do it, okay?
Amy’s font
It took me about a year to choose a font. I changed fonts many times in my early websites. At first, I matched my font with the theme of the article. Then I noticed themed fonts can be distracting and hard to read. I also got overwhelmed with the variety in all my projects.
I decided to use a single font scheme across all my websites. It was like merging my split personalities into a single person. It also eliminated the burden of repeatedly scanning all the font options for the best match. What a relief!
I wanted my universal font to be fresh, minimal, and comfortable on the eyes. Poppins was my favorite, but it wasn’t on all computers I used. I wanted a font that was tried-and-true on the web and mobile devices. But even the tried-and-true fonts vary.
I finally chose Comfortaa as my universal font. I like its clean, rounded edges and puffy letters. I like that it does not evoke any predisposed connotations. At least, I don’t think it does. It seemed to be available on every computer I used, so it must be common. But if your computer doesn’t have Comfortaa, I’d still like you to see my writing in clean, simple letters.
{font-family: Comfortaa, Arial, sans-serif;}
My titles are in sentence case because this also feels minimal and comfortable to me.
I hope this has been a comfy read for you.