Text and typography
In this module, learn how to style text on the web.

Text is one of the core building blocks of the web.
When making a website, you don’t necessarily need to style your text; HTML actually has some pretty reasonable default styling.
However, text will likely make up the majority of your website, so it’s worthwhile to add some styling to spruce it up. By changing a few basic properties, you can significantly improve the reading experience for your users!
In this module, we’ll first look at some fundamental CSS font properties like font-family
, font-style
, font-weight
, and font-size
. Then, we’ll dive into properties that affect paragraphs of text, such as text-indent
and word-spacing
. The module finishes with some more advanced topics such as variable fonts and pseudo-elements.
Change the typeface #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use font-family
to change the typeface of your text.
The font-family
property accepts a comma-separated list of strings, either referring to specific or generic font families. Specific font families are quoted strings, such as “Helvetica”, “EB Garamond”, or “Times New Roman”. Generic font families are keywords such as serif
, sans-serif
, and monospace
(find the full list of options on MDN). The browser will display the first available typeface from the provided list.
When using font-family
, you should specify at least one generic font family in case the user’s browser doesn’t have your preferred fonts. Generally, the fallback generic font family should be similar to your preferred fonts: if using font-family: "Helvetica"
(a sans-serif font family), your fallback should be sans-serif
to match.
Use italic and oblique fonts #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use font-style
to set whether text should be italic or not. font-style
accepts one of the following keywords: normal
, italic
, and oblique
.
Make text bold #
- Chrome 2, Supported 2
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use font-weight
to set the “boldness” of text. This property accepts keyword values (normal
, bold
), relative keyword values (lighter
, bolder
), and numeric values (100
to 900
).
The keywords normal
and bold
are equivalent to the numeric values 400
and 700
, respectively.
The keywords lighter
and bolder
are calculated relative to the parent element. See MDN’s Meaning of Relative Weights for a handy chart showing how this value is determined.
Change the size of text #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use font-size
to control the size of your text elements. This property accepts length values, percentages, and a handful of keyword values.
In addition to length and percentage values, font-size
accepts some absolute keyword values (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) and a couple of relative keyword values (smaller
, larger
). The relative values are relative to the parent element’s font-size
.
Change the space between lines #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use line-height
to specify the height of each line in an element. This property accepts either a number, length, percentage, or the keyword normal
. Generally, it’s recommended to use a number instead of a length or percentage to avoid issues with inheritance.
Change the space between characters #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use letter-spacing
to control the amount of horizontal space between characters in your text. This property accepts length values such as em
, px
, and rem
.
Note that the specified value increases the amount of natural space between characters. In the demo below, try selecting an individual letter to see the size of its letterbox and how it changes with letter-spacing
.
Change the space between words #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use word-spacing
to increase or decrease the length of space between each word in your text. This property accepts length values such as em
, px
, and rem
. Note that the length you specify is for extra space in addition to the normal spacing. This means that word-spacing: 0
is equivalent to word-spacing: normal
.
font
shorthand #
You can use the shorthand font
property to set many font-related properties at once. The list of possible properties are font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
, and line-height
.
Check out MDN’s font
article for the specifics of how to order these properties.
Change the case of text #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use text-transform
to modify the capitalization of your text without needing to change the underlying HTML. This property accepts the following keyword values: uppercase
, lowercase
, and capitalize
.
Add underlines, overlines, and through-lines to text #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use text-decoration
to add lines to your text. Underlines are most commonly used, but it’s possible to add lines above your text or right through it!
The text-decoration
property is shorthand for the more specific properties detailed below.
The text-decoration-line
property accepts the keywords underline
, overline
, and line-through
. You can also specify multiple keywords for multiple lines.
The text-decoration-color
property sets the color of all decorations from text-decoration-line
.
The text-decoration-style
property accepts the keywords solid
, double
, dotted
, dashed
, and wavy
.
The text-decoration-thickness
property accepts any length values and sets the stroke width of all decorations from text-decoration-line
.
The text-decoration
property is a shorthand for all the above properties.
Add an indent to your text #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use text-indent
to add an indent to your blocks of text. This property takes either a length (for example, 10px
, 2em
) or a percentage of the containing block’s width.
Deal with overflowing or hidden content #
- Chrome 1, Supported 1
- Firefox 7, Supported 7
- Edge 12, Supported 12
- Safari 1.3, Supported 1.3
Use text-overflow
to specify how hidden content is represented. There are two options: clip
(the default), which truncates the text at the point of overflow; and ellipsis
, which displays an ellipsis (…) at the point of overflow.
Control white-space #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
The white-space
property is used to specify how whitespace in an element should be handled. For more details, check out the white-space
article on MDN.
white-space: pre
can be useful for rendering ASCII art or carefully indented code blocks.
Control how words break #
- Chrome 1, Supported 1
- Firefox 15, Supported 15
- Edge 12, Supported 12
- Safari 3, Supported 3
Use word-break
to change how words should be “broken” when they would overflow the line. By default, the browser will not split words. Using the keyword value break-all
for word-break
will instruct the browser to break words at individual characters if necessary.
Change text alignment #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use text-align
to specify the horizontal alignment of text in a block or table-cell element. This property accepts the keyword values left
, right
, start
, end
, center
, justify
, and match-parent
.
The values left
and right
align the text to the left and right sides of the block, respectively.
Use start
and end
to represent the location of the start and end of a line of text in the current writing mode. Therefore, start
maps to left
in English, and to right
in Arabic script which is written right to left (RTL). They're logical alignments, learn more in our logical properties module.
Use center
to align the text to the center of the block.
The value of justify
organizes the text and changes word spacings automatically so that the text lines up with both the left and right edges of the block.
Change the direction of text #
- Chrome 2, Supported 2
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
Use direction
to set the direction of your text, either ltr
(left to right, the default) or rtl
(right to left). Some languages like Arabic, Hebrew, or Persian are written right to left, so direction: rtl
should be used. For English and all other left-to-right languages, use direction: ltr
.
Change the flow of text #
- Chrome 48, Supported 48
- Firefox 41, Supported 41
- Edge 12, Supported 12
- Safari 10.1, Supported 10.1
Use writing-mode
to change the way text flows and is arranged. The default is horizontal-tb
, but you can also set writing-mode
to vertical-lr
or vertical-rl
for text that you want to flow horizontally.
Change the orientation of text #
- Chrome 48, Supported 48
- Firefox 41, Supported 41
- Edge 79, Supported 79
- Safari 14, Supported 14
Use text-orientation
to specify the orientation of characters in your text. The valid values for this property are mixed
and upright
. This property is only relevant when writing-mode
is set to something other than horizontal-tb
.
Add a shadow to text #
- Chrome 2, Supported 2
- Firefox 3.5, Supported 3.5
- Edge 12, Supported 12
- Safari 1.1, Supported 1.1
Use text-shadow
to add a shadow to your text. This property expects three lengths (x-offset
, y-offset
, and blur-radius
) and a color.
Check out the text-shadow
section of our module on Shadows to learn more.
Variable fonts #
Typically, “normal” fonts require importing different files for different versions of the typeface, e.g. bold, italic, or condensed. Variable fonts are fonts that can contain many different variants of a typeface in one file.
Check out our article on Variable Fonts for more details.
Pseudo-elements #
::first-letter
and ::first-line
pseudo-elements #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
The ::first-letter
and ::first-line
pseudo-elements target a text element’s first letter and first line respectively.
::selection
pseudo-element #
- Chrome 1, Supported 1
- Firefox 62, Supported 62
- Edge 12, Supported 12
- Safari 1.1, Supported 1.1
Use the ::selection
pseudo-element to change the appearance of user-selected text.
When using this pseudo-element, only certain CSS properties can be used: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
font-variant #
- Chrome 1, Supported 1
- Firefox 1, Supported 1
- Edge 12, Supported 12
- Safari 1, Supported 1
The Which of the following keywords can be used as a Correct! Correct! Try again. Try again. Correct! Try again. Which statement is used to convert the first letter of each word to uppercase? e.g. Try again. Try again. Correct! Try again. Try again. True or False: Use Try again. Correct! Which CSS property can be used to change the space between lines of text? Try again. Try again. Leading is the correct term for the space between lines in typography, but it's not a valid CSS property. Try again. Correct!font-variant
property is a shorthand for a number of CSS properties that let you choose font variants like small-caps
and slashed-zero
. The CSS properties this shorthand includes are font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
, and font-variant-numeric
. Check out the links on each property for more details about its usage.font-family
generic fallback?serif
monospace
italic
sci-fi
sans-serif
helvetica
italic
is a valid keyword for font-style
, not font-family
.fantasy
is a valid generic fallback for font-family
, though."Helvetica"
is not a generic keyword, but instead refers to a specific font family.This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
text-orientation
to align text to the left, right, or center.text-orientation
changes the rotation of letters in a line.text-orientation
changes the rotation of letters in a line. Use text-align
to align text to the left, right, or center (and more!).line-spacing
leading
baseline-distance
line-height
Resources #
- Font best practices discusses importing fonts, rendering fonts, and other best practices for using fonts on the web.
- MDN Fundamental text and font styling.