Changing Fonts Using CSS

Using CSS, you can choose a font family and select font sizes and color.

images/articles/css/css08.webp

1. Font Family

The font family describes the typeface or look of the font used for the text. The fonts you use need to also be available on the visitor's computer. This means that you have to use certain web-friendly fonts that appear on the most computers. If a visitor doesn't have the font that you specify, that visitor's browser chooses a substitute.

The CSS property for the font is called font-family. When setting a font, the best practice is to provide a list of fonts from which the browser can choose. For example,

body {
 font-family: arial, helvetica, sans-serif;
}

Any page that uses that CSS rule will attempt to display its text first with the Arial font. If that font isn’t available, the Helvetica font is used next. If that font isn’t available, then a sans-serif font is used. If none of those are available, then the browser chooses a font to use all on its own.

If the name of a font family is more than one word, it must be in quotation marks.

Serif Fonts

A serif is the small ornamentation at the end of a letter that gives it a distinguishing quality. Serifs often improve legibility by making individual letters stand out from their neighbors. Serif fonts are generally best suited for the display of larger text onscreen (14px or larger) or for smaller printed text. They are not so good for smaller text on a screen, because the serifs often obscure the letter.

  • Georgia, serif
  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Times New Roman", Times, serif

Sans Serif Fonts

The sans serif fonts are those fonts without serifs. Although the characters are less distinctive, sans-serif fonts work better for smaller text on a screen. Sans-serif fonts often portray a more modern and often casual feel.

  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • "Comic Sans MS", cursive, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

Monospace Fonts

Although monospace fonts can have serifs or not, their distinguishing feature is that each letter occupies the same amount of space. Monospace fonts work best for text that has to be exactly read, such as programming code. Although easier to scan, monospace fonts can become monotonous for reading large amounts of text. Monospace fonts often give a technical or typewritten feel to text.

  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco, monospace

2. Font Size

Font size means describes how large the text appears on a web page. Fonts can be set as either absolute sizes, which define the size based against a standard length measurement, or relative sizes, which are in relation to defaults set for the browser.

You can set font sizes using the font-size CSS property. Font sizes can be set in one of four units:

  1. Percentage
  2. Pixels
  3. Points
  4. Em

Percentage or Em work well for mobile devices and other scenarios where visitors may want to scale the text size according to their needs.

It is quite common to set a font size for the entire page and then change font sizes for individual elements in the page. For example,

body {
 font-size: 90%;
}

With this CSS setting, the fonts across all elements on the page would be set to 90% of their default value.

When you specify 1.2em as the font size, it means that the text will be 1.2 times the default text size - the size that the browser would display if you didn’t specify a size.

3. Font Color

There are multiple ways to change the font color. You can use a friendly name for common colors, like red, blue, green, and so on, or you can use a hexadecimal code, or hex code for short. Hex codes are three- to six-character codes that correspond to the Red, Green, and Blue (RGB) color mix appropriate to obtain the desired color.

Hex codes are the more accurate and preferred way to set colors in HTML but they’re hard to remember.

Font color is set using the color CSS property. For example,

color: #FF0000;

With this CSS setting, the color of font would be red.

4. Font Weight

The font-weight property specifies the weight (bold) of a font. The scale for font-weight ranges from 100 through 900 - 100, 200, 300 and so on. 100 is the lightest weight. 400 is normal. 900 is as heavy as it gets. As an alternative to the numerical scale, you can use one of four font-weight words: lighter, normal, bold, and bolder.

5. Font Style

The font-style property is mostly used to specify italic text. For example,

font-style: italic;

6. Spacing

You can create styles for text spacing by using letter-spacing. For example,

letter-spacing: .1em;

This will add extra space between the letters. When you specify an em value for letter-spacing, it tells the browser how much more space or less space you want beyond the normal spacing.

Letter-spacing doesn’t distinguish between characters in the middle of a word and characters that begin or end a word. This means that letter spacing adjusts the space not only between characters in a word but also between the last character of a word and the first character of the next word. If you increase letter-spacing, the spacing between words increases automatically.

If you want to adjust spacing only between words, use word-spacing.

You can specify the spacing between text lines, by using line-height. For example,

line-height: 2em;