How to Customize Texts on Your Website

Typography

Typography refers to the styling and arrangement of texts in order to improve readability and user experience. Texts are almost everywhere on a webpage. They could be the headings (<h1>-<h6>), the paragraphs (<p>), lists (<li>), and so on.

In the field of web design, typography can be roughly divided into two topics, font related CSS properties, such as font-family, font-style, font size, and so on.

css

1p {
2  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
3  font-size: 1rem;
4  font-style: italic;
5}

And also text related CSS properties such as text spacing, text alignment, text wrap, and more.

css

1p {
2  letter-spacing: 0.025em;
3  text-align: right;
4  text-decoration-line: underline;
5}

We will discuss all of them in detail in the next few lessons.

Text decoration

We'll start with text decorations, which defines decorative lines you add to the plain text. For example, by setting the text-decoration-line property to underline, you can add an underline to the text like this:

html

1<p>Lorem ipsum dolor sit amet consectetur.</p>

css

1p {
2  text-decoration-line: underline;
3}

Other possible values include overline, which is a line displayed over the text.

css

1p {
2  text-decoration-line: overline;
3}

Or line-through, which is a line displayed through the text.

css

1p {
2  text-decoration-line: line-through;
3}

The text-decoration-line property also allows you to specify multiple decoration lines like this: