EN

CSS・First steps

Choose a font

The same words give a completely different impression when the font changes. Specify a font with font-family and finish off your whole page's feel.

Just adding color already made it feel like “your own page,” but the typeface of the text itself also greatly shapes the impression. An angular typeface feels crisp; a rounded one feels gentle. What controls this typeface is font-family.

Let’s write it

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}

Separated by commas, several font names are lined up. This is a candidate list meaning “first look for the first one; if it’s not there, the second; and if not that, the third….” Since which fonts are installed varies from computer to computer and phone to phone, lining up candidates like this makes it look close to the same on any device.

What you writeRole
"Hiragino Sans"A Japanese font installed on Macs (first choice)
"Helvetica Neue"The runner-up when that isn’t found (a Latin font)
ArialIf that’s missing too, this one
sans-serifThe last line of defense. A generic name meaning “just any typeface that isn’t serif”

Wrap fonts whose names have spaces in quotes

For fonts with a space in the middle of the name, like "Hiragino Sans", wrap them in " ". For generic names like sans-serif (words that are conventionally written without quotes), don’t add quotes.

The reason to list several candidates is that which fonts are installed differs by OS. For example, "Hiragino Sans" is a typeface installed only on Macs. On a Windows computer it isn’t found, so it moves on to the next candidate ("Helvetica Neue"→and if that’s missing too, Arial). If you want the Japanese to look nice on Windows as well, it’s reassuring to add a candidate like "Yu Gothic" (Yu Gothic, the standard Japanese typeface on Windows) to the list.

Always finish with a generic family

The standard is to place a generic family without quotes—like sans-serif (a sans-serif typeface) or serif (a serif typeface)—at the very end of the candidate list. Even if none of your listed candidates are found, the browser always has this generic one, so a minimum typeface is guaranteed.

How much the typeface changes the impression

Even for the same text, just changing font-family completely changes the impression you get. Here are three representative ones side by side.

From top: sans-serif (sans-serif), serif (serif), and monospace (monospace). Even with the same content, the typeface shifts the expression between “crisp,” “soft,” and “mechanical.”

Tidy up the line height at the same time

One more thing while you’re deciding the font. When text runs to two or more lines, the gap between lines is controlled with line-height.

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}
The top is line-height: 1.0, the bottom is line-height: 1.7. Even for the same text, just widening the gap between lines makes it much easier to read.

1.7 is a number (with no unit) you can picture as “1.7 times the text size.” Cramped line spacing is hard to read, and too much makes it feel stretched out. Around 1.5 to 1.8 is a good guide for readable line spacing.

When you want the same typeface on every device

The font specifications so far have been a way of using the typefaces installed on the viewer’s computer or phone. Separately from that, a website can actually deliver the font data itself. This is a “web font,” and the flagship example is the free-to-use Google Fonts. It’s also a solution for when none of your candidate list is found and the page falls back to a generic family.

TipsChange the face of your text with Google FontsHow to use Google Fonts is covered in this handy tip

Summary of this lesson

  1. The typeface is font-family. List several candidates, separated by commas
  2. Wrap names containing spaces in " "
  3. Always finish with a generic family like sans-serif
  4. Line spacing is line-height (around 1.5 to 1.8 is a good guide)

Try it: settle on the real font and color scheme

Let’s go ahead and settle on the real font and color scheme for Shima’s page here. Rewrite the entire body rule like this.

body {
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  color: #2c2622;
  background-color: #faf6ee;
  line-height: 1.7;
}

Did you notice the color and background-color values changed from color names to codes—#2c2622 (a deep brown) and #faf6ee (a soft cream)? When you want a subtle shade with no name, codes are your tool.

Browser view. The text is in a sans-serif typeface, with deep-brown text on a soft cream background
The page that was in a serif face is now a clean sans-serif. The color scheme, too, is now settled as the “real thing” for Shima’s page.

With that, the foundational typeface and color scheme for the whole page are set.

FAQ

What if it doesn't change to the font I specified?
Check the font name's spelling and the quotation marks (wrap names containing spaces in ""). It also won't show if that font isn't installed on the viewer's device. When you want the same typeface on every device, use a web font like Google Fonts.
Why do only the letters and numbers change while the Japanese stays the same?
Because the font you specified is for Latin text only and doesn't have Japanese characters. When you want the Japanese to change too, add a Japanese-capable font to your candidate list.
What is the sans-serif at the end for?
It's the last line of defense for when none of the fonts you listed are found. It's a generic term meaning "just give me some sans-serif typeface," so always put it at the end of the list.
Are there Japanese web fonts too?
There are. But because Japanese has a huge number of characters, the data tends to be large. To keep loading from getting slow, it's reassuring to choose a service that offers a feature to narrow down to only the characters you use (subsetting).