Styling Text with CSS

Once you grasp the box model, the next step is to make the text within those boxes visually compelling. Text is the primary conduit of information on the web, and with CSS, we have a vast array of properties to style text, enhancing readability and aesthetics.

Web Design & Development

Web Cheddar Website Solutions

Get more information about our Web Design and Development Services

Choosing Fonts Wisely

The choice of font can profoundly affect the user experience. CSS gives you control over this with the font-family property. You can specify a list of fonts, ensuring a fallback if your first choice isn’t available on the user’s system.

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

Using web-safe fonts ensures consistency across different browsers and devices. For more unique typography, web fonts from services like Google Fonts or Bunny Fonts can be incorporated to give your website a distinctive character. Bunny fonts provides faster loading than Google fonts and are GDPR friendly.

Setting the Font Size

The font-size property determines how large your text appears. It can be set in various units, like pixels (px), points (pt), or ems (em). Relative units like em or rem are particularly useful for responsive design as they scale better across devices.

body {
  font-size: 16px;
}
h1 {
  font-size: 2.5em; /* 2.5 times the size of the body font */
}

Adjusting Weight and Style

Bold or italicized text can emphasize important content. Use the font-weight property to set the boldness of your text, and font-style to italicize.

strong {
  font-weight: bold;
}
em {
  font-style: italic;
}

Coloring Text

Color adds depth to your typography. The color property applies color to your text, and it can accept values like color names, hexadecimal codes, HSL or RGB values.

p {
  color: #333333; /* A dark gray text color */
}

Line Height and Letter Spacing

The spacing between lines and letters affects readability. The line-height property controls the space between lines of text, making it easier to read. Meanwhile, letter-spacing can adjust the space between characters.

p {
  line-height: 1.6; /* 160% of the font size */
  letter-spacing: 0.5px;
}

Text Alignment and Decoration

Aligning your text can change the flow of your content. The text-align property can left-align, right-align, center, or justify your text. The text-decoration property can underline, overline, or strike through text. The text-decoration property can also remove default styling from things like a tags. See below.

h1 {
  text-align: center;
}
a {
  text-decoration: none; /* Removes underline from links */
}

The Importance of Semantic Classing

While it might be tempting to directly style HTML elements like h1, h2, or p, it’s generally a better practice to use semantic CSS classes instead. This approach offers several advantages for maintainability, scalability, and the overall structure of your website.

Consider the previous examples:

h1 {
    font-weight: bold;
}

While this will certainly make all h1 elements bold, what happens if you later decide that you want some h1 elements to be bold and others to have a different style? Directly styling the h1 selector limits your flexibility. You would have to write more specific CSS or even override the default styling, which can lead to a less organized and harder-to-manage stylesheet.

Instead, adopt a strategy of using descriptive class names that reflect the purpose or content of the element, rather than its HTML tag. For example, instead of styling all h1 elements, you could create a class like .main-title or .section-heading and apply styles to that class:

.main-title {
    font-weight: bold;
    font-size: 2em;
    color: navy;
}

.section-heading {
    font-size: 1.5em;
    color: green;
    border-bottom: 2px solid green;
}

Then, in your HTML, you would apply these classes to the appropriate elements:

Welcome to Our Website
About Our Services
Another Sub-section
 

By using semantic classes, you gain the following benefits:

• Improved Maintainability: Changes to the visual style of a specific type of content are isolated to the relevant class, making it easier to update and modify your design without unintended side effects.
• Enhanced Reusability: You can apply the same class to different HTML elements, ensuring consistent styling across your website. For example, you might want both a div and a p element to have a specific “call-to-action” style.
• Increased Readability: Well-chosen class names make your HTML and CSS more understandable, both for you and for other developers who might work on the project in the future.
• Better Scalability: As your website grows, a class-based approach makes it easier to manage and extend your styles in a consistent and organized manner.

While there might be occasional exceptions where styling a base HTML element makes sense (for example, setting a default font family for the entire body), strive to use semantic classes as your primary method of styling. This will lead to cleaner, more maintainable, and more scalable CSS.

See the Pen
Untitled by Scott Sutherland (@spielbergo)
on CodePen.

Styling text with CSS is about more than making words look pretty. It’s about enhancing the user’s reading experience, directing attention where it’s needed, and ensuring information is consumed as intended. With these CSS properties at your disposal, you can craft text that not only conveys your message but also complements the overall design of your website. Practice these techniques, experiment with combinations, and watch as your web pages begin to communicate more effectively with every style declaration you write.