DEV Community

Cover image for How to Customize Texts Using CSS
TheDevSpace
TheDevSpace

Posted on • Originally published at thedevspace.io

How to Customize Texts Using CSS

#codenewbie #html #css #webdev

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

This lesson discusses how to customize the texts using CSS. Typographic properties in CSS can be divided into two groups:

Font properties control the appearance of the font itself, such as the size, weight, and more.

  • font-family: Specifies the font family to be used for the text.
  • font-size: Defines the size of the font.
  • font-weight: Controls the thickness or boldness of the font.
  • font-style: Determines the style of the font, such as normal, italic, or oblique.
  • font-variant: Allows you to set small-caps or normal text. Small-caps display lowercase letters as smaller versions of uppercase letters.

Text properties control how the text is displayed, such as text decoration (underline, strike-through...), upper/lowercase, and so on.

  • text-decoration: Adds decorative effects to text, such as underline, overline, line-through, or none to remove decorations.
  • text-shadow: Adds a shadow effect to text, enhancing its visual appeal.
  • text-transform: Controls the capitalization of text, allowing you to change text to uppercase, lowercase, or capitalize the first letter of each word.

We'll start with the font properties.

Changing font size

Most fonts comes in various styles, weights, and sizes.

Font variants

The font properties allow you to specify which variant you wish to use. For instance, you can change the font size using the font-size property:

p {
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

When defining font size, the unit px (pixels) is commonly used, but there are some relative units available that offer more flexibility and scalability.

The most commonly used ones are em and rem. These units are relative to other font sizes, making them ideal for creating responsive designs. For instance, em is relative to the font size of the parent element:

<body>
  <p class="p1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
    reprehenderit?
  </p>
  <div>
    <p class="p2">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, libero.
    </p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode 
div {
  font-size: 10px;
}

p {
  font-size: 2em;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

In this example, we have two <p> elements, p1 and p2, and their font sizes are defined to be twice the size of their parents (2em).

em unit

p1's parent is <body>, whose font size is not defined in this case. When not defined, the font size will be set to 16px by default, which means p1 will be 32px.

The parent of p2 is <div>, whose font size is defined as 10px, which makes p2 to be 20px.

rem unit

rem, on the other hand, is relative to the root element. This will give you a consistent reference across the entire HTML document, making it the most popular method for defining font size.

➡️ View Code Demo

Font weight

You can also define the font weight, the thickness of the strokes, using the font-weight property. The accepted values include lighter, normal, bold, bolder.

p {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

font weight

Alternatively, you can use numeric values 100, 200, and up to 900, with 100 being the lightest and 900 being the boldest. However, you should know that many fonts do not have this many variants. You must ensure the fonts you are using have the variants you need.

p {
  font-weight: 800;
}
Enter fullscreen mode Exit fullscreen mode

font variants

➡️ View Code Demo

Font style

The font-style is used to define italic text. It can be either normal, italic, or oblique. oblique is similar to italic but less supported, so it is rarely used.

p {
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

italic texts

The reason that oblique exists is that, if the browser supports it, it allows you to define an angle, which specifies precisely how much you want the letters to tilt.

➡️ View Code Demo

Font variant

Lastly, the font-variant property defines whether or not the text should be displayed in small-caps form, where all lowercase letters are converted to uppercase, but smaller.

p {
  font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

small caps

Text decoration

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

<p>Lorem ipsum dolor sit amet consectetur.</p>
Enter fullscreen mode Exit fullscreen mode 
p {
  text-decoration-line: underline;
}
Enter fullscreen mode Exit fullscreen mode

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

p {
  text-decoration-line: overline;
}
Enter fullscreen mode Exit fullscreen mode

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

p {
  text-decoration-line: line-through;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

The text-decoration-line property also allows you to specify multiple decoration lines by separating them with spaces:

p {
  text-decoration-line: underline overline;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

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

p {
  text-decoration-line: underline;
  text-decoration-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Or customize its thickness using the text-decoration-thickness property.

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}
Enter fullscreen mode Exit fullscreen mode

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

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

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

p {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

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:

text-decoration: <text-decoration-line> <text-decoration-style>
  <text-decoration-color> <text-decoration-thickness>;
Enter fullscreen mode Exit fullscreen mode 
p {
  text-decoration: underline wavy red 2px;
}
Enter fullscreen mode Exit fullscreen mode

➡️ View Code Demo

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.

➡️ View Code Demo

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

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;
Enter fullscreen mode Exit fullscreen mode

Text transform

Lastly, the text-transform property allows you to transform the texts into uppercase, lowercase, or capitalize the first letter of each word.

➡️ View Code Demo

Further readings

Top comments (0)

Read next

dace profile image

[jan2025] thm.jrpt-path. 3/n

ckq -

alisamir profile image

Frontend Performance Optimization: A Comprehensive Guide 🚀

Ali Samir -

ajk-essential profile image

Observing position-change of HTML elements using Intersection Observer

AJK-Essential -

web3devint profile image

Web3 Use Case: Decentralized Charity Fund Management

Web3Dev -