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

Font Family

The term 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 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

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

Sans Serif Fonts

  • 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

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

Font Size

Font size means describes how large the text appears on a web page. 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’s 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.

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.

Font Style and Weight

The font-style property is mostly used to specify italic text. The font-weight property specifies the weight (bold) of a font.