This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
Transcript
Text is everywhere. Without it, the web wouldn’t be such a useful place.
There are many different CSS properties for styling text and in this video, we’ll cover most of them in some way shape or form.
There’s quite a few, so we best get started! As there are so many things to cover, this episode will demonstrate some of them, but in part just act as an overview of the tools in the box.
Text Properties
There are many CSS properties that control the visual appearance of text – but only seven of them actually start with the word “text”.
Those are:
text-aligntext-decorationtext-indenttext-overflowtext-renderingtext-shadowtext-transform
We looked at text-align in some depth in “Episode 10: justify“; it’s used to control the alignment of text on the screen and is often set to left, right or center.
text-decoration is commonly set to none to remove the underline added beneath hyperlinks. It can also be set to underline, overline or line-through to create a strikeout effect.
text-indent allows us to control indentation. I often use this with a large negative value to bump text off the page so it’s visually hidden but still exists in the document for assistive devices like screen readers.
text-overflow allows styling of any text that overflows its container – where a word is too long to fit for example. We can style this overflowing text with clip to hide it, allow it to be visible or add an ellipses character to show that the word continues but there’s no space for it.
text-rendering is a property from the SVG spec but allows the browser to optimize the rendering of text for either rendering speed, geometric precision or legibility. Setting text-rendering to optimiseLegibility will enable kerning and ligatures in some fonts in some browsers. The support isn’t great and apparently there can be some side effects of using it so I’d recommend checking them before you do.
text-shadow works a bit like box-shadow but for text. It takes four properties: the x-offset and y-offset control the position of the shadow; the blur radius controls how soft the shadow is and finally, the color sets the color of the shadow.
text-transform can be used to change the case of text. It can be used to set all letters to uppercase, lowercase or capitalise the first letter of each word. One of my bug-bears is finding LOTS OF ALL CAPS WORDS written into the HTML – it’s far more flexible to control this visual styling from CSS instead.
Font properties
There’s a whole range of other things we can manipulate and style with text too and there are a series of CSS properties for font that allow us to control our typography.
font-family sets the typeface to be used. This can be set as a “stack” and the browser will select the first font in the list that it can load successfully.
font-size allows us to change the size of the text.
font-style can create italicised or oblique text whereas the font-weight property is used to create bold text. font-weight can also be used to create a range of weights with a numeric value. This value is a multiple of 100 ranging from 100 to 900. font-weight:normal maps to the value 400 and font-weight:bold to 700.
There are some pretty fancy new font variant settings in CSS3 that enable things like small caps and ligatures to be used where possible – we don’t have time in this video to go into detail but if you’re interested in finding out more about these features, have a search for “open type features in CSS”.
Finally, there’s a shorthand property for font that allows multiple font properties and line-height to be set in one go. The syntax has quite a specific order that I can never remember so I tend to not use this property very often. However, it is useful for setting font-family,font-size and line-height in a single line as follows:
p {font: 12px/24px 'Avenir', 'Arial', sans-serif;}Other properties
We’ve looked in some detail at the text- and font- properties but there’s a handful of others that can also come in handy when styling words on the page.
We looked at line-height in “Episode 12: line-height“. This property controls the spacing above and below the lines of text. We can also control the space between individual letters with letter-spacing. This can be set to a large positive value to increase spacing or to a small or negative value to tighten everything up.
We can also control the spacing between words with the word-spacing property and control the wrapping of text with word-wrap.
It’s also possible to control how white space behaves using the white-space property. This is a useful property to control the visual output of preformatted text like code snippets – something that I do quite a bit.
So there we have a fairly complete list of all things text related. This isn’t the most exciting list of CSS properties I’ve ever come across but since content is king, being able to control how our text is displayed to the reader is incredibly important. Hopefully, there were a couple of new things on this list for you; I know I certainly found a few things I’d not seen before when putting this episode together!
Guy RoutledgeFront-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.
