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.

css

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.

css

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:

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}

Open demo in new tab

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

css

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

Open demo in new tab

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}

Open demo in new tab

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}

Open demo in new tab

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}

Open demo in new tab

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.

Open demo in new tab

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 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,

Open demo in new tab

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