The beauty of Less is that if you've created valid Less code, it will compile to valid CSS—this means we can use it to great effect to produce some interesting effects when working with fonts.

If you spend a little time searching on the Internet for CSS3-type effects, you will no doubt come across some good examples—to show you what I mean, let's take a moment to try reworking two effects using Less: letterpress and emboss. For this demo, we'll use a copy of the weights.html page we created earlier in this chapter, and alter the title to give it some more emphasis.

Let's start by opening up a copy of weights.html, which we used in the previous demo, and saving it again as sfx.html.

Next, open up a copy of weights.less and add the mixins as highlighted:

@Alegreya-Sans: "Alegreya Sans",sans-serif;

.letterpress() { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); }
.emboss() { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); }

The mixins won't be used unless we call...