CSS108 - Mastering CSS Text Styling
Henry Uzor, GMNSE
Software Engineer | Frontend Web Developer | AI Applications Engineer | Data Annotator | Frontend Development Writer | JavaScript | TypeScript | React.js | Vue.js
Hello Senior Devs!
This is Henry Uzor, and as always, it is my pleasant delight to bring you my weekly newsletter once again on Frontend Development. Last time around, we talked about CSS Height, Width, and Outline, and this week, we want to look at CSS Text Styling.
In the world of web design, text is more than just words on a screen; it is a powerful tool for communication and expression. CSS has many properties for formatting texts, empowering developers and designers to transform plain text into visually engaging and impactful content. In this article, we will explore the art of CSS Text Styling and uncover techniques to create eye-catching typography that captivates your audience.
Font Family and Typography
The choice of font family sets the tone for your website. In CSS, we use the “font-family” property to specify the font we desire to specify for a text. You can also utilize web-safe fonts or incorporate custom fonts using “@font-face” to achieve the desired aesthetic. And it is always important to always consider factors like readability and brand consistency when selecting fonts.
Another font property that is important to learn about is the “font-size” property, and balancing font size and line height is also essential for readability. For this, you can use relative units like “em” or “rem” for font sizes and adjust line height to create comfortable spacing between lines.
In fact, thinking about it now, I think CSS fonts should be discussed in an article of its own, so in the next edition of this newsletter, I will discuss all there is to know about CSS Fonts.
?
Color and Contrast
1.Text Color: The “color” property is used to set the color of the text elements on your webpage. Text color greatly influences readability and aesthetics. Choose colors that provide sufficient contrast against the text background for easy reading. Use color to evoke emotions and create a visual hierarchy. I believe you should already know by now the color value options that are available in CSS, so when deciding a color for your text, make a choice on the color you want to use and assign it as a value for the “color” property.
2.Background Contrast: Ensure optimal contrast between text and background. High contrast enhances readability as well, particularly for users with visual impairments. How to achieve this is by specifying contrasting colors for the background and the text, rather than colors that are similar.
Text Decorations and Effects
CSS offers various text decorations like underline, overline, and line-through. It is imperative to use them judiciously to emphasize links or add visual interest. We have five properties in this regard; “text-decoration-line”, “text-decoration-color”, “text-decoration-style”, “text-decoration-thickness”, and the “text-decoration” shorthand property.
The “text-decoration-line” property is used to add a decoration line to a text, and this line can go under the text (underline), over the text (overline), through the text (line-through), or sometimes a combination of these.
After deciding if you want to apply some text-decoration line and where the run should run on the text, another point to consider is the color of the line, and that is where the “text-decoration-color” property comes in. This property serves the purpose of defining the color of the text-decoration line. If no value is set for this, the default value is usually the color of the text, but if you’d like to change this, then you’d have to specify a color of choice for this property.
We can also choose a style for the line using the “text-decoration-style” property, and this property accepts the following values: “dashed”, “dotted”, “double”, “solid” (default), or “wavy”.
Another property we can use on our line decorations is the “text-decoration-thickness” property which is used to set the thickness of the decoration line. This property can accept any of the following values: “auto”, length values (in “px” etc.), “%” values, “initial”, or “inherit”. I believe this range of values is usually the option we have when you’re defining anything that has to do with line styles in CSS, regardless of whatever style of lines it is or where the lines are being applied.
The “text-decoration” shorthand property can be used to define any or all of the four text-decoration properties preceding this. Don’t waste your time and IDE space writing this:
You can simply write this instead:
When deciding which text properties to use or not to use, it is important to remember that some HTML elements come with their custom text decoration styles. For example the anchor element (<a></a>) comes with a text decoration line of “underline” and a text color of either “purple” or “blue”, depending on the browser you are using. However, you can always overwrite these styles by defining your own text decoration styles. But if you want to remove all custom text decoration styles of any element all together, feel free to use the “text-decoration: none;” declaration on the element.
Text Shadows
Adding subtle shadows to text can create depth and make it stand out. The “text-shadow” property adds a shadow to your text. Experiment with shadow properties like color, blur, and position to achieve the desired effect. In its simplest use, you will need to specify at least two values, one for the horizontal shadow effect and the other for the vertical shadow effect. In a bit more advanced use, you can add a third value to give the shadow a blur effect, and a fourth value for shadow color. And in its most complex use, you can specify values for up to three different shadows on one element, each shadow's set of values separated from the other by a comma.
Letter and Word Spacing
1.Letter Spacing (Tracking): Adjusting letter spacing can enhance legibility and overall appearance, and to make this specification, you would need the “letter-spacing” property. This property is used to specify the space between the characters in a text. When using this property, you want to avoid excessive spacing that might hinder readability.
2.Word Spacing: The “word-spacing” property is used to increase or decrease the white space or distance between words in a text. Manipulating word spacing helps control the rhythm of your text. Tighter spacing can create a modern and compact feel, while looser spacing can enhance readability.
3.Line Height: The “line-height” property is used to specify the space or distance between lines of text. Again, on this property, you don’t want to leave too much space as this will negatively affect the readability of your text. The “line-height” property is specified as any one of the following: a keyword (e.g. “normal”, “inherit”, “initial”, etc.), a number (e.g. “0.8”, “2”, “3.5”, etc.), a length (in “em”), or a percentage (“%”). Whichever value you choose, the browser carries out some calculations in relation to the font size of the element itself, in order to achieve the effect you have specified.
领英推荐
Text Alignment and Indentation
1.Text Alignment: The “text-align” property is used to set the horizontal alignment of a text. A text can be aligned based on design goals, and the common alignment values are “left”, “right”, “centered”, and “justify”. Left-aligned text (default value) is the most common, while centered or right-aligned text can create unique visual effects. When the “text-align” property is set to “justify”, this makes each line to stretch in such a way that the width of every line becomes equal, and the left and right margins are vertically straight. This type of text-align can be observed in the way that magazine or newspaper columns are written.
2.Indentation: The “text-indent” property is used to specify the indentation of the first line of a text block. It is particularly useful for block quotes or indented paragraphs. This property can accept any of the following values as well: “auto”, length values (in “px” etc.), “%” values, “initial”, or “inherit”.
Text Transformation
The “text-transform” property can be used to change text content to uppercase or lowercase, offering stylistic variations. This can come in handy, especially in a situation where you have a lot of text on your webpage that you want to transform their cases, and doing so manually can be time-consuming. So, you can use the “text-transform” property to turn everything into uppercase or lowercase letters, or just to capitalize the first letter of each word.
Other details relating to CSS text styling that you might want to read up on:
To put everything we’ve discussed so far into context, here is a simple example demonstrating the various CSS text styling techniques within an HTML document:
The document is really easy to read! First, I have an <h1> element, then I have an <p> element that is enclosing an <b> element and an <a> element that goes nowhere really (as suggested by the empty “href” attribute). I also have a <blockquote> element and then another <p> element. A few <span> elements can also be found here and there. Running this HTML document on the browser, we have:
Now let us give some bit of life to this and write some CSS styles for it:
On the CSS document, the <body> element is given a base font-family for the entire document and the line-height is also adjusted slightly.
The <h1> element is given a font-size value that is relative to the root font-size, the text color is changed to a dark gray color (#333), the text is centered and transformed to uppercase, with a little line-spacing and some margin-bottom.
The <p> element is given a “1rem” font size, the text color is changed to a lighter shade of gray color (#666), the text is justified, and a bit of margin at the bottom of the element.
For the <a> element, the default text-decoration is removed, the text color is changed, and some bit of border and padding are added to the bottom of the element. One more property I added here is the “transition” property, and this is because I set the bottom border color of the element to change to “red” when the hyperlink is hovered on with the mouse cursor. So, what the “transition” property does is to ease the change of the borderline color to the new color, making it gradual and not instant. This transition will take “0.3 seconds”.
The <b> is given a text-decoration of “line-through” and a text decoration style of “double”.
The font style of the <blockquote> element is set to italic, and a bit of border, padding, and margin is specified for the left side of the element.
The <span> elements are given a light-yellow background (#ffffcc), and paddings and a border-radius were also given to the elements.
Lastly, we have the first letter of the last sentence, a font size value and a font-weight value are given, the letter is floated to the left side of its container, and some margin and color adjustments were made.
Let us go to our browser to see these styles taking effect:
Nice!
CONCLUSION
CSS text styling is an art that combines creativity and functionality. By mastering the techniques outlined in this article, you can create typography that not only enhances readability but also adds a unique visual flair to your website. Remember, text styling should align with your design’s overall goals and user experience, making every word a meaningful part of the digital canvas.
Experiment, iterate, and infuse your web designs with captivating typography that leaves a lasting impression on your audience. Whether it’s a bold headline or a delicate paragraph, CSS text styling allows you to shape your content’s voice and impact.
And that’s a wrap, Folks! There you have it for this week! I hope you had fun. I always do!
Next time, our journey into the deep end of writing CSS code continues.
Feel free to drop your comments in the comments section and share this Newsletter with anyone you know that might be interested in learning about Frontend Development. If you have any questions, that you’d like to ask on any of the subjects I’ve discussed so far or anything that has to do with Frontend Development, I am just a DM away.
So, thank God it’s Friday (TGIF), and I hope you had a great week. Until I come your way again next week, do have a blessed and productive weekend. See you in a bit!