Skip to main content

text- vs font- Properties in CSS – What's the Difference?

What is the difference between a text- and a font- property in CSS? Let's find out.

text-

A CSS text- property specifies a text's layout on the page.

For instance, to specify a text's horizontal alignment, you will use the text-align property like so:

h1 {
text-align: center;
}

font-

A CSS font- property specifies a text's design.

For instance, to specify a text's size, you will apply a font-size property like so:

h1 {
font-size: 4.5rem;
}

CSS Text and Font Properties

Below are the CSS text and font properties.

CSS Text PropertiesCSS Font Properties

text-align – Set a text's horizontal alignment.

font-family – Specify a text's font family.

text-align-last – Align a text's last line.

font-feature-settings – Adjust advanced topographical features of an OpenType font.

text-decoration – A shorthand for setting the following properties:

  • text-decoration-line (required)
  • text-decoration-color (required)
  • text-decoration-style (optional)
  • text-decoration-thickness (optional)
tip

Use text-decoration: none to remove the underline decoration from your links (<a> tag elements).

font-kerning – Specify whether the computer should show a text's kerning.

text-decoration-color – Decorate a text's line with a color.

font-size – Set a text's size.

text-decoration-line – Decorate a text with an underline, overline, or line-through.

font-size-adjust – Adjust the size of a text's lowercase characters relative to the current font size.

text-decoration-style – Decorate a text with a solid, double, dotted, dashed, or wavy line style.

font-stretch – Specify how the computer should stretch a text.

text-decoration-thickness – Set a text line's thickness.

font-style – Set a text's style as italic, oblique, or normal.

text-indent – Indent a text's first line.

font-variant – Specify whether lowercase texts should appear in small-caps.

text-justify – Set text-align: justify's justification method.

font-variant-alternates – Set a text's alternate glyphs.

text-orientation – Set writing-mode: vertical-rl's text orientation.

font-variant-caps – Set a text's alternate glyphs for capital letters.

text-overflow – Render overflowed texts as:

  • a clipped text
  • an ellipsis ("...")
  • a custom string

font-variant-east-asian – Set a text's alternate glyphs for East Asian scripts (such as Japanese and Chinese).

text-rendering – Specify if the text rendering engine should optimize speed, legibility, or precision when rendering a text.

font-variant-ligatures – Set a text's ligatures and contextual forms.

text-shadow – Add shadow to a text.

font-variant-numeric – Set the alternate glyphs for numeral texts, fractions, and ordinal markers.

text-transform – Transform a text to uppercase, lowercase, or capitalize.

font-variant-position – Set the alternate glyphs for a superscript or subscript text.

text-underline-position – Set the position of a text's underline.

font-weight – Specify how thick or thin texts should appear.

tip

Use the font property as a shorthand for the following CSS properties:

  • font-stretch (optional)
  • font-style (optional)
  • font-variant (optional)
  • font-weight (optional)
  • font-size (required)
  • line-height (optional and must immediately succeed font-size like this: 2rem/5)
  • font-family (required and must be the last specified value)

Example:

p {
font: condensed italic small-caps bold 2rem/50px cursive;
}

Overview

CSS text- properties format a text's layout while font- properties design the text.

Tweet this article