GoKawiilLike the graphic design of a physical poster, sometimes we need some eye-catching text on the web too. Picking the right font is just the beginning. Text weight, style, spacing, and decoration can go a long way, but sometimes we need more to make the text stand out.
Here are five properties that can help make words look better, or at least more interesting, on the web. They are all fairly simple implementations you can layer into other ideas.
The fill of the letterforms is usually a solid color in typography (with some wild exceptions). But it’s rather easy to use an image to fill that space instead. All we’ve got to do is pick a fancy background and snip it to the shape of our text. The result is a set of striking knockouts that can be read.
In the late 2000s, the text value was introduced for the background-clip property, making it possible to mask background images (or gradients) inside live text. Since then, it has remained one of the most sought-after rules for really cool typography visuals.
< p > Belize Reef </ p > Code language: HTML, XML ( xml )
p { background : text url ( "image.jpg" ) center/auto 1 lh; color : transparent; } Code language: CSS ( css )
CodePen Embed Fallback
On occasion, the basics build the brilliance.
We all could align text horizontally since we could write CSS ( text-align: center; ). But when it comes to the vertical axis, the text alignment doesn’t always go smoothly. However, understanding these two properties should resolve most of that.
The vertical-align property hails from the era of the Early Web, when HTML tables ruled the layout landscape. It was widely used to align content inside a table cell. However, outside of a table cell, it’s not really about aligning text vertically; rather, it’s about aligning inline elements to the text.
... continue reading