---

Greased 1.18.1 - Font Tricks Appendix

December 24th, 2015

Many, many issues back - Issue #6 I think - I spent a little bit of time going over "font tricks." As a fun and lighthearted way of wrapping up 2015, I'd like to expand on them a little further in this supplement to Greased. A lot of what we've gone over in these appendicies has been skewing towards the technical side, but by comparison, this is a lot easier. All you really have to do in most cases is learn how to properly use a span tag, and sometimes it's even simpler than that; just a specific HTML tag causing a specific effect. Now don't worry if you don't remember every single detail (I've had to use outside reference a couple of times), because I've also prepared a small reference guide (1.18.1A) for when you understand all of this and just need a little help with the specifics.

What's the use in knowing these "font tricks"? (My term, for lack of a better all-encompassing description.) In some cases they may have some practical applications, but more often than not their functions are purely decorative. Some of these are probably a bit useless outside of a design environment (such as transforming the text to all uppercase letters; you could just type it as such) but I'll be putting them out there nonetheless. These are great ways to spruce up titles and any menus/table you may want to design. Don't forget that overuse can make things look guady; establish a look and run with it, but don't necessarily try to cram every feature into a single element. One of my favorite uses of these "tricks" is through a:hover effects; it's tough for the average member to implement these on the site, but I can certainly add some snippets to the site's CSS to accommodate such things at your request.

As always, here are a few quick guidelines worth going over before jumping in:

1. Before starting, save your work!
2. Use Preview to see the effect of your changes.
3. Don't mess with anything other than what's instructed (unless you know what you're doing!)
4. Work in small increments, saving your work when successful.

A great place to play around with these techniques is the W3C Try-It Editor. It's a blank slate that provides instant results and can be a useful and instantaneous preview tool.

---

Syntax

Before we really get started I feel like it's pertinent to hand out a couple of quick lessons in HTML in order to provide a framework in which to use the features we're about to go over. When using "font tricks," all of them will come in one of two forms: tags or span tags. Tags are really simple and involve only surrounding the affected text with the proper tag (an opening tag and a closing tag). If you've read any of this previous material - or even glanced at the Text Editor within WordPress - you should be familiar with what a tag looks like.

Tags are a series of letters encased between an opening and closing arrowheads. Occasionally tags can be somewhat arbitrary, but most do serve as an abbreviation (or outright description) of the feature in question. Let's take a look at the tag <em> ("emphasis") as a example. (Remember, many different things can be between the arrowheads, this is just one example.)

• This is what an opening "emphasis" tag looks like: <em>
• This is what a closing "emphasis" tag looks like: </em>
• Here is a complete HTML element - opening tag, affected text, and closing tag: <em>text goes here</em>
• Once implemented, the final effect will look like: text goes here

That's pretty easy. Whenever we go over a tag, the process will be exactly the same, only with the "em" replaced by whatever tag we're currently using.

Many of the "tricks" we'll be discussing can't be done with straight HTML tags and require the use of inline CSS. There are a number of ways to use these, but the easiest way to apply it to any and everything is by using a span tag. Like a regular tag, you'll wrap the affected text in an opening and closing span tag, only this opening tag is going to contain the inline CSS which makes it look a bit different from a regular tag.

You'll apply a simple formula for these instances: <span style="χ"> where χ is the bit of "code" we're discussing. Suppose we want to change the color of some text. I'll say something like, "use color: red; to change the text to red. In this case, color: red; is what we put in place of χ. Here's what it'll look like in practice:

• This is what an opening "span" tag looks like (specifically one changing the text to red): <span style="color: red;">
• This is what a closing "span" tag looks like (regardless of the opening tag's content): </span>
• Here's a complete element, with affected text: <span style="color: red;">new red text</span>
• And here's what the final product looks like: new red text

That's all there is to it! Like I said, there are other ways to do this that may be more efficient, but using span should cover your needs. What's great is that span are inline elements, meaning we can start and stop an effect witht it having any sort of effect on the larger structure of whatever HTML element you're already working within, be it a paragraph, table, list, etc. Here's an example where we start with a default color, switch to red, and then switch back:

You can also use multiple declarations within a single span tag. (You can also surround them with other HTML tags as well.) For example, let's say you wanted red text with a black background. If color: red; changes the text to red, and background: black; changes the background to black, you do not have to use 2 separate span tags (although you can if you wish); you can combine the two. Check out the following examples of just how to use multiple span tags along with other HTML tags. After these, we'll jump straight into the fun stuff!

Whether we use 2 separate span tags for 2 separate effects or combine the effects into a single span tag, the effect is the same (just remember that if you use 2 tags, you need to close 2 tags):

Sometimes you may need to use 2 separate tags, but generally you can combine them for an identical effect to the above:

You can also combine other HTML tags with span:

Finally, you can even use span tags within other span tags. Just pay attention to when and where you close them!

Don't worry if these seem a little tricky at first. With a little bit of practice it'll become second nature and you'll begin to more easily see the underlying HTML structure. Now that you know how to use this stuff, let's learn about some of the stuff we can actually use!

---

Italics, Oblique, and Font-Style

Here's a pretty basic one to start out with. In fact, you don't even really need to know how to do this since you can do it very easily in WP's Visual Editor, but I think it's worth putting out there. There are a few ways we can italicize text: the CSS property font-style, the "emphasis" tag, and the more outdated "italics" tag. (I'll talk a little more about this one in a minute.)

Far and away the easiest way to italicize text within a document is to just use the <em> tag. Open the tag when you want the effect to start, close it when you want it to end, easy as that. Here's a quick example in case this is 100% completely unfamiliar to you:

You can also use the CSS property font-style to denote italics as well. Why would you ever need to know this? To answer that, we have to understand a little about the nature of HTML and CSS. All CSS properties and HTML tags have default values assigned to them by major browsers. However, by using specific CSS rules or by defining HTML tags within a CSS file, we can override these defaults. The "em" in the preceding tag doesn't really mean "italics," it means "emphasis." By default, browsers will interpret "emphasis" as italics. However, I could easily change this for a given document or even a whole website. I could write a CSS rule that said em {font-style: normal; color: yellow;}. The first declaration gets rid of the default italics effect, and the next colors them yellow. If I had this CSS rule in effect, whenever anyone used <em>, it would simply appear as yellow text.

Realistically most people aren't going to start playing around with these very well-ingrained defaults, but is possible. Even if someone needed something similar, they'd probably define a specific class of em as such rather than (re)defining em altogether. When it comes down to it, "em" is really only defined by its default CSS value, which is font-style: italic;. You could almost consider "em" a variable (as you could nearly any HTML tag of the sort). The absolutely positively indisputable way to italicize text is by using inline CSS via the span tag. You can also use a couple of other values for font-style as well: normal, which brings the text back to normal, and oblique, which is sort of like italics but not quite.

The italicized version of a given font is one that has been crafted by whoever created the font; it's basically an artistic rendition. Oblique text is a little bit different - it skews the angle of the text a certain number of degrees to give it that "slanted" appearance. The effect is almost the same, though a difference is generally noticeable. Most of the time you'll be fine using the value italic, but if you run into a font that doesn't have a special "italics" version of itself, the oblique value will give it a similar look. Here are the 3 values for font-style in action:

Now if you hang around forums/message boards or other sites where you may do a lot of on-site writing (like IMDB, Quora, even Facebook), you may be familiar with the <i> tag or some derivative thereof (like [i]). I won't go so far as to say that this method is wrong, but it is certainly "less correct" and is seen as an archaic way of using italics. Specifically, W3C defines this tag as something that can be used when a more accurate description is unavailable such as cite, dfn (definition), or mark (highlight). You may be asking, "what difference does any of this shit make if the text appears in italics?" and to a certain extent you do have a point. The situations where these sorts of distinctions would matter are few and far between and are of little relevance to anyone casually playing with HTML. The best reason to use the "most correct" tag is mostly to assist the visually impaired. When sites are translated for such people, the i will be fairly indistinct, while other markers will be rendered as a citation (code) or "with emphasis" (em) and so on. And last but not least, i can be manipulated in the same fashion as em.

So, after all that, what should you use? Honestly, 99.999% of the time (ok, I made that statistic up...) you'll be just fine using the <em> tag. However, it's useful to keep font-style and its 3 possible values in mind as well, especially since its the only way to italicize within CSS (which would be necessary for hover effects, more easily defining all instances of an element as italicized, etc.). And if you use lots of obscure fonts, oblique will come in quite handy as well!

---

Bold, Bolder, and Strong

Here's another easy one, with almost identical counterparts to italicizing: the <strong> tag, the CSS property font-weight, and the old <b>.

The strong tag functions much like em. It emboldens the text and signifies importance, whereas b denotes bold text yet carries no such semantic meaning with it. And much like italicizing text, strong is typically the safest bet. Also like using italics, both tags are subject to any CSS declarations beyond the defaults, though again this is uncommon. Here's emboldening in action, just in case you need to see it:

To embolden text using inline CSS (remember, the span tag), we use the property font-weight. This property can actually do a few cool things if properly supported, but sadly, this support is minimal. Really, there are only 2 values you'll need to know for font-weight - normal and bold.

If you're using a font that supports multiple thicknesses, you can actually add in a couple of other values, though fonts with this sort of support are unusual. In addition to normal and bold, one can use lighter for a thinner text, bolder for a bolder-than-bold text, or values 100 through 900 to pinpoint the exact thickness. ("400" is "normal," "700" is "bold.") However, you'll find that this has little to no effect when it comes to the most commonly encountered fonts. A demonstration? Sure!

---

Underline, Overline, & Strikethrough

Moving on, we'll now learn how to "do stuff with lines"! These tricks will allow you to put a line under, over, or through the existing text. There are a few different ways to do this, and there's no reason to be familiar with all of them, but I will touch on them for the sake of completeness.

First let's look at underlined text. Back in the day, the <u> was the standard way to underline stuff. However, for some reason, the specifications for HTML 5 sought to radically downplay the use of u, officially stating that it was to be used for "text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese." It also goes on to "remind developers that other elements are almost always more important than <u>." Well, that sounds pretty serious, doesn't it? Yeah, it does, and it shouldn't really be ignored, but alternate underlining methods never really caught on in the way that strong and em.

Perhaps the most analogous thing to strong and em is the <ins> (insert) tag. By default, it will underline text. HTML 5 urges us to be more "semantically relevant" with our tags, and if so, "insert" just doesn't always fit...but then again we don't really have a great way to underline something without using inline CSS and the whole span thing. I can understand not having have a go-to tag for every modification, but no underline? It's a strong case for developers to continue resorting to <u> for the task, and truthfully, I'd encourage the same. Take a look:

As you no doubt have guessed, you can also underline text using span and inline CSS with the text-decoration property, but we'll get to that in just a second.

First I want to cover the last HTML tag in this section, <del>. This is the "easy way" to make a line through the middle of a section of text, otherwise known as a strikethrough. We use it like any other HTML tag.

Those are the 3 HTML tags you can work with, (2 for underlining and 1 for strikethrough) so now let's look at the inline CSS (and the only way to achieve an overline). This property is known as text-decoration and can contain 1 of 4 values: normal, underline, line-through, and overline.

Although CSS/HTML supports features in which to determine the line color and thickness, these features are not yet supported by major browsers. For the time being, it looks our "line" must be the same color as the text. But wait! There's a fun little work around to this (in case you're interested). By setting the color of the underlined (or overlined, or line-through) element and then immediately setting the color of the regular text, we can "trick" the browser into making the line one color and the text another color. However, both colors must be specified, i.e. even though the default color here is black, we still have to tell the browser to color an element "black" in order for it to work.

Here's a quick example of what it would look like using one of the HTML tags, and in what I think would be a particularly relevat situation: strikethrough. We first define our del element as being red - this turns the text and the line red. Immediately afterwards, we define the text as black - this will turn the text black, but since it is not being applied to the del element proper, the line remains red. Check it out; you can do the same with u and ins tags:

If the del style="..." went a little over your head, you could always use multiple span tags - one encompassing the del element, and one encompassing only the text. (We'll learn more about span and colors shortly.) Let's switch it up a little though. Instead of using del we'll use u, and instead of a red line and black text, let's do a magenta line and blue text:

So what happens if you have to use span to render the "line" in the first place, as in overline? You can actually treat that span tag (the one with text-decoration) as you would the HTML tags in the examples above and define a color before or within the tag (the color of the line) and then immediately defining another color before the text. Here are 2 examples like the ones we just did, gray text with a pink overline:

Obviously using 2 tags is cleaner and more efficient than using 3, but if it helps you to think of them as 3 distinct entities - the color of the effect, the effect, the color of the text - then go right ahead. Just remember to close whatever tags you open!

Finally I would like to point out something that I think is a little interesting about these "tricks." Typically with CSS values, an element can only exhibit a single value per property, i.e. a certain string of text cannot be both orange and green; a word cannot have a font-weight value of both normal and bold. It works the same way with text-decoration. You can't define an element as having an underline and an overline any more than you can define an element as being both italicized and non-italicized (normal). However, with tags like u, ins, and del at our disposal, we can make multiple lines appear through text. What's the point? There isn't one, but it is kind of neat:

We can even change the color of each and every line if we're careful about what we're doing...

The purpose of this is not necessarily to show you how to do ridiculous shit with these tricks, but to hopefully get your creative juices flowing and demonstrate what's possible when you start playing around with these things. Tasteful things are possible with a little ingenuity (and luck?). The important thing is to experiment and keep an open mind. Moving on...

---

Small Caps / Font Variant

This trick is one of my favorites - you get the impact and heft of capital letters but without the indignity of ALL CAPS. What more can you ask for?

There's no simple tag for this...I guess that can be a good thing and a bad thing. The bad news is that, well, there's no simple tag to remember. The good news is that there's only one way to do it, so there's absolutely zero confusion. Capital letters will still appear as regular capitals, but lowercase letters will appear as a smaller size of capitals. The key here is the property font-variant and there are only 2 values: normal and small-caps. That's it! DONE. Or should I say...Done. Doesn't that look better?

---

Letter Spacing

Here's an effect that can make all the difference in the world when it comes to a flashy title. It's pretty simple; we use the CSS property letter-spacing to define how much space should appear between each letter. You can use several measurements to define the spacing, but the most useful will be pixels (px) and "em's," or rather fractions of "em's" such as ".25em". Here are a couple of examples. Note that the effect will be most useful with larger sized fonts.

I'm not sure how useful it'd be, but you can also use negative values to tighten up your letters. Of course too much negative spacing will simply squish all your letters together, though very small amounts can alter the look of the text without interferring too much with readability.

Could be useful for something through, right? Now look what happens when we assign a value of "-5."

Yeah, not so useful. However, you can pull off something kind of neat if you make the spacing large enough and right-align the text, such as this:

Like I said, the effect will be most useful when it comes to larger lettering, in which case I would recommend using "em's" since they will scale accordingly. Let's look at an example with emboldened text, 40px large, in the "fantasy" family, with a spacing of .2em, versus the same thing only with 0 letter spacing (the default):

Remember, this may not be of much use in day-to-day text, but it can make a subtle yet appealing difference when used judiciously on titles, labels, and the like!

---

Word Spacing

While on the subject, I figure why not quickly go over word spacing as well? Like the above, it's exactly what it sounds like: complete control over the spacing between words. And also like letter-spacing, we can use more or less any HTML/CSS acceptable measurement (from points to pixels up to entire inches) but the most useful of these will be "ems" (em) and pixels (px). "Ems" are especially useful because they are scalable, meaning they will adjust proportionately depending on the end-user's resolution, window size, etc.

If you've been following along, you probably have a pretty good idea of how to do this. We're going to use a span tag with inline CSS and the property word-spacing followed by the desired measurement. This should be pretty easy to pull off, so let's go over just a few quick examples before moving along.

I'm not sure where this would best be put to use at...perhaps again in titles? For what it's worth though, there it is!

---

Color

This is another one that WP will do for you without much trouble, but you can do some fun extra stuff with it if you know a few extra things. In this case, "color" refers specifically to the color of the font/text. All we have to do is use color with our same old span formula. It's what you put after color that counts.

In total, you've got 6 different ways you can denote what color is being shown:

• Pre-defined Color Names
  • These are what you see me use most often in these guides, mostly so that I can be unambiguously clear and simple about what's going on. I (mostly) try to avoid saying something like, "I'm going to color this element 'red'" and then using "#ff0000" to as my way of coding "red." All told, out of the 16 million colors that most modern monitors are capable of, 140 of them have been given names. Chances are you can probably find a named color that suits your needs, but honestly, sifting through all those names can be troublesome, especially as you begin to see how things like the hex codes and RGB notation work. Still, the W3C (among other places) maintains a list of these color names. And to make things just a little easier, they've sorted them into color groups as well.
• Hexidecimal Codes
  • This is what most developers stick with. It's not 100% intuitive, but it is a clear and succint way of expressing all 16 million of those colors. Just like the numbers we use every day are based on 10's, the hexidecimal system is based on 16. For example, numbers 1-9 represent 1-9 as we know them, but 10 = A, 11 = B, and so on. When we get to "10" in hexidecimal notation, that's actually 16. This lets us express up to the number 255 with just 2 digits.
  • Thing of a typical hexidecimal code, say #20b2aa, as 3 chunks of 2 digits each. Each chunk represents a number between 0 and 255. The first chunk represents the amount of red, the second green, and the third blue (as in "RGB"). So in our example (#20b2aa) red (R) has a value of 32, green (G) 178, and blue (B) 170. Don't worry - you won't ever have to be able to compute these values, just have some general notion that A > 9 (and B > A, and so on) and that "00" equals "zero" and that "ff" equals "255" equals the highest possible 2-digit hex value.
  • There are plenty of places on the web to get information on hex codes and find that one perfect color out of 16 million, but having an idea of how that works will help you narrow that search. For instance, the color #ff0000 has values R = 255, G = 0, B = 0. Since "red (R)" is at the highest possible value and the rest are at zero, that means #ff0000 is "red" in the truest since of the word (at least when it comes to computer monitor displays). Using this rationale, it's easy to see that pure green would be #00ff00. Now say we wanted to combine red and green; we can combine those 2 hex codes into #ffff00. As you may or may not know, red light plus green light equals yellow light. So yellow = #ffff00. Similarly it's also useful to know a few other values. The value "7f" is halfway between "00" and "ff." (You'll also see the middle stated as "80" as well. Technically there is no middle - true, the values go up to 255, but we also include zero, so really there are still 256 possible values. If there were a middle, it would be right between "7f" and "80". Either can be considered "the middle;" yes #007f00 and #008000 are different colors, but will you really be able to tell he difference...?) So if you wanted to combine green and blue, you'd have #00ffff...but what if you wanted to turn down the blue value to half? You'll have #00ff7f, the color that's exactly halfway between green (#00ff00) and cyan (#00ffff). Kinda cool, huh? This issue gets infinitely more complex when you take all 3 colors into account, but hey, that's why we have places like ColorHexa to help us out!
  • Finally I want to touch on black, white, and gray. Black and white are easy. For black, all values are turned to zero: #000000. For white, everything is turned all the way up: #ffffff. Gray is a little more interesting. To get gray, all you have to do is make each value equal. What these values are will determine the shade of gray. Those approaching #ffffff will be lighter, and those approaching #000000 will be darker. You can pick any 2-digit value, repeat it 3 times, and get gray! Since "7f" or "80" can be considered the middle of the spectrum, these will yield the most balanced grays. This is case where "80" is typically considered half, and #808080 is considered the quintessential gray.
  • Occasionally you may see hex codes represented as only 3 digits - maybe #fff or even #ca4 or #7dd. This is a slight shorthand meaning that each digit should be duplicated for the resulting color. So #fff is shorthand for #ffffff; #ca4 for #ccaa44, and #7dd for #77dddd.
• RGB (Red-Green-Blue Values & Percentages)
  • This method is similar to the hexidecimal system, but uses either raw values (0 - 255) or percentages for R, G, and B. This is a lot more intuitive than the hex codes, but it's also a lot more to type and, believe it not, it's harder to recognize similar colors at a glance than with hex codes. (You'll get used to hex codes pretty quickly.) When defining a color this way using raw values, it'll look something like this: rgb(255,0,0). Just like it looks, that means we've turned the R value all the way up to 255 and left the other values at zero. Take our hex example from early, #20b2aa. We can plug those calculated values in directly: rgb(32,178,170). Basically this is like using hex codes except with base 10 instead of base 16; we're defining each value for R, G, and B.
  • For perhaps an even more intuitive approach towards color mixing, you can use this same method with percentages. It's a little more difficult to translate these off-hand into hex codes or raw values, but it may prove easier to think of R, G, and B in terms of percentages rather than values between 0 and 255. The only difference is that we need to stick the percent (%) sign after each number. Red would be rgb(100%,0%,0%). Yellow would be rgb(100%,100%,0%). That color we did earlier, halfway between green and cyan, would be rgb(0%,100%,50%).
• RGBA (Red-Green-Blue-Alpha Values & Percentages)
  • Building off the previous method, this lets us define an additional value: the alpha value (hence RGB'A'). The alpha value determines the transparency of the color. The result will depend on the background color to some extent; the more transparent the color, the more that the background color will pull through (we'll go over some examples soon). The alpha channel is expressed as a number between 0.0 (totally transparent) to 1.0 (totally opaque). Typically value like "0.3" or "0.6" are used, but you can carry the numbers out as far as you wish - "0.75," "0.987," and "0.0001" are all "acceptable" but probably unnecessary. You can construct these almost exactly the same as RGB colors, and the RGB values can be either percentages or numbers. Red with 50% opacity would be rgba(255,0,0,0.5). Yellow at 80% opacity would be rgba(100%,100%,0%,0.8). Either method is fine, just don't forget the 'a' and the opacity/transparency value.
• HSL (Hue-Saturation-Lightness)
  • The HSL model isn't much used since it represents a somewhat inaccurate understanding of how color works, plus, it only allows access to about 3.5 million of those 16 million colors. (2.5 million may seem like enough...but damn...losing 12.5 million sounds tragic...it's actually less that 3.5 million due to the effects of S and L) Fully saturated hues are represented by the numbers 0 to 359. Zero (or 360) is red, 120 is green, and 240 is blue. "S" is for "saturation" and refers to the amount of gray in the color, expressed as a percentage. 100% is a fully saturated color (no gray), while 0% is gray (no matter what the hue; the shade of gray will be determined by the next value...) "L" is for lightness - also a percentage - where 0% is black and 100% is white. So not only is this system not nearly as useful as hex codes or RGB, but it's more confusing to use - the first value (H) must be 0 to 360, whie S and L are expressed as percentages. A final HSL color (I have no idea what this color is) would look something like hsl(345,54%,82%).
• HSLA (Hue-Saturation-Lightness-Alpha Values)
  • Like RGBA, HSLA combines HSL with alpha values. The color is defined as usual and then followed by an alpha value between 0.0 (completey transparent) and 1.0 (totally opaque). This can make things even more confusing: H = value 0 - 360, S & L = percentages, and A = 0.0 to 1.0. Let's take that made-up color from above at 70% opacity. The final color code would look like hsla(345,54%,82%,0.7). Realistically though, I see little point in ever using this scheme or the preceding HSL. It's neither comprehensive nor intuitive...so in my opinion, there's no real need to "learn" this, it's just good to know in case you ever do see it "in the wild" sometime. Although the hue system seems a little useful at first, it quickly becomes apparent that big leaps are taken from one color to the next, and other oddities - like if L = 100% it doesn't matter what the H is - make it an odd system to work with. While it can be helpful for understanding how a color moves from fully saturated to gray (tones) and its journey to white (tints) and black (shades), it's a much more difficult model for understanding color combinations in a meaningful way.

For the purposes of this guide I'm going to mostly stick to hex codes, very common color names, and a little bit of RGB/RGBA. To define a color, we use the property color and then follow it up without whatever scheme we're using. Sticking with "red," here's exactly what each method would look like:

And there you have it, an absolutely exhaustive and monstrous rundown of all the ways to express "red." My advice? Stick with the hex code, maybe learn a few names of common colors, and keep the RGBA scheme in the back of your mind for transparency situations. It may not seem all that useful to play with the transparency of text, however, any and all of these methods of expressing color can be used whenever a color is called for: backgrounds, borders, text-shadows, box-shadows, etc. Any time a color is called for or in any example where you see a hex code or color name, you can use any of these. Each has its strengths and weaknesses...some more than others.

• Pre-defined Names:
  • Pros: Color names are really easy to memorize, and there's no weird syntax involved - just type 'em in!
  • Cons: Finding that right color can be tough - if it even has a name at all. Also, with only 140 colors to work with, you're cutting out over 99.999% of the colors available to you in other methods.
• Hex Codes:
  • Pros: Super easy to use, a number sign (#) and 6 digits is all it takes. They're also the most widely used, so it's very easy to find and search databases of hex codes and find complimentary or contrasting colors as well as shades, tints, and tones. Very clean and concise.
  • Cons: Not highly intuitive. Can be difficult to easily see the relationships between colors and difficult to know what the resulting color will be at a glance.
• RGB/RGBA:
  • Pros: Easier to understand than hex codes and relationships between colors are easier to see at a glance. When using percentages, it's also probably the simplest way to understand combinations of all 3 colors. When used with alpha values, it provides the most comprehesive rendition of color.
  • Cons: Specific syntax and lots to type and remember; it's a longer and more complicated version of using hex codes (minus alpha values). More difficult to remember individual colors than names or hex codes.
• HSL/HSLA:
  • Pros: Establishes a clear and very easy to understand relationship between a color and its tones (saturation/de-saturation; the steps between gray and a fully-saturated hue), a color and its tints (adding white), and a color and its shades (adding black). Easy to pick a favorite hue and adjust saturation and lightness from there. Provides transparency/opacity options with HSLA.
  • Cons: Almost impossible to understand combining colors in this model. Lacks the means to display around 80% of the 16 million colors that most current monitors are capable of; of the availabe combinations, many are redundant (an "L" value of 100% or 0% will always yeild white or black (respectively) regardless of H and S; "S" value of 0% will always yeild a shade of gray regardless of H - many HSL combinations are "wasted" on near-white and near-black shades of gray). Most complex syntax of all the methods.

I do want to take a moment a look at a couple of RGBA examples, mostly to demonstrate how the background color affects the final color of the text. For these examples, we're going to make the text blue and set to 40% opacity (rgba(0,0,255,0.4)) set against a white background, a black background, a green background, and a red background. This is the same color value, but notice how differently it appears based on the background!

---

Font Size

Here's another property that can be easily controlled by WP, but again, learning a little about it will give you increased control over the result. Well ok, I'll be honest...there's not much more to it besides making text bigger or smaller. Now there are a lot of ways to do this, but these are mostly only of concern to developers. Sizes can be denoted throught points (pt), pixels (px), a percentage, "em's" (em), and special accepted names (sort of like the color names). (Sizes can also be defined by centimeters (cm) and inches (in), but even at small numbers, they produce ridiculously huge sizes.)

The one thing worth knowing is that some of these are scalable, and some of them are not (meaning they will adjust based on things like screen size). Percentages and "em's" are scalable, pixels and points are absolute. There are a lot of arguments about what situations are appropriate for which measurement. Lots of developers stick with pixels in order to create "perfect" designs for websites; unfortunately these don't always hold up on different screen sizes and could be considered unresponsive. The "em" unit is becoming increasingly preferred and is now recommended by the W3C due to its responsiveness. This may help when it comes to understanding the relationship between each unit: 12pt = 16px = 1 em = 100% - that's the default when it comes to most browsers.

Let's look at some examples using the acceptable size names, pixel measurements, "em's," and a few percentages. I'm leaving out points since this is rarely used in design, and the "point" unit has more to do with the finished print size than anything to do with the computer screen (1pt = 1/72in). The system probably would help for those designing documents intended for printing, but they're pretty much useless for anything else.

 

 

Font Size - "Em's" (em)
<span style="font-size: .5em;">	This is "font-size: .5em;".
<span style="font-size: 1.2em;">	This is "font-size: 1.2em;".
<span style="font-size: 1.3em;">	This is "font-size: 1.3em;".
<span style="font-size: 1.4em;">	This is "font-size: 1.4em;".
<span style="font-size: 1.5em;">	This is "font-size: 1.5em;".
<span style="font-size: 1.7em;">	This is "font-size: 1.7em;".
<span style="font-size: 2em;">	This is "font-size: 2em;".
<span style="font-size: 2.5em;">	This is "font-size: 2.5em;".
<span style="font-size: 3em;">	This is "font-size: 3em;".

 

Font Size - Percentages
<span style="font-size: 50%;">	This is "font-size: 50%;".
<span style="font-size: 75%;">	This is "font-size: 75%;".
<span style="font-size: 100%;">	This is "font-size: 100%;".
<span style="font-size: 125%;">	This is "font-size: 125%;".
<span style="font-size: 150%;">	This is "font-size: 150%;".
<span style="font-size: 200%;">	This is "font-size: 200%;".
<span style="font-size: 250%;">	This is "font-size: 250%;".

---

Text Shadow

This is another one of my favorite tricks, and unlike some, it can be done on text both large and small to equally cool effect. The property here is text-shadow, which requires 2 values and features optional 3rd and 4th values.

A declaration for text shadow, in its simplest form, might look something like this: text-shadow: 2px 4px;. This is saying that the shadow will extend 2px horizontally and 4px vertically. You must fill in these 2 values, even if one of them is zero. Here's a quick example, with the text made a little larger to enhance the effect:

The effect here is a bit muted, which is why you'll probably want to utilize the next value in most cases - the color of the shadow. The shadow goes after the horizontal and vertical values, as in text-shadow: 2px 4px cyan;.

Now for the next option - blur. Normally the shadow will have clean, hard lines. With a blur value, it has a more fade-like effect. The blur measurement goes between the v-value and the color, like text-shadow: 2px 4px 5px purple;. Let's see it!

You can achieve a lot of cool looks by playing around with these values. Here's one of my favorites, an effect that creates a sort of "glow." Normally, white text on a white background would be invisible. But check out what happens when we use this "glow" effect (text-shadow: 0 0 20px #ff007f;):

You probably noticed by now that the shadow is structured as if the light source was coming from the upper left. The horizontal value moves the shadow to the right, and the vertical moves the shadow down. Well, what if you wanted the imaginary light source coming from the bottom right? Or even the upper right or lower left? Here's where we have to think like a developer: negative h- and v-values! A negative h-value will push the shadow to the left; a negative v-value will push it upwards. The effect should be easy to imagine, but here it is anyway:

Two negative values put the "light source" at the lower right. A negative h-value and positive v-value will put the light source in the upper right, and a positive h-value with a negative v-value puts the light source in the lower left. Note that the blur cannot have a negative value (a "negative blur" doesn't even make any sense).

Now there's one more thing to show off when it comes to text-shadow - multiple shadows! Oh yeah, and you don't even have to do anything complicated or tricky to do it. Just list one shadow after the other, separated by a comma. Check out these multiple shadows done with the "glow" effect:

The blurring of shadows will run the colors thin quickly, so it's best to pick darker colors than you might ordinarily use when playing with shadows, especially multiple shadows. We're not limited to just the glow effect though; we can take these multiple shadows as far as we want!

Shadows don't have to be all neat and clean like that though. You can scatter them all over the place if you really need to, like this:

And as always, you can go absolutely crazy with the effect if you wish! Here we have the rainbow effect from above - 7 shadows going outward in the order of the rainbow...except this time, I've got the shadows coming from all 4 angle for a total of 28 defined shadows!

And the same general idea again, with more spacing between each shadow:

---

Backgrounds

Alright, so backgrounds may not really be a "font trick," but depending on the font tricks you are using, you may want or need to change the background color for a given string of text. Luckily, this is really simple. We just need to use the background property and follow it up with a color. And if you remember from our big section on colors, anything calling for a color can use any of the methods we went over. Check out how easy this is:

That's about as complicated as setting a background color gets...though you can get a litle fancier with gradients. This might not be the most appropriate effect for these purposes, but hey, I'm sure there's a creative use I haven't thought of, so here it is to do what you will with. I'm not going to spend an exorbitant amount of time on it since it isn't really a font trick, but if you've been paying attention, you should have no trouble implementing these.

The simplest gradient is a linear gradient that by default runs from top to bottom. In its simplest form, it only requires 2 "color stops." The gradient starts at the first color stop and transitions to the second. Let's say we wanted to start at magenta and move to cyan. Our code would look like: background: linear-gradient(magenta, cyan);.

Kinda pretty, isn't it? And if we make the text bigger, the box gets bigger, like this (with a line-height adjustment to account for overlap):

You can also angle the gradient differently - top to bottom is just the default. To do this, we need to specify where the gradient will end, such as to left for a horizontal gradient, or to top right. In fact, we can use any of the 8 directions (to left, to right, to top, to bottom, to top left, to top right, to bottom left, to bottom right). Here's a horizontal gradient followed by a diagonal:

And if that's not enough, we can actually specify the exact angle of the gradient! The degrees can be expressed as positive or negative, for instance -90 degrees is identical to 270 degrees.

Once you get your head around all this, it's time to start experimenting with multiple color stops! You can just continue to add colors to the declaration - as many as you like!

You can also use transparency with gradients by denoting colors via RGBA. This would be good for creating an effect where the background seems to fade into the larger background, though you could of course just construct a "regular" gradient using the background's color in the gradient. I'm sure there are some cool effects to be created with this feature, but truthfully I've never much played with it.

You can also control the spacing of the color stops, but personally I'm confused about how this actually works. I won't go into it all, but the percentages in the stops seem to indicate at what point the thickest part of the color occurs. Play around with these values if you want in order to get a better sense of how to use them.

Why bother going over it if I can't quite explain it? Well, you'll need to define these stops in order to make a gradient repeat. Again, I can't offer much more than some inconclusive babbling; play with the numbers yourself and you'll (maybe kinda) see how it works out:

This might be even less useful in a line of text than the others we've gone over, but we can also create radial gradients. And the same principles apply to radial gradients as linear gradients - multiple color stops, defining the spacing of color stops, and repeating the gradient. I won't go over all of those, but here's an example of a radial gradient with 4 color stops. I went ahead and make the text a little larger. Without it, it'd be hard to even tell there was anything circular going on at all.

Still not too easy to see, so I recommend staying away from these, at least when it comes to defining the background for text. The last option when it comes to radial gradients is the shape. By default, the shape is an ellipse, which will squish or stretch to accommodate its container. For what it's worth, we can define it as a circle...

Let's move on to something that might make these backgrounds even more interesting...

---

Box Shadow

Like the text-shadow that we went over earlier, we can also create shadows for a given "box," or perhaps in our case, an imaginary box that surrounds the content within a span. For the most part, this works a lot like the earlier text-shadow. Two values are mandatory, but beyond that, there are another 4 optional values for box-shadow. We'll start with the simplest form of the property, with a horizontal value and vetical value.

And like text-shadow, next we'll tack on a color!

And another familiar addition, blur! Our fun "glow" effect (where we turn the h- and v-values down to zero and turn up the blur) will

Now we have a new value to add...one called spread. This ultimately determines how large the shadow is. You can also use negative values for the spread to dial back the size of the shadow.

One last option available to us is called inset, where we basically turn the shadow inward instead of outward. It's a strange look and I'm not sure why you'd use it, but nonetheless, here it is!

So, you can see that we have a lot of room to play around with the box-shadow. As you can imagine, it probably looks a little better when the "box" is well defined by its own background color. So let's give it a shot:

Cool! Keep in mind that the other concepts we learned about with text-shadow will also work. One can use negative values to "move" the imaginary light source, and we can do multiple shadows as well!

Or we can just go totally nuts...

Not very practical, but the right creative mind could swoop in and really do some beautiful stuff with these features, probably in such a way where they wouldn't even look much like shadows at all. I still think it's pretty darn cool that we can do all of this without graphics of any kind!

---

Border Radius

Here's a quick and fun trick to use in conjunction with colored backgrounds. By applying border-radius to an element, we can slowly round off the corners of the square box until it becomes an actual ellipsoid. What's even cooler is that if you then use box-shadow, it will follow the shape!

It's difficult to tell you what to set the border-radius to, but the good news is that you can never go "too high," as it will eventually max-out the elliptical shapeand won't go any further. If you want to round off the corners but not quite create a full ellipse, you'll have to play with the value incrementally. The good news is that you can use whatever units you wish in border-radius, and I've found that just over 25% of whatever your font is set at should be enough to "max-out" the shape into a full ellipse, though very small ares (for instance those with a single word and/or in small/medium sized font) may require a value up to 50%. Either way - ellipse or just rounded corners - is a cool effect for a title or even just a simple heading. Let's look at an example of rounded corners followed by an ellipse:

That's it for border-radius! It's not much, but it's a neat little trick for making the most of a heading or drawing a little attention to something (the text does't have to be bigger than usual). And this is the perfect time to segue into our next trick...

---

Borders

Back in Issue 1.16.1 I discussed borders at length, so refer back to that document for the nitty-gritty of creating borders. It can be another nice addition/decoration to your text in some cases though, so I thought it was worth bringing up. Remember, borders can be defined by the shorthand border, each individual border property - border-width, border-style, and border-color - or each side of the border (border-top, border-bottom, border-left, border-right).

When using the shorthand, remember to place the values in the correct order: width, style, then color. You've seen this before, but here's a couple of quick examples. Again, border is discussed exhaustively in 1.16.1, so check it out if you want to know all the ins and outs of creating borders, including a couple of "out there" examples.

---

Text Transform

I'm not sure how useful you'll find text-transform in everyday design, but hey, here it is. It would probably be most effective in styling certain headings or the like across an entire site or using for hover effects. It may also be helpful to know in case you have to undo some previous styling. The text-transform property changes written text into 1 of 3 states, regardless of how it is originally presented. The value uppercase will capitalize all affected letters, lowercase will likewise make all letters lowercase, and capitalize will capitalize the first letter of each word. Here's a quick look at text-transform in action, and then we're moving on!

---

Superscripts & Subscripts

This is one of the more practical font tricks at our disposal, and being able to make super- and subscripted text appear when it should appear will make whatever you're working on that much better looking. There's nothing wrong with "October 14th," but there's something about "October 14^th" that looks just a bit more dignified...don't you think? It's also a cool way to make fractions; 1/4 becomes ¹/₄ and looks almost as good as the special little symbols on the character map...plus you can't get stuff like ⁷/₉ or ¹¹/₁₇ off of the character map.

Fortunately superscripts and subscripts are as simple as a couple of HTML tags: <sup> for superscripts and <sub> for subscripts.

---

Code & "Output" Text

Often times when denoting something "technical" and/or stylistically different from the rest of the text where it wouldn't be appropriate to use something like italics, underlining, or quotation marks, developers will use the <code> tag or something similar. I use it all the time in these documents, primarily to distinguish "normal" text from the text actually used in coding HTML/CSS. Everytime you see text that looks like this, that's me using the code tag! Really this is just a quick shortcut to momentarily changing the font-family to a monospaced font. For whatever reason, there are 3 tags that achieve this effect by default, as well as a 4th tag (var) that appears to be another way to italicize text. What's the point? Well, it's like we discussed way back - it's the semantics of the tag(s) that makes all the difference (according to the W3C, anyway).

There are actually lots and lots....and lots of these "semantically unambiguous" tags. I don't see the need to go over all of these (or even compile an exhaustive list of them in the first place) since many of them just italicize the text. Anyway, here are a few redundancies to feast on:

Alright, enough of these! We've just got a few "tricks" left to go!

---

Mark / Highlight

This tag (mark) mimicks the effect of a highlighter. Basically this is just a shortcode for changing the background color (and possibly the text color), and if you were styling a site, you could set the default values of mark to a color scheme that best fit your site. This is a great way to accentuate text above and beyond italics or emboldening.

---

Small

This one of those tags I don't totally understand the importance of...but maybe you've got the perfect use in mind? This tag will make the affected text smaller than the surrounding text. Let's give it a whirl, shall we?

---

Font Family

Our last "trick" involves changing the actual font that's displayed. I was hesitant to include this at first because I don't want you all going around and changing the font anytime you feel like; it would really disturb the uniformity of the site. But I trust you'll use it wisely! Headings, maybe certain lists, or other offset content that could benefit from a new font are fair game, but feel free to get creative with it too! Just don't go around changing the text of the body of an article...

When using font-family, we need to know a couple of new terms: family-name and generic-family. As you may have guessed, family-name refers to a specific font, like "Arial," "Times New Roman," or "Courier." The generic-family helps the browser choose an appropriately similar font if the family-name specified isn't available. The "fonts" available via genric-family are based on broad stylistic divisions of fonts, and may look slightly different from computer to computer, though the general implication will be preserved.

Typically we use font-family in an interal or external style sheet to define the font for broad sections of a document. When using this property, usually the developer's first choice is listed, followed by second (and possibly third, fourth, etc. choices), concluded by one from a generic-family to ensure maximum compatibility. You may see something like font-family: "Times New Roman", "Book Antiqua", Georgia, serif;. What this means is that, if available, the font "Times New Roman" should be displayed. If that's not available, then the font "Book Antiqua" should be displayed...and if that is unavailable, "Georgia" should be displayed. And yet still, if that isn't available either, we have the generic-family of "serif" to make sure that the browser displays a "serif" font.

Since you won't be worrying about the look of an entire site, you won't have to worry too much about this stuff. In fact, I would recommend sticking to generic-family fonts only if you plan on using the property. Remember, just because you have some super-amazing font on your computer doesn't mean that everyone else does! (There actually is a way around this, but that's way way way beyond the scope of my simple guides.) These family-names tap directly into the fonts available on the end-users computer. If you really want to use that neato font you've found, it's best to make a graphic. That being said, there are some "web-safe fonts" that should work on most devices:

Additionally, there are 5 possible values for generic-family. These are the ones I would recommend knowing and using.

We can implement these using span tags with the font-family property, much like we've handling many of the other effects. Here are some basic examples using the generic-family examples above:

This is all you need to know for the most basic application (and as far as I recommend taking it), but if you want to get more specific with the font, there are a couple of extra things you'll need to know. First of all, always list your fonts in descending order, from "most ideal" downwards. Also, keep the fonts similar. If your top pick is a serif font, don't make your second choice a sans-serif font. As a general rule, you'll want to keep all of the values in the same family. (You can mix it up from a technical perspective, but thematically it doesn't make any sense to do so.) Next, for any font names with spaces in them, as "Times (space) New (space) Roman," you'll need to enclose them with quotes. Normally double quotes would be prefered (" "), but when you're working with inline CSS, you're already using double quotes; to try and use another set will throw everything off. So, you'll need to make sure to use single quotes (' '). Each font should be separated with a comma (,), and commas should go outside of any quotation marks. Finally, it's always a good idea to cap off your list with a generic-family. You can list as many backups as you like, just make sure that last one is a generic-family so that you can be absolutely sure that the browser will render the content as close as possible to your intention. The final generic-family should match the type of your chosen fonts. I'll explain how to make sure you've chosen the correct generic-family in just a moment.

I'm not going to go into any examples of how to use family-name since the results aren't exactly noticeable, but I will quickly go over how to code it in case you choose to go that route. Let's say you want to display the font "Times New Roman." If that doesn't work, your second choice would be "Georgia." Since these are both "serif" fonts, we know that we need to add "serif" at the end of our list. Also, we'll need quotes since "Times New Roman" contains 1 or more spaces, and we'll be using single quotes since we're using inline CSS. Here's what that would look like:

So what's the difference between these values for generic-family? How can you be sure where your chosen font falls? (Other than looking at the Web-Safe List above?) Well it's pretty easy. Cursive is supposed to emulate a handwritten font, while fantasy designates a decorative yet still easily readable. The other 3 have more rigid definitions.

In a monospace font, each character takes up the same amount of space. Monospaced fonts are most useful for offsetting chunks of text that need to appear especially clear. One of the best examples is some sort of coding or other writing that is heavy on symbols. Smaller symbols like commas, apostrophes, and quotation marks, among others, can be more easily seen since each character is given an equal width. Most of the fonts we deal with on a daily basis are proportional, meaning that characters take up space proportionate to their size, i.e. the letter "i" is skinnier than "m" so "m" has a greater width. Here's a couple of quick examples. I've put borders around each character/set of characters to represent the total width.

It should be pretty easy to spot a monospaced font versus a proportional one. Just remember that in monospaced fonts, each character - be it a Q, or a . (period), or a 2, or a ] (closing bracket) - has exactly the same width. If they don't, it's not monospaced.

The other big distinction is between serif and sans-serif. Serif refers to the small projections that finish off the strokes of a letter, sometimes referred to as "feet" or "tails." These "feet" may seem decorative, but they actually serve a purpose. When a bunch of letters of the same size are squeezed close together, these "feet" subtlely bleed together to guide the reader's eyes across the text, acting like small lines for the reader to follow. "Sans," meaning "without," denotes fonts without these small projections, ergo sans-serif. Traditionally, serif fonts would've been used for a body of text, like the bulk of an article, a page in a book, etc. Sans-serif fonts were used for shorter, larger blocks of text such as titles, headings. However, sans-serif fonts have become increasingly popular, particularly with younger generations, and as such you'll find multiple instances where these convetions are ignored. In my opinion though, serif fonts make reading much easier. Go pick up almost any book off of a bookshelf - classic literature, a history book, even cookbooks - and you'll see that almost any block of text is rendered in a serif font.

To each his or her own, but I'm all for using serif fonts when it comes to reading. You decide which is easier to follow:

Hopefully that's enough to help you make informed decisions regarding font changes! Remember, be careful with this effect, don't go changing large areas of text, and try to do what you need with the generic-families.

---

Double Underline

Yes, I did say that font-family was the last that we were going to go over, but since this guide's original inception, I've run across a few "hacks" that I thought would be interesting to share. These aren't totally arbitrary - in fact they're drawn from actual proofreading marks, most of which are archaic or were easier to use based on the setup of a typewriter - but they may just find a place somewhere, so let's get to them.

The reason I'm calling these "hacks" is because they aren't strictly effects in and of themselves. For example in this section I'm going to over a double underline. While it's easy to create, there is no feature in HTML/CSS meant to act as a double underline (though one may be coming), but we can manipulate other properties to achieve a most similar effect. Currently HTML/CSS actually allows you to define your own tags via CSS. I could pick any random string of alphanumeric characters that aren't already recognized and define them via CSS to create my own tag. Take a look at the example below where I define frog (not a "real" HTML tag) within the internal CSS:

We already know that using <em> will yeild the same effect as <span style="font-style: italic;">, right? Well now I've defined my own tag, "frog," which acts as a "shortcut" to using <span style="font-variant: small-caps; color: red; font-family: cursive;">. See it in action:

That's kind of neat, right? Well it would be, and although it's always worked on whatever browsers I've played around with, apparently the practice of "making tags" is widely shunned and designers are instead encouraged to create a class with the same properties...which is sort of what CSS is all about to begin with. So instead of defining our own arbitrary tag, we're supposed to define our own arbitrary class, which means all we really need to do is add a period ( . ) in front of frog in that little snippet of internal CSS I just showed you...like this:

What this little dot means is that we've defined frog as a class, which can then be used within several other tags. To try and keep things as simple as possible, we'll talk about using it within a span tag, something you should be familiar with by now. So instead of the above example where we use frog as a straight-up tag, we surround the affected text with a span tag, of the "frog" class. Below is almost the exact same thing we just did, but like I said, we're discouraged from using frog on its own as a tag, and instead defining it as a class to apply to existing, sanctioned tags.

Right, so what was the point of that semi-technical caveat that didn't even mention double underlining? My point is that I'd love to just "create a tag" to use for double underlining, but being as it's looked down upon (and possibly incompatible in some instances, though I find the claim dubious...), I'll have to create a class instead...or if you'd like, you can use the "long version" as well. What's that mean? It means I'm getting ahead of myself, so let's go ahead and talk about how to actually produce what looks like a double underline.

Cutting straight to the chase, the easiest way to produce what looks like a double underline is to use the border property, confine it to the bottom of the element, and set the "style" to double. The smallest we can make a double border is 3px, since the defined width is split between 1) the innermost border, 2) the gap between borders, and 3) the outermost border. It turns out that this works out quite well. The ultra-thinness indeed makes it appear closer to an underline than a border. Putting all of this together, we can double underline any word/words (anything that we can fit a span tag around) by assigning it the property of border-bottom: 3px double;. The astute observer may notice that we didn't define a border color. This is no big deal, and actually works in out favor. It ensures that the border appears as the same color as the surround text, whatever that color may be. If we specifically define a color, we could get into situations where the underline is a different color than the text, which again will give it more of a "border-y" look rather than that of an integrated double underline.

Obviously the most straightforward way of accomplishing this to use something like <span style="border: 3px double;"> to affect whatever text we want double underlined. You are welcomed to do it this way, though we can also define a class within NB's CSS to account for it as well. Let's try to keep it something simple, 2 - 4 characters...how about dbl? All we need to do is define this class in an internal or external style sheet:

Once this is in place, we can use either span class="dbl" or the longer border property to display the effect:

We can see from one further example that it doesn't truly equate to a true double underline, but it is a sufficient fix (at least until the wider adoption of the CSS property text-decoration-style) and certainly provides more even spacing than other solutions that I've seen.

Depending on your preference, you may like the "alternate" version beter. This combines a typical underline with a solid border. For what it's worth, we'll create a class for this one too, and call it dbl2. Use whichever one you prefer!

Note that these classes will be available in NB's CSS file, so you can use them at your leisure! Of course if you want to do the same outside of the site you'll either need to define those classes on your own or achieve the effect(s) purely through inline CSS, but as long as you're on the site, these classes (dbl, dbl2, and the ones we're about to go over) will all work!

---

Dashed and Dotted Underlines

This is another aspect that the not-yet-widely-adopted text-decoration-style will hopefully eventually take care of, but until then, we achieve these 2 effects in an almost identical way to double underlining: by using border-bottom. We'll want to make the border as thin as possible (1px), confine it to the bottom of the element, and purposefully not define a color so that the line is sure to take on the existing color. Again, we can pull this off using inline CSS or we can create a couple of classes, like such:

Example time!

Nothing to it, right?

---

Reversed Italics

This final "hack" (for the time being, anyway) is also my favorite and I really wish I had more of an occasion to use it. The "workaround" to create reverse italics dips just a little into the more robust and complicated features of CSS. Due to the deviation of implementation compared to the underline "hacks," I recommend against trying to use these with inline CSS and instead sticking solely with the classes we're about to define. If you decide to take the trick off-site, again I recommend creating a class within an internal or external style sheet and then using that class rather than messing around with inline CSS.

Before we go any further, I probably should clarify a few things about what "reversed italics" means. Topically it's exactly how it sounds - italic letters that lean "backwards" instead of "forwards." However, we know that italicized text is not simply slanted/skewed text; the more appropriate term for skewed text is of course "oblique." "Italics," while almost often skewed as well, will also generally feature additional ornamentation and flourishes to the lettering, along with some slight "corrections" to enhance the appearance of the skewed text. In the strictest of definitions, "reversed italics" refers not only to backwards-skewed text, but also backwards-skewed text that has been "corrected" and embellished to reflect said skewing. By this definition, it's not truly possible for us to create "reversed italics." However, there are a few fun things we can do with this hack; we can create a "reversed oblique," "upright italics," and reverse-skewed italics, where we change the direction that the italic text is skewed, though whatever "corrections" or "embellishments" were made still remain tailored to a forward-skewed version of the text.

Let's go ahead and define classes for all of these and then get into the how's, why's, and examples afterwards. I have used comments within the below CSS to denote each class.

I know that's a lot to take in, but don't worry, you don't really need to know too much about how all of it works. In fact, a lot of what you see is just browser cross-compatibility stuff.

Let's go ahead and take a look at our first defined class, rev, for "reversed oblique." This probably comes the closest to an actual "reversed italic" and if I ever can find a proper time and place to use reversed italics, it's likely that you'll catch me using this one. In oblique text, the letters are skewed somewhere around 15 to 20 degrees. In this instance, all we're doing is telling rev to skew the letters in the other direction. We're also adding in display: inline-block so that we can effecitively use this on an inline basis instead of having to apply it to entire block somewhere. Check out the effect below along with some simple comparisons:

Unfortunately this is a less than ideal solution even though it's "theoretically sound." The appearance tends to feel a little "off" for most people, which is precisely the reason that specialized italic versions of fonts exist and why we don't generally use the oblique form. The readibility will depend on the font itself to some degree, for instance sans-serif fonts will typically appear less "off" than serif fonts, which in turn will be more legible than highly ornate fonts:

Do reversed oblique/italics have any place in actual writing? No, I don't think so, although it has been proposed by several individuals to indicate sarcastic or ironic text (in the same way that various forms of punctuation have been proposed for the same). Personally I enjoy having another stylistic option available, though our "reveresed oblique" may not quite be ready for prime-time. Although you'll need to define a class for yourself if working outside of NB, you can achieve this effect on the site by using <span class="rev"> and closing out the affected text with </span>, much like the rest of these tricks that we've gone over.

Now we're moving on to our next class and effect, "up-em" or "upright italics." This does have some practical value in certain mathematical and other technical contexts, but aside from that, "straightening" the italic font while preserving all of the enhancements makes for an interesting look. You could use this to offset text similar to how traditional italics are used, or you may get some mileage out of it when dealing with titles and headings. I haven't yet run across any wildly useful applications of upright italics yet, though the effect is unique enough that I consider it worth adding.

Pretty neat eh? In the same way that we skewed the text in the opposite direction to create the reversed oblique text, we can shift the skewing the italic text the opposite direction (thus un-skewing it) as well, creating the above effect. Remember that "italics" are an artistic rendition of the font, not simply an applied effect, so it will look a little different depending on the font used. Some fonts (especially some in the sans-serif family) may have very basic italic sets or none at al (relying instead on the oblique), so if you've got a specific appearance in mind, you want to make sure the font-family is defined as well.

As you can see, the effect can be much more or less striking depending on the font. (Remember though, we are just working with broad font-families.) The cursive and fantasy fonts appear almost normal; we can see that their italic forms are unadorned, meaning that there isn't much there to make them unique was the skewing is "undone." Sans-serif and monospace appear slightly reversed if anything, and this has more to do with how far the italic versions have been skewed. You can always adjust the number of degrees the text is skewed in the original CSS, just keep in mind that the higher the number the more the letters will skew to the left. The lower the number (including negatives), skews text to the right. Play around with the degrees to get that perfect effect, just realize that it may change from font to font and that you may want to create different classes depending on how often you'll be using Upright Italics over multiple fonts.

That's about all there is to upright italics; just use <span class="up-em"> whenever you need it. And remember that the more ornate the font looks when italicized, the more dramatic the upright effect will be.

Alright, now we're on to the last of these "reversed italic hacks," which for lack of anything better to call it I've dubbed "pseudo fake italics." We've established that merely skewing text does not italics make. In order to achieve a truly reversed version of italics, we need all of those little flourishes and corrections to work in the opposite direction. This could be the most useless of them all simply because it is so strange looking, and I'd recommend sticking with our reversed oblique (rev). What we're doing here is taking the upright italics and skewing it even more to the left to give it that backwards-slanted look.

The effect is more dramatic than the reversed oblique, but it's also a little "weirder" to look at. I suppose either will work - for now - so if you ever feel the need to express something in reveresed italics, feel free to use either rev for an effect like this, or rev-em for an effect like this.

---

And holy cow...I think that about wraps up all of these font tricks! CSS actually has a few other "tricks" up its sleeve, but being that they aren't supported by any major browsers just yet, I haven't discussed them. (It'd also be pretty hard to display them...) Most current browsers support most of these features as I've listed them. I've tested/viewed everything you've seen here in Chrome. It is possible that some properties may render differently in different browsers, though generally speaking, Chrome and Firefox do a great job of keeping up with everything while Opera and Safari come in at close second.

I hope all of this is explained in a simple enough manner for all of you to understand and put to use; if not, please let me know and I'll be glad to help! These are really easy and basic uses of HTML/CSS so even if something seems confusing, it's probably something we can clear up quickly. Also remember that you can combine many of these effects with each other. They don't have to be used one at a time. That doesn't mean you should go all out every time, 'cause it's really easy to go overboard with these effects and create something gaudy and unprofessional. However, if you start thinking outside of the box and if you're creative enough, you can do some really amazing things with some of these things...I have seen some crazy awesome stuff out there done with 1 or 2 simple concepts applied in unique ways. Don't be afraid to experimet!

Lastly, once you understand how all of this stuff works (more or less), I'll save you the trouble of having to scan all the way through this document for a simple property or value. So, when you get to that point, head on over to the quick and easy 1.18.1A - Reference. I think that's it! We'll see you again in 2016!

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com