Learning CSS: Part 6: Working with Fonts

Learning CSS

Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.


Working with Fonts

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

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

Screenshot 2018-09-15 13.00.35

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

Screenshot 2018-09-15 13.03.03

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.

Screenshot 2018-09-15 13.05.35

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

Screenshot 2018-09-15 13.06.27

Font Families

Screenshot 2018-09-15 13.11.41

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 increased 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

Codepen Example:

See the Pen Learning CSS: Part 6: Working with Fonts by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s