text- vs font- Properties in CSS – Learn 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 Properties	CSS 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) CodeSweetly 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.

CodeSweetly 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.

text- vs font- Properties in CSS – Learn the Difference

text-​

font-​

CSS Text and Font Properties​

Overview​

`text-`

`font-`

CSS Text and Font Properties

Overview