CSS Typography

CSS Typography | What is Typography in CSS? | Typography Properties & Values

by

In this tutorial, you will be going to learn completely about CSS Typography and its properties with syntax, values, and some of the example programs. Let’s dive into this tutorial on typography in CSS for better knowledge & fast learnings.

Also Check: 

What is Typography?

First and foremost, typography is about usability. Type is the user interface for conveying information, and conveying information is what we’re here to do on the web. There are many levers we can pull to affect the usability of reading text, and only by being deliberate about these can we create a pleasant experience for our users.

Typography Properties in CSS

Properties for typography are listed below:

text-transform

Transform the case of an element.

The values are:

  • capitalize to make the first letter uppercase.
  • uppercase to make all text uppercase.
  • lowercase to make all text lowercase.
  • none to disable transforming the text, used to avoid inheriting the property.

Example:

p {
  text-transform: uppercase;
}

text-decoration

Used to add decoration to the texts, like:

  • underline
  • overline
  • line-through
  • blink
  • none

Example:

p {
  text-decoration: underline;
}

/* OR */

p {
  text-decoration: underline dashed yellow;  /* Valid are solid, double, dotted, dashed, wavy */
}

Instead of one line, we can use specific properties of text-decoration. Like:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

text-align

Specifies the alignment of the text that will be written. The default value is left, but can override with:

  • start
  • end
  • left
  • right
  • center
  • justify

Example:

p {
  text-align: center;
}

vertical-align

Used only on elements that are arranged in inline.

Specifies how the elements are vertically aligned.

The values that we can use here are:

  • baseline (the default), aligns the baseline to the baseline of the parent element.
  • sub makes an element subscripted, simulating the sub HTML element result.
  • super makes an element superscripted, simulating the sup HTML element result.
  • top align the top of the element to the top of the line.
  • text-top align the top of the element to the top of the parent element font.
  • middle align the middle of the element to the middle of the line of the parent.
  • bottom align the bottom of the element to the bottom of the line.
  • text-bottom align the bottom of the element to the bottom of the parent element font.

line-height

Help us to change the height of the line. The height of the lines refers to the empty space between two lines.

p {
  line-height: 0.9rem;
}

text-indent

Just like starting a paragraph, we can indent the first line of it.

p {
  text-indent: -10px; /* can use %, rem, em */
}

text-align-last

We can change the behavior of the line of any paragraph (follows text-align property) by using this property.

p {
  text-align-last: right;
}

word-spacing

Can modify the spaces between words.

The default value is normal.

p {
  word-spacing: 2px; /* can use px, rem, em */
}

letter-spacing

Can modify the spaces between each letter of a word.

The default value is normal.

p { letter-spacing: 2px; /* can use px, rem, em */ }

text-shadow

Use this property to apply a shadow effect over texts.

The shadow can be applied in both the X and Y axis but with an offset. Also, we can add a blur effect.

If no color of the shadow is specified, it will use the color of the text.

p {
  text-shadow: 0.2px 2px;
}

white-space

White spaces are the empty spaces that are added after an indent or next to a line.

Values that collapse whites spaces are:

  • normal Adds new lines when necessary as the text reaches the container end.
  • nowrap Do not add a new line when the text reaches the end of the container and suppresses any line break added to the text.
  • pre-line Adds new lines when necessary as the text reaches the container end.

Values that preserve whites spaces are:

  • pre Do not add a new line when the text reaches the end of the container but preserves the line break added to the text.
  • pre-wrap Adds new lines when necessary as the text reaches the container end.

tab-size

Determines the size/width of the tab character.

The default value is 8 but can set any values of supported units or an integer.

p {
  tab-size: 1;
}

writing-mode

The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language.

Available values are:

  • horizontal-tb (default).
  • vertical-rl content is laid out vertically. New lines are put on the left of the previous.
  • vertical-lr content is laid out vertically. New lines are put on the right of the previous.

hyphens

The hyphens property controls hyphenation of text in block-level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

Values are:

  • none (default).
  • manual only add a hyphen when there is already a visible hyphen or a hidden hyphen (a special character).
  • auto add hyphens when determined the text can have a hyphen.

text-orientation

The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode.

Valid values are:

  • mixed is the default, and if a language is vertical (like Japanese) it preserves that orientation while rotating text written in western languages.
  • upright makes all text be vertically oriented.
  • sideways makes all text horizontally oriented.

direction

The direction property in CSS sets the direction of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

The valid values are:

  • ltr – Left to Right, the default
  • rtl – Right to Left
  • inherit – inherits its value from the parent element
p {
  direction: rtl;
}

word-break

The word-break property in CSS can be used to change when line breaks ought to occur.

Values:

  • normal: use the default rules for word breaking.
  • break-all: any word/letter can break onto the next line.
  • keep-all: for Chinese, Japanese, and Korean text words are not broken. Otherwise, this is the same as normal.

overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place.

.example {
  overflow-wrap: break-word;
}

to break it at the exact length of the line, or

p {
  overflow-wrap: anywhere;
}

word-breakproperty is as same as this property. We might want to pick this one on western languages, as word-breakhas a unique approach for non-western languages.