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. |
tip Use | 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. |
| 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. |
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.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Tweet this article