Styling Text

Tomasz Bogusz

What is Text Styling in CSS?

Text styling in CSS is adjusting text content of a given element through specifying the text content's:

  • font,

  • color,

  • alignment,

  • underlining & striking through with decorative line,

  • letter casing,

  • line height,

  • word and letter spacing,

  • handling white space and line breaking,

  • shadow.

Font

Font Styling Aspects

A font of a given text content can be styled in the following aspects:

  • family,

  • size,

  • weight (bolding),

  • variant (non-small-caps vs small-caps), and

  • style (italicization).

Font Family

CSS allows for specifying a font for an element's text content using the font-family property.

Not always a specified font is available on all client devices. Therefore, a value of a font-family property should include more than one font name simultaneously. The consecutively provided fonts serve as fallbacks in case of absence on a client device of previously specified ones. Therefore, the last provided one should be a generic like serif, sans-serif or monospace.

p {
  font-family: "Times New Roman", serif;
}

Multi-word font names need to be included in quotation marks.

There are three primary families of fonts:

  • serif (with letter ending small strokes) e.g. Times New Roman, Garamond,

  • sans-serif (without letter ending small strokes) e.g. Arial, Helvetica, and

  • monospace (with equal-width letters often used for presenting code syntax) e.g. Courier.

Each of the provided primary font family names can be used as a generic fallback at font-family property.

Some fonts, like the mentioned Times New Roman or Arial, are considered a web safe fonts i.e. generally available on client devices.

Font Size

It is possible to specify a font size of a given text content using the font-size property.

p {
  font-size: 18px;
}

There are several size units that can be used to express a font-size value.

The most often used font size units are the ones that relatively (i.e. non‑absolutely) specify the font size. The most prominent of those are:

  • px - screen pixels,

  • em - relative to the current font size of a given element in pixels,

  • rem (root em) - relative to the font size of the root element of a given document in pixels, and

  • vh (viewport width) - where 1vh means 1% of a viewport width.

The default font size in most browsers is 16px.

In addition to relative font size units it is possible to specify font size absolutely in inches (in), centimeters (cm), points (pt) and pica (pc) where 1 inch = 2.54 centimeters = 72 points = 6 pica.

Using relative units over absolute units for text content dedicated to be displayed on client devices of varying screen sizes such as desktop and laptop computers, smartphones, and tablets allows for user text resizing and therefore is considered a good practice.

Font Boldness

The font-weight property allows for specifying boldness (thickness) of text content through using:

  • keywords - normal for unbolded text and bold for bolded text,

  • numeric values from 100 to 950 where the normal keyword equates 400 and the bold keyword equates 700.

p {
  font-weight: bold;
}

div {
  font-weight: 200;
}

Font Italicization

It is possible to italicize text content using the font-style property. The properties values are normal for non‑italicized text and italic for italicized text.

p {
  font-style: italic;
}

Font Small Capitalizing

To present text content as small capitalized letters use the font-variant property and the keyword small-caps.

p {
  font-variant: small-caps;
}

Text Color

To specify text content color use the color property. The color can be specified using:

  • RGB color values,

  • hexadecimal color values,

  • HSL color values, or

  • predefined color names.

p {
  color: red;
}

Check out the chapter on colors to learn more.

Text Alignment

Horizontal Text Alignment

To horizontally align text content and nested inline and inline-block elements use text-align property.

The text and nested inline and inline-block elements can be:

  • left aligned (left),

  • centered (center),

  • right aligned (right), and

  • justified (justify).

p {
  text-align: center;
}

Vertical Text Alignment

To vertically align text content and nested inline and inline-block elements use vertical-align property.

The text and nested inline and inline-block elements can be vertically aligned to:

  • baseline (baseline),

  • top (top),

  • middle (middle), and

  • bottom (bottom).

p {
  vertical-align: middle;
}

Underlining & Striking Through with Decorative Line

It is possible to add a decorative line to text content using the text-decoration- properties specifying text-decoration-line (e.g. underline, line-through), text-decoration-color, text-decoration-style (e.g. solid, dotted) and text-decoration-thickness. The text-decoration-thickness property has limited support.

To underline text:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

/* Shorthand: */
p {
  text-decoration: underline red solid 2px;
}

However, the text-decoration property is often used with specifying only the line having the remaining properties resort to defaults i.e. color being set to the color of the text, style to solid and thickness to 1px.

p {
  text-decoration: underline;
}

To strike through text:

p {
  text-decoration: line-through;
}

Uppercasing & Lowercasing

To uppercase or lowercase text content use the text-transform property.

.foo {
  text-transform: uppercase;
}

.bar {
  text-transform: lowercase;
}

Line Height

To specify the height of lines of text content use the line-height property.

It's values can be expressed in:

  • numeric multiplier of the current line height, e.g. 1, 1.2, 1.5, 2,

  • the keyword normal equaling the numeric multiplier of 1,

  • other size units, e.g. px, em.

p {
  line-height: 1.5;
}

Word & Letter Spacing

To specify distance between words use the word-spacing property.

To specify distance between letters use the letter-spacing property.

The values of both spacing properties can be expressed in any unit sizes, e.g. px, em.

p {
  word-spacing: 12px;
  letter-spacing: 0.5px
}

Handling White Space & Line Breaking

To specify how white space is handled and how lines are broken use the white-space property.

Text Shadow

It is possible to add a shadow to text content using the text-shadow property.

It is possible to specify:

  • horizontal shadow size,

  • vertical shadow size,

  • blur size (optional), and

  • color (optional).

p {
  text-shadow: 2px 4px 3px #00000042;
}