CSS - Cascading Style Sheets

Fonts on the Web

Typography plays a major role in readability, accessibility, visual hierarchy (titles v/s parapgraphs), user experience and design identity. Choosing the right font and spacing improves comprehension and confort when reading content on a website.

In this section, we will explore the variety of usefull properties used to stylize fonts on the web to master the typography of any web page.

font-family:

Property that specifies the font (or list of fonts) used to display text. If a font is not availabl, the browser falls back to the next one.

Generic Font Families :

  • Serif = decorative endings
  • Sans-Serif = without serifs
  • Monospace = all characters have equal width
  • Cursive = handwritten-style
  • Fantasy = decorative (full)

Fonts are visual style of text, defining how characters are drawn. They are listed on https://fonts.google.com

font-style:

Property that controls the slant of the text.

Values :

  • normal = default display
  • italic = italic font version
  • oblique = slanted text
  • inherit = inherits parent value

font-weight:

Property that controls the text thickness (boldness).

Common values :

  • normal
  • bold
  • 100 to 900

font-variant:

Property that controls alternative glyph styles.

Common value :

  • small-caps = lower case letters become smaller uppercase letters

text-align:

Property that aligns text horizontally.

Values :

  • left
  • right
  • center
  • justify
  • inherits

text-justify:

Property that controls how spacing is distributed when text is justified.

Values :

  • inter-word
  • distribute
  • kashida
  • inter-ideograph

text-decoration:

Property that adds decorative lines to text.

Values :

  • underline
  • overline
  • line-through
  • none

letter-spacing:

Property that controls space between characters. This property is often used for titles or subtitles. Its value is written with a distance unit (px, %, xh...)

line-height:

Property that controls space between lines of text. This property is used to improve readability for long text blocks. Its value is written with a distance unit (px, %, xh...)

text-transform:

Property that changes text casing without modifying HTML..

Values :

  • uppercase
  • lowercase
  • capitalize

font-size:

Property that defines the size of the text. Its value is written using keywords or with a distance unit (px, %, xh...)