Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

19 Great Ways to Customize and Style Text in CSS

This is the perfect post if you’ve ever wondered “How do you change text in CSS?” We’ll cover the various ways we can change css text style on a website in the sections that follow.

Why does this matter?

Since typography plays a significant role in web design. The ability to style text on your website so that it complements the rest of your identity is crucial, much like when utilizing custom fonts.

Fortunately, CSS provides numerous styling choices for this purpose. In this article, we’ll discuss the crucial ones with some less familiar ones.

Here are different ways to change text on web pages using CSS. You can try these out easily using your browser’s tools, even on any webpage that has text.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

Font Family

Let’s start with the “font-family” property. It decides which font your text will show.

It’s pretty easy to use. Below is the accompanying code for the example above.

.p-one {
  font-family: Arial;
}

.p-two {
  font-family: Courier;
}

.p-three {
  font-family: Impact;
}

To change a chosen font, pick the element using a CSS selector, add “font-family”, and put the font name as the value.

The values can be specific font names like “Arial” or “Open Sans”, or they can be general font types like “serif” or “monospace”.

If the value has spaces, like “Times New Roman”, use double quotation marks. If it doesn’t, such as Tahoma or sans-serif, you can skip the quotes.

Creating Font Stacks

You also have the option of creating a font stack where you can define a list of fonts that should be used in a CSS text style declaration for a particular element on a webpage.

This list is prioritized such that if a user doesn’t have the first font specified, the browser moves down the list until it finds a CSS font that is available.

.p-one {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

As seen in the code block above, “Helvetica Neue” is the first choice font.

If the user’s system does not have “Helvetica Neue” it will try to render the text in “Helvetica”.

If neither “Helvetica Neue” nor “Helvetica” is available, it will attempt to use “Arial”.

Finally, if none of the fonts are available, the browser will default to a fallback font which is a generic sans-serif font.

Font Size

Font size determines how large or small the text appears to the default size set by the browser.

In CSS, there are various units used to define font sizes as shown below.

.p-one {
    font-size: 16px;
}

.p-two {
    font-size: 1.2em;
}

.p-three {
    font-size: 1.5rem;
}

.p-four {
    font-size: 120%;
}

Pixels (`px`) is an absolute unit that renders the text at a fixed size of 16px regardless of its context.

Em(`em`) is relative to the font size of the parent element. When an element’s font size is set to 1.2 em value, as shown above, it equals 1.2 times the font size of its parent element.

Rem(`rem`) is relative to the font size of the root element. If the root (usually `<html>`) element has a font size of 16 pixels, this code will set the font size to 1.5 times 16 pixels, which is 24 pixels.

When the font size is defined using percentages in CSS, it’s relative to the font size of the parent container. As seen in the code block above, if the parent element has a font size of 16px, applying the font size of 120% will therefore make the child element’s font size 19.2px (120% of 16px).

The major advantage of using relative units is that it allows for scalability and consistency based on the parent or root element’s font size.

Font Weight

We can use the font weight in CSS to increase and reduce the thickness and boldness of the characters in a text. Font weights are typically defined using numeric values or descriptive keywords.

font-weight: 400;
font-weight: 700;
font-weight: normal;
font-weight: bold;

As seen above, we can use numeric values ranging from 100 to 900 in increments of 100, where 400 is considered normal and 700 is mostly used for bold text.

Descriptive Keywords such as normal, bold, bolder, lighter, etc. The normal keyword is ascribed to 400 and bold to 700.

Font weight allows us to emphasize text by making it stand out. It is mostly used to create a visual hierarchy and differentiate between text content in order of importance. It can also significantly improve the readability and aesthetics of text on a webpage.

Font Style

This is a peculiar way to style text in CSS, it gives us the ability to specify the slant or posture of the font. It helps us add emphasis and alter the visual appearance of text.

font-style: normal;
font-style: italic;
font-style: oblique;

From the code block above we can set the font style of text on a webpage to normal. This is the default value, it specifies that the font should be displayed in the standard fashion.

Another font style that we can use is italic. This particular font style specifies that the text should be displayed in italics, which means the characters are slanted to the right.

Finally, we can add the oblique font style to texts. Similar to italics, it creates a slanted appearance for the text. However, italic fonts are specially made to look slanted, but oblique font style tilts the normal letters instead of having their own special slated design. They simply just lean the characters to the side.

Font Variant

This controls how text characters look within a font family. It lets us tweak how letters appear, like making them small caps or adding special connections between certain letters for a better look.

font-variant: normal;
font-variant: small-caps;

Above we can see the first font variant, which is normal. This is the default setting, showing standard text without any special styles.

Small caps convert all lowercase characters to similar versions of their uppercase letters while keeping the actual uppercase letters the same.

Font Shorthand

This is a way to set multiple font-related properties at once using a single line of code. We can use this style instead of specifying separate properties like font-family, font-size, font-weight, etc, you can use shorthand to define these properties together in a compact form.

Here’s an instance of font shorthand in the following example;

font: font-style font-variant font-weight font-size/line-height font-family;

Each part of the font property represents different font-related properties.

  • font-style: Specifies the font style (normal, italic, oblique)

  • font-variant: Controls text variations like small caps.

  • font-weight: Defines the thickness of the characters (normal, bold, etc)

  • font-size: Sets the size of the font.

  • line-height: Defines the space between lines of text.

  • font-family: Specifies the font family or typeface to use.

In the following example:

font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;

This single line sets the font to italic, small caps, and bold, with a size of 16 pixels, and a line height of 1.5, and uses the “Helvetica” font family or a generic sans serif font if “Helvetica” is unavailable.

Using shorthand can make your CSS code more concise and easier to read and manage by grouping related font properties into one declaration.

Web-Safe Fonts

Web-safe fonts are fonts that are native to different operating systems and web browsers. These fonts are considered safe to use because they are commonly found installed on most devices, and web browsers.

They’re trustworthy fonts like Arial, Helvetica, Times New Roman, and others that are already installed.

Using these fonts is like playing it safe or having a backup plan – you know they’ll show up the same way for most people, no matter what device or browser they’re using. They are reliable and ensure that text looks consistent and readable across the web.

However, nowadays we have options to use more fancy or unique fonts using special services like Google Fonts. These services allow us to use cool, custom fonts in our designs, but sometimes they might not show up the same way for everyone.

Color

We can use the color property to define the text color of characters in HTML. It allows us to set the text color using various formats such as named colors, hexadecimal, RGB, RGBA, HSL, HSLA, etc.

Here are a few examples:

Named colors: Using specific names like red, blue, green

color: red;

Hexadecimal colors: Representing colors using hex value

color: #FFA500;

RGB colors: Defining colors using red, green, and blue values

color: rgb(255, 0, 0);

RGBA colors: Similar to RGB but with an added alpha value for transparency.

color: rgba(0, 255, 0, 0.5);

HSL colors: Defining colors using hue, saturation, and lightness values.

color: hsl(240, 100%, 50%);

HSLA colors: Similar to HSL but with an added alpha for transparency.

color: hsla(120, 100%, 50%, 0.7);

Background Color

The background-color property in CSS sets the background color of an element. It allows us to define the color that appears behind the content of an element, covering the entire space occupied by that element.

Some examples include:

Named colors

background-color: blue;

Hexadecimal colors (hex value)

background-color: #FFA500; /* Orange */

RGB colors

background-color: rgb(255, 0, 0); /* Red */

RGBA colors (with transparency)

background-color: rgba(0, 255, 0, 0.5); /* Semi-transparent green */

Text Transform

The text-transform property in CSS is used to change the appearance of texts. It controls its capitalization where we can make the text appear in all uppercase or lowercase letters, or capitalized letters.

We can use text-transform just like in the following example:

 <body>
     <h1 class="p-one">text styles in CSS</h1>
 </body>

Starting with our HTML, we have a class of “p-one” and add the CSS below. `text-transform: none` is the default setting.

  1. `none`: Leaves the capitalization as it is, which is the default setting.

    <style>
      .p-one {
        text-transform: none;
      }
    </style>
    an image showing the result of adding text-transform: none to a class.
  2. `uppercase`: transforms all texts to uppercase.

    <style>
      .p-one {
        text-transform: uppercase;
      }
    </style>
    an image showing the result of adding text-transform: uppercase to a CSS class which displays the texts in uppercase
  3. `lowercase`: transforms all text into lowercase letters.

    <style>
      .p-one {
        text-transform: lowercase;
      }
    </style>
    an image showing the result of adding text-transform: lowercase to a CSS class which displays the texts in lowercase
  4. `capitalize`: Capitalizes the first character of each word.

    <style>
       .p-one {
       text-transform: capitalize;
     }
    </style>

    This is a handy property to use to adjust the appearance of text without changing the underlying content.

Text Decoration

The text decoration property in CSS is used to add different effects to texts, mostly to decorate or emphasize them in some way.

Let’s take a look at some examples, but before that, let’s write some HTML code with which we’d test our CSS:

<body>
  <h1 class="p-one">text styles in CSS</h1>
</body>

Now, that we’ve written our HTML, let’s go ahead with the CSS examples:

  1. `none`: Removes any text decoration (like underlines or strikes), here’s how it’d look in code:

    <style>
      .p-one {
        text-decoration: none;
      }
    </style>  

    And here’s what the output will look like when viewed on a browser:

    text without any text decoration
  2. `underline`: Adds a line underneath the text.

    <style>
      .p-one {
        text-decoration: underline;
      }
    </style>

    And here’s what the output will look like when viewed on a browser:

    text with an underline text decoration
    <style>
        .p-one {
        text-decoration: overline;
      }
    </style>
  3. `overline`: Adds a line above the text.

    text with an overline text decoration
     <style>
        .p-one {
        text-decoration: line-through;
      }
    </style>
  4. `line-through`: Draws a line through the middle of the text.

    text with a line-through text decoration
    <style>
        .p-one {
        text-decoration: underline overline;
      }
    </style>
  5. `underline overline`: Adds both underline and overline to the text.

    text with an underline and overline text decoration

Text Shadow

The text shadow property allows us to add a shadow effect behind text characters. Similar to box-shadow, this specifically works on texts to cast a shadow behind the shape of the text. The following example will give more clarity.

text-shadow: 2px 2px 4px black;

The values in the text shadow property define the shadow effect:

  • The first value represents the horizontal offset of the shadow.

  • The second value represents the vertical offset of the shadow.

  • The third value specifies the blur radius if the shadow

  • The fourth value defines the color of the shadow.

For instance, the code block above creates a text shadow with a horizontal offset of 2px, a vertical offset of 2px, a blur radius of 4px, and a color of black.

Text Align

In CSS the text-align property helps us decide where we want our text to sit horizontally inside its container. We can make the text move to the left side, right side, center, or spread out evenly to both sides. It’s a way to control where your text ‘sits’ within its container.

Let’s look into some examples, but before that, let’s write some HTML code with which we’d test our CSS:

 <body>
     <h1 class="p-one">text styles in CSS</h1>
 </body>

Now, that we have our HTML, let’s go ahead with the CSS examples:

  1. `left`: Aligns the text to the left end of its container.

    <style>
       .p-one {
        text-align: left;
      }
    </style>

    And here’s what the output will look like when viewed on a browser:

    text at the left part of the page

  2. `right`: Aligns the text to the right end of the container.

    <style>
        .p-one {
        text-align: right;
      }
    </style>

    And we have this on the browser:

    text at the right part of the page

  3. `center`: Centers the text horizontally within its container.

    <style>
      .p-one {
         text-align: center;
     }
    </style>

    And finally, this is what is being displayed on the browser.

    text in the center of the page

Text Indent

text-indent in CSS moves the first line of text a bit away from the left part of the container. It specifies the amount of space that the first line of a block of text should be indented from the left margin.

text-indent: 20px;

This will push the first line of text in the element 20 pixels to the right from the left edge.

Text Direction

text-direction in CSS controls the direction in which text is displayed within an element. It’s mainly applicable in languages that are written from right to left (RTL) or left to right (LTR).

See the following example:

text-direction: ltr;
text-direction: rtl;

`ltr`: Sets the text direction from left-to-right, which is the default direction in most languages in English.

`rtl`: Sets the text direction from right-to-left, used for languages such as Arabic or Hebrew, where the writing starts on the right side.

Line Height

The line-height property controls the vertical space between lines of text. It determines the height of each line determining how close or distant the texts are vertically.

Here is a typical example

line-height: normal;
line-height: 1.5;
line-height: 20px;
line-height: 1.2em;

Line height can be set either using the normal keyword which is the normal keyword, with specific heights like 3, 1.5, and so on also with relative and absolute units.

Adjusting the readability and aesthetics of text can be done with the line height property. A smaller line height brings texts close together and a larger line height makes texts far from each other.

Word Spacing

This controls the spacing between words in a block of text. The word-spacing property allows us to increase or decrease the space between the words.

word-spacing: 3px;

This will add a 3-pixel space between each word in the text.

Letter Spacing

Letter spacing, on the other hand, controls the space between letters in a block of text. It can be used to increase or decrease the space between individual characters.

letter-spacing: 1px;

1 pixel will be added between each letter in the text.

Best Practices When Working with Text in CSS

When handling text in CSS, here are some best practices to keep in mind:

  1. Use relative units for font sizes (rem, em, percentages). This ensures your text scales appropriately across different devices and browsers as opposed to absolute units like pixels (px).

  2. Use the text-transform property to convert your text to uppercase, lowercase, or capitalize it.

  3. Use font-weight and font-style properties sparingly. These properties help to add emphasis to our text but they should be used with caution so as not to make the test difficult to read.

  4. Use letter spacing and word spacing on your text to enhance readability.

  5. Be consistent in your font choices, sizes, and styles across your website for a cohesive look and feel.

Supported Browsers for CSS Text Styles

Here’s a table that shows the supported browsers for CSS text styles

Other Properties Worth Looking at

Text decoration style. Sets the style of text decorations

Text decoration color. Specifies the color of text decorations like underline, overline, or line-through.

Text orientation. Controls the orientation of the text.

Further Thoughts on Customizing Text in CSS

CSS provides powerful APIs/tools for styling texts on websites. Understanding these options, how they work and their best practices help create engaging, readable content that captivates users.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

For your reference, you can also check out the below YouTube video to learn more about styling text in CSS.

Shadrach Abba

Shadrach Abba