This post is about demonstrating a fun way to add some life to some otherwise plain and boring text by adding some simple but effective styling to the ampersands in your projects. This CSS Snippet, originally adapted from a CSS Tricks snippet, gives you the ability to add some serious style to your ampersands using only a few lines of CSS and one span tag. If you want your ampersand symbols (which, if you’re not familiar with the term, is simply the and sign: “&”) to look both fancy and stylish, you can check out the following snippet.
First, let’s start with a little HTML. The text can be anything you want, but be sure to include the <span> tags around your ampersand.
<p>Peanut Butter <span class="amp">&</span> Jelly</p>
For reference, this is what our HTML looks like without any style applied to it:
To jazz it up, we’re going to add a nice body font and a font specifically for the .amp class, which in this example applies to the ampersand only. We’re also going to apply an italic style to the ampersand, and give it a font-weight of normal, which will help it stand out from bold fonts if it happens to be in the midst of any.
Here’s how the CSS should look:
body{
font-family: 'Futura';
font-size: 24px;
}
.amp{
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
The final product should look like this:
Remember, the code snippet is totally customizable, so if you’re not a fan of Baskerville, feel free to choose a “fancy font” that is more suited to you and your project. Everything else, from font sizes to colors to actual text content, are also completely customizable and you can change them to anything you like (but if you really want text that says Peanut Butter & Jelly, that’s fine too).