Working with Fonts

Working with Fonts

The predominate type of content in HTML documents is text. Because of this, there are many CSS rules for changing how the text is presented and the ways in which it could appear depending different settings.

CSS Units

While the px (pixel) unit was introduced in the section on the box model of elements, there are many other types of CSS units that can be used in determining the size of elements.

Absolute Lengths

  • cm: measurement in centimeters.
  • in: measurement in inches.
  • mm measurement in millimeters.
  • px: a measurement in screen pixels.
  • pc: a measurement in picas. (1 pica is 12 points; 6 picas per inch).
  • pt: a measurement in points. (1/72nd of an inch)

Relative Lengths

  • em: measurement for the height of a font in the size of a given font. (If font was set to to 12pt, each “em” unit would be 12pt and 3em would be 36pt.)
  • ex: measurement relative to the height of font’s lowercase letter “x”.
  • vh: 1% of browser window size height.
  • vw: 1% of browser window size width.
  • vmin: 1vw or 1vh, whichever is smaller.
  • ch: Measurement of the width of the “0” (zero)
  • rem: Font-size of the root element
  • vmax: 1% of browser window size larger dimension

Font Sizes

Font sizes

The CSS rule font-size is one of many that accepts different CSS units.

Font size rule

To double the size of all text within paragraph elements, adding a rule font-size: 2em would increase their size based on the relative size of the initial font size.

Paragraph Tag

Set to an absolute size like inches, the text would grow even bigger.

Bigger text

Font Families

Font Families

The CSS rule font-family is used to set the font family to use for the text within that elements and any of its children. Usually, font families are sets of fonts that start with a named font and then usually include at least one other “fallback” font like serif or sans-serif as a default in case the named font is not installed or available in the web browser.

Font Families are often divided into three categories: serif, sans serif, and monospace fonts.

Serif Fonts

  • Georgia, serif
  • “Palatino Linotype”, “Book Antiqua”, Palatino, serif
  • “Times New Roman”, Times, serif

Sans-Serif

  • Arial, Helvetica, sans-serif
  • “Arial Black”, Gadget, sans-serif
  • “Comic Sans MS”, cursive, sans-serif
  • Impact, Charcoal, 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

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML and CSS windows is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from the HTML modules, change the fonts and their sizes for your document.

  • For your titles and headings, change the font-family to a sans-serif font. For the text content of each section, change the font-family to a serif or other, more readable font family and size.

Test your response on Mozilla Thimble Links to an external site.!