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:

css

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

Further customizations

After setting the decoration line, you can further customize it by setting a color using the text-decoration-color property.

css

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

Customize its thickness using the text-decoration-thickness property.

css

1p {
2  text-decoration-line: underline;
3  text-decoration-color: red;
4  text-decoration-thickness: 5px;
5}

Or use the text-decoration-style property to define a style, such as dotted, wavy, and so on.

css

1p {
2  text-decoration-line: underline;
3  text-decoration-color: red;
4  text-decoration-style: wavy;
5}

When the text-decoration-line is set to underline, you can customize its offset using text-underline-offset.

css

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

The shorthand property

This seems like a lot of work for just a decorative line. Luckily, CSS offers a shortcut property, text-decoration, which allows you to define the type, style, thickness, and color simultaneously. It follows the syntax shown below:

css

1text-decoration: <text-decoration-line> <text-decoration-style>
2  <text-decoration-color> <text-decoration-thickness>;

css

1p {
2  text-decoration: underline wavy red 2px;
3}

However, please note that the text-decoration shorthand with multiple values is not yet supported with Safari. You must use the individual properties discussed above if your webpage needs to be compatible with the browser.

Text shadow

You can also add shadows to the text for more creative effects using the text-shadow property.

text-shadow accepts a list of values with the following syntax:

css

1text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Text transform

Lastly, it is also possible to transform the texts.

As we've explained at the very beginning of this course, for a dynamic web application, the information is stored in the database. When the user makes a request, the corresponding data will be retrieved.

But there is a problem, sometimes you need to display the text in upper case letters, and sometimes you need lower case letters, and the retrieved data might not always match the requirement, because the data might be provided by other users, like a comment, or a guest article.

In this case, you could utilize the text-transform property to transform the texts into the desired form. For example,

capitalize will transform the first letter of every word into uppercase letters.

Prev Next