Making typography pop with CSS: 5 little-known useful properties
Long gone are the days of using actual images every time you need to stylize your font. When it comes to type, recently nearly everything is possible with CSS, although sometimes it requires workarounds and unnecessarily large chunks of code. The good news is both native CSS properties, as well as browser support for them, are quite on top of the issue, and every year more features are supported out of the box. This post is about such features, some of them have been around for quite a while, and either still not being used that often or only recently finally started being largely supported by major browsers (we’ll be talking about Chrome and Firefox here), while others are quite new.
::first-letter Selector
Living up to its name first-letter is a pseudo-element selector, targeting the first letter in the first line of an element. You can use major properties that you’d otherwise use for styling text, like color , font , background , spacing and more. This is a rather old selector, but still not very widely used.
Why use it: reduces unnecessary classes, makes stylizing generated pages easy.
writing-mode and text-orientation
These are some of the properties that will come in handy mostly when working with typography in languages other than English, writing-mode sets whether the text is output horizontally or vertically as well as its direction, for example, the default is horizontal-lr meaning the text is output horizontally left-to-right, in the example, I’m using Japanese print standard which is output vertically right to left or vertical-rl . text-orientation is a property mostly used to support writing-mode , it specifies the orientation of characters within a line of content and only applies to vertical typography. It only got better support in recent years and is now a widely supported feature. Normally you would want to use upright , rendering letters upright, but other options such as sideways are available when needed.
Why use it: makes it possible to adjust lettering for multilingual platforms and pages.
line-clamp
Remember text-overflow: ellipsis ? This property is somewhat similar but gives you greater control of how the text is being truncated. Unlike with text-overflow: ellipsis you can control the number of lines where the text gets cut off, this is especially useful when you think about, say, a column layout with the cards and you want to make sure that the text spans over the same amount of lines and not more.
Why use it: offers a more straightforward way of truncating text in pure css than text-overflow: ellipsis
text-decoration styling
This is one of the newer and not as widely supported features, the big three (Firefox, Chrome, Safari) all have at least partial support for these properties, most importantly, these include:
text-decoration-linetext-decoration-colortext-decoration-style
You read it correctly, no more messing around with pseudo properties in order to stylize your underlined text. You can use text-decoration-line: underline | overline | line-thrhough or their combination to position the line, text-decoration-color to set it to a different color from the rest of the font, text-decoration-style: solid | double | dotted | dashed | wavy to set it to your preferred style.
There’s one more property text-decoration-skip which allows you to control what spots exactly the decoration is supposed to skip, but it is currently not supported by the main browsers.
Why use it: makes stylizing links easier, duh!
text-emphasis
text-emphasis property allows you to emphasize parts of the text. Unlike text-decoration it targets every character in the element, other than using pre-set values like filled or CSS shapes, you can pass it a glyph or a character, as long as it isn’t a full word. Other than color and content,text-emphasis also supports positioning, over || under and left || right .
Why use it: this can be a great way to stylize some mathematical expressions, foreign language accents or simply add certain graphic elements.
There’s of course much more happening to typography-related CSS in 2019, with the biggest development being variable fonts, a huge topic in itself, and for now, limited to OpenType only. The above are just a few small tricks you can use in any project that uses any type of font, that I noticed developers seem to overlook and ignore when in reality they can make certain coding tasks much easier! Are there any other tricks you found useful?
