Styling Text with CSS

Published by: Scott Sutherland

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.

Get more information about how Web Cheddar can help your business at webcheddar.ca
Next Section: CSS Colors and Backgrounds
Previous Section: The Box Model: Understanding CSS Layout

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 deafult stlying from things like a tags. See below.

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

Conclusion

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.

Styling Text with CSS

Published by: Scott Sutherland