Essential properties

Font-family

The font-family property is used to specify the font family. You can specify one or more fallback fonts to use if the first font is not available. The fallback fonts are specified in the same order as the fonts in the font-family list.

font-family: "Custom Font", Arial, sans-serif;

Colour

As its name suggests, the color property is used to set the text color. It accepts any valid CSS color value, such as red, #ff0000, or rgba(255, 0, 0, 0.5).

<p class="keyword">Color keyword</p>
<p class="hex">Hexadecimal #2563eb</p>
<p class="rgb">RGB rgb(34, 197, 94)</p>
<p class="rgba">RGBA rgba(168, 85, 247, 0.8)</p>
<p class="hsl">HSL hsl(45, 93%, 58%)</p>
<p class="oklch">OKLCH oklch(0.6 0.2 200)</p>
<p class="hwb">HWB hwb(200deg 20% 20%)</p>
<p class="lab">LAB lab(50% -20 30)</p>

.keyword {color: deeppink;}
.hex {color: #2563eb;}
.rgb {color: rgb(34, 197, 94);}
.rgba {color: rgba(168, 85, 247, 0.8);}
.hsl {color: hsl(45, 93%, 58%);}
.oklch {color: oklch(0.6 0.2 200);}
.hwb {color: hwb(200deg 20% 20%);}
.lab {color: lab(50% -20 30);}

Font-size

The font-size property is used to specify the font size. The font size is specified in pixels by default, but you can use relative units such as em or rem to specify font sizes relative to the font size of the root element.

Line-height

The line-height property is used to specify the leading. The line-height property has an effect on the height of the text element. To ensure consistency, use decimal values for line-height.

Unlike in Adobe, the line height doesn't go from baseline to baseline. It instead starts above the text and ends below, centering the line around the cap height.

p {
  line-height: 1.5;
  font-size: 2em;
}

Font weight and style

The font-weight property accepts both keywords (bold | bolder | lighter) and numeric values (100-900). The font-style property accepts the keywords normal | italic | oblique.

If the specified font doesn't include the declared font weight or style, the browser will try to recreate the weight by outlining the font or the style by slanting the characters.

Alignment

The text-align property sets the alignment of text. The possible values are left | right | center | justify.

<p class="left">
  This text is left aligned: …
</p>
<p class="right">
  This text is right aligned: …
</p>
<p class="center">
  This text is center aligned: …
</p>
<p class="justify">
  This text is justified: …
</p>

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.justify {text-align: justify;}

Letter and word spacing

Adapt the spacing between letters and words using the letter-spacing and word-spacing properties.

<p class="letter-spacing">
  This text has letter spacing:…
</p>
<p class="word-spacing">
  This text has word spacing: …
</p>

.letter-spacing {letter-spacing: 0.5em;}
.word-spacing {word-spacing: 0.5em;}

Further styling

Text indentation

The text-indent property sets the indentation of the first line of the text. The value can be both negative or positive.

<p class="indent-in">Aliquip laborum …</p>
<p class="indent-out">Aliquip laborum …</p>

p {padding-left: 3ch;}
.indent-in {text-indent: 3ch;}
.indent-out {text-indent: -3ch;}

Text transformation

The text-transform property changes the case of the text. The possible values are none | capitalize | uppercase | lowercase.

<p class="capitalize">This text is capitalized</p>
<p class="uppercase">This text is uppercase</p>
<p class="lowercase">This text is lowercase</p>

.capitalize {text-transform: capitalize;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}

Text decoration

You can add lines running under, over, or through the text using the text-decoration property. For basic styling, you can use the shorthand property, but for more control over the appearance, you can use the individual properties: text-decoration-line for the line type, text-decoration-style for the line style, text-decoration-color for the line colour, and text-decoration-thickness for the line width.

<p class="underline wavy">
  This text is underlined with a wavy line.
</p>
<p class="underline double">
  This text is underlined with a double line.
</p>
<p class="overline solid">
  This text is overlined with a normal line.
</p>
<p class="line-through dotted red">
  This text is line-through with a red dotted line.
</p>

.underline {text-decoration-line: underline;}
.wavy {text-decoration-style: wavy;}
.double {text-decoration-style: double;}
.overline {text-decoration-style: solid;}
.dotted {text-decoration-style: dotted;}
.line-through {text-decoration-line: line-through;}
.red {text-decoration-color: red;}

Text shadow

You can add one or more shadows to text by using the text-shadow property. The position of the shadow is defined by the first two values (x-offset and y-offset). The third and fourth values are optional, they define the blur radius and the spread radius, respectively. The color of the shadow is defined by the last value. To add multiple shadows, separate each shadow statement with a comma.

<p class="sharp-shadow">Hamburger</p>
<p class="glow-pink">Hamburger</p>
<p class="multiple-shadow">Hamburger</p>

.sharp-shadow {text-shadow: -4px 4px lightgreen;}
.glow-pink {text-shadow: 4px 4px 8px deeppink;}
.multiple-shadow {text-shadow: 4px 4px deeppink, -4px 4px lightgreen;}

Text stroke

The -webkit-text-stroke property is used to outline text. The first value defines the width of the stroke, the second value defines its color. The stroke grows around the text, spreading both inside and outside the text.

<p class="outlined">Hamburger</p>

.outlined {-webkit-text-stroke: 2px deeppink;}

Variable fonts and open type features

Adjusting font axes

The font-variation-settings property is used to adjust the font axes. The first value is the axis name, the second value is the value to set. Axis names are defined by the typeface designer, they can therefor be anything. There are five standard axes defined by the OpenType specification:

• wght – Weight
• wdth – Width
• slnt – Slant
• ital – Italic
• opsz – Optical size

<h1 class="animate-weight">Hamburger</h1>
<h1 class="animate-slant">Hamburger</h1>

@font-face {
  font-family: "Pelikan Variable";
  src: url("/assets/fonts/ABCPelikanVariableVF-Trial.woff2") format("woff2"),
  url("/assets/fonts/ABCPelikanVariableVF-Trial.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.animate-weight {animation: animate-weight 1s ease-in-out alternate infinite;}
.animate-slant {animation: animate-slant 1s ease-in-out alternate infinite;}

@keyframes animate-weight {
  from {font-variation-settings: "wght" 200;}
  to {font-variation-settings: "wght" 900;}
}
@keyframes animate-slant {
  from {font-variation-settings: "slnt" 0;}
  to {font-variation-settings: "slnt" -14;}
}

The range of values for each axis changes depending on the typeface. Typically, the wght axis ranges from 100 to 900, the wdth axis ranges from 50 to 200, and the slnt axis ranges from -90 to 90. The ital axis is either 0 or 1, and the opsz axis ranges from 6 to 144.

Open type features

The font-feature-settings property is used to enable or disable OpenType features. The first value is the feature name, the second value is the value to set. Feature names are defined by the typeface designer, they can therefore be anything. Just like for variable axes, you can enable multiple OpenType features by separating them with a comma. There are many standard features defined by the OpenType specification, here are a few of them:

• ssXX – Stylistic set number XX
• smcp – Small caps
• c2sc – Small caps from capitals
• zero – Slashed zero
• hist – Historical forms
• liga – Standard ligatures
• tnum – Tabular figures
• frac – Fractions
• swsh – Swash
• salt – Stylistic alternates

<p>0123456789</p>
<p class="tabular-number">0123456789</p>
<p class="zero-slashed">0123456789</p>
<p class="oldstyle-figures">0123456789</p>

p {font-feature-settings: initial;}
.tabular-number {font-feature-settings: "tnum";}
.zero-slashed {font-feature-settings: "zero";}
.oldstyle-figures {font-feature-settings: "onum";}