Text

Typography is an incredibly powerful design feature and, in reality, styling text with CSS is actually simple.

Let's see how.

color

The color CSS property defines the color of the text and looks like this:

color: red;

Alternatively, it can look like this:

color: #f00;

Description

The color property supports all color modes, HEX, RGB, RGBa, HSL, HSLs, and color name.

CSS:

/*Color Name*/
.element { color: red; }
/*HEX*/
.element { color: #f00; }
/*RGB*/
.element { color: rgb(255, 0, 0); }
/*RGBa - Color has 50% opacity*/
.element { color: rgba(255, 0, 0, .5); }
/*HSL*/
.element { color: hsl(0, 100%, 50%); }
/*HSLa - Color has 50% opacity*/
.element { color: hsla(0, 100%, 50%, .5); }

text-align

The text-align CSS property defines the alignment of the text, and it looks like this:

text-align: center;

Description

The text can be centered, left-aligned, right-aligned, and fully-justified.

The text-align property only works on inline elements. If this property is applied to a block-level element, it will not work on the element itself, but it will work on its content.

CSS:

/*Centered text*/
.element { text-align: center; }
/*Left aligned text*/
.element { text-align: left; }
/*Right aligned text*/
.element { text-align: right; }
/*Fully justified text*/
.element { text-align: justify; }

text-decoration

The text-decoration CSS property defines several formatting features for the text, and it looks like this:

text-decoration: underline;

Description

The text-decoration property accepts the following keyword values: underline, overline, line-through, none, and blink.

This property is also the shorthand for the text-decoration-line, text-decoration-color, and text-decoration-style properties.

It can accept one, two, or three values in the same declaration if used as a shorthand.

CSS:

/*Line above the text*/
.element { text-decoration: overline; }
/*Line under the text*/
.element { text-decoration: underline; }
/*Line across the text*/
.element { text-decoration: line-through; }
/*No underline*/
.element { text-decoration: none; }
/*Blinking text*/
.element { text-decoration: blink; }
/*Shorthand*/

/*Two values*/
.element { text-decoration: underline wavy; }
/*Three values*/
.element { text-decoration: overline dashed yellow; }

text-decoration-line

The text-decoration-line CSS property defines the type of decoration line that a text can have, and it looks like this:

text-decoration-line: overline;

Description

The text-decoration-line property accepts one, two, or three values in a single declaration. The keyword values are the same as in the text-decoration property: underline, overline, line-through, none, and blink.

CSS:

/*One value*/
.element { text-decoration-line: overline; }
/*Two values*/
.element { text-decoration-line: overline underline; }
/*Three values*/
.element { text-decoration-line: overline underline blink; }

text-decoration-color

The text-decoration-color CSS property defines the type of color the text-decoration property can have, and it looks like this:

text-decoration-color: red;

Description

It supports all color modes: HEX, RGB, RGBa, HSL, HSLs, and color name.

CSS:

/*Color Name*/
.element { text-decoration-color: red; }
/*HEX*/
.element { text-decoration-color: #f00; }
/*RGB*/
.element { text-decoration-color: rgb(255, 0, 0); }
/*RGBa - Color has 50% opacity*/ 
.element { text-decoration-color: rgba(255, 0, 0, .5); }
/*HSL*/
.element { text-decoration-color: hsl(0, 100%, 50%); }
/*HSLa - Color has 50% opacity*/
.element { text-decoration-color: hsla(0, 100%, 50%, .5); }

text-decoration-style

The text-decoration-style CSS property defines the type of line the text-decoration property can have, and it looks like this:

text-decoration-style: dotted;

Description

The text-decoration-style property supports the following keyword values: dashed, dotted, double, solid, and wavy.

CSS:

.element {
  text-decoration-style: wavy;
}

text-indent

The text-indent CSS property defines the space to the left (indentation) of the first line of text in an element, and it looks like this:

text-indent: red;

Description

It accepts length and percentage values. Negative values are valid.

CSS:

.element {
  text-indent: 50px;
}

text-overflow

The text-overflow CSS property defines how text that is bleeding outside of a container should be clipped, and it looks like this:

text-overflow: ellipsis;

Description

For this property to work, two other properties should have to be declared: overflow: hidden; and white-space: nowrap;.

There are two keyword values: clip and ellipsis.

clip

This cuts the text exactly at the edge of its parent container. This may cause the last character to be clipped at any point showing only a portion of it.

ellipsis

This adds an ellipsis character "…" at the end of the line of text.

CSS:

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-rendering

The text-rendering CSS property allows us to define the quality of the text over speed/performance and it looks like this:

text-rendering: optimizeLegibility;

Description

Depending on the font, when this property is applied, we can see benefits like better kerning and better ligatures.

However, since this CSS property is actually an SVG property and is not part of any CSS standard, browsers and operating systems apply this property at their own discretion, which in turn may not yield the desired improvements from one browser and/or platform to another.

In addition to this, some small screen devices have serious performance issues when they encounter the text-rendering CSS property, especially older iOS and Android devices.

Tip

Use the text-rendering CSS property with extreme caution and make sure you run all pertinent tests.

This property supports four values: auto, optimizeSpeed, optimizeLegibility, and geometricPrecision.

auto

This is the default value. The browser tries to make the best educated guess as to how to render the text in order to optimize for speed, legibility, and geometric precision.

Remember, each browser interprets this property differently.

optimizeSpeed

The browser favors rendering speed over legibility and geometric detail. It disables kerning and ligatures.

optimizeLegibility

The browser favors legibility over rendering speed and geometric detail. It enables kerning and some optional ligatures. Keep in mind that if the browser tries to use any kerning and ligatures, this information needs to be contained in the font file, otherwise we won't see the effects of such features.

geometricPrecision

The browser favors geometric detail over legibility and rendering speed. This property helps when scaling fonts.

For example, the kerning in some fonts does not scale correctly, so when we apply this value, the browser is capable of keeping the text looking nice.

CSS:

.element {
  text-rendering: geometricPrecision;
}

text-shadow

The text-shadow CSS property applies a drop shadow to the text, and it looks like this:

text-shadow: 5px -2vw .2cm black;

Description

This property can accept two, three, or four values in the same declaration. The first length value in the declaration will always be for the x-offset value and the second length value for the y-offset value.

These are the four values it supports: x-offset, y-offset, color, and blur.

• x-offset: This sets the horizontal distance of the shadow from the text. It's declared as a length value (px, em, in, mm, cm, vw, and so on). Negative values are valid. This value is mandatory.
• y-offset: This sets the vertical distance of the shadow from the text. It's declared as a length value (px, em, in, mm, cm, vw, and so on). Negative values are valid. This value is mandatory.
• color: This is the color of the text shadow. It supports all color modes: HEX, RGB, RGBa, HSL, HSLs, and color name. This value is optional. If it is not specified, the default color will be the same color as the text itself.
• blur: This is the smudge effect. It's declared as a length value (px, em, in, mm, cm, vw, and so on). It supports all color modes: HEX, RGB, RGBa, HSL, HSLs, and color name. This value is optional. If it is not specified, the default value is zero (0).

CSS:

/*2 values: x-offset and y-offset*/
.element { text-shadow: 5px 10px; }
/*3 values: x-offset, y-offset and blur. Color value defaults to the font color*/
.element { text-shadow: 5px 2vw 5px; }
/*4 values: x-offset, y-offset, blur and color name*/
.element { text-shadow: 5px -2vw .2cm black; }

text-transform

The text-transform CSS property controls the capitalization of text, and it looks like this:

text-transform: capitalize;

Description

The text-transform property supports the following four keyword values: none, capitalize, uppercase, and lowercase.

• none: This is the default value. No capitalization should be applied to the element.
• capitalize: This capitalizes the first letter of each word. This property is smart enough to ignore any special characters or symbols at the beginning of the line and capitalize the first letter of the first word.
• uppercase: This changes all the text to upper case/capitals. This property can also ignore special characters or symbols at the beginning of the line.
• lowercase: This makes all the text lowercase. This property can also ignore special characters or symbols at the beginning of the line.

text-underline-position

The text-underline-position CSS property defines the location of the underline on elements that have the text-decoration property declared, and it looks like this:

text-underline-position: left;

Description

The text-underline-position property supports four keyword values: auto, left, right, and under.

auto

This is the default value. This property allows the browser to decide where to place the underline, whether at the base line of the text or below it.

left

This is only for vertical writing modes. It places the underline to the left of the text.

right

This is only for vertical writing modes. It places the underline to the right of the text.

under

This value places the underline below the base line of the text, so it won't cross any descender (it supports values like q, p, y, and so on). This is helpful in text that has mathematical and chemical formulas that use a lot of subscripts, so the underline doesn't interfere with certain characters and make such formulas confusing or difficult to read.

CSS:

.element {
  text-underline-position: left;
}

direction

The direction CSS property sets the direction of the text. Left to right for western languages and other similar languages and right to left for languages like Arabic or Hebrew. It looks like this:

direction: rtl;

Description

The text direction is typically defined in the HTML via the dir attribute rather than via CSS.

The direction CSS property is not inherited by table cells. So, in addition to this, it's recommended to set the direction of the text via the dir attribute in the HTML document to maintain complete cascading support if the CSS files do not load.

This property accepts two keyword values, ltr and rtl, which mean left to right and right to left.

CSS:

.element {
  direction: rtl;
}