How to Customize Texts in CSS

Text is one of the most important elements on a webpage, as the majority of information on the webpage is expressed in the form of texts. As a result, customizing the texts so that it is readable and visually appealing is a very important topic in modern web design.

In the next a few lessons, we are going to cover some of the tools you may use to customize the texts using CSS.

What is 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.

CSS offers various properties that allow you to customize and refine the appearance of texts. These properties can be roughly categorized into text related CSS properties, which focus on text layout and presentation, such as spacing, alignment, wrapping, and decorations like underlining or line-through.

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

And also font related CSS properties, which control the visual style of the font itself, such as font-family, font-style, font-size, and so on.

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

Text decoration

In this lesson, we'll start with text decorations, which defines decorative lines you can 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:

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

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

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

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

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

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

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

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.

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

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

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.

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.

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:

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

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:

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 data stored in the database might not always match the requirement, as they might be provided by users, such as 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.