So that was my introduction to font properties for Thesis 2 websites and the next thing we’re going to talk about is css2 text properties. Text properties may seem a little arbitrary, that is the distinction between font and text properties.
For example, color could just as easily be for a font as text, as long as you’re thinking of font generically but nevertheless, CSS groups things like color and line height and text-align under the heading of text color.
Something that I see people do most often is attempt to use the text-color as the way of setting color and there was some version of HTML in which text-color was a designator for inline styles but that was a long time ago and it doesn’t work anymore. If you want to specify the color of text, you simply use the word color.
Line height is the height between lines so it includes the height of the text plus the spacing in between the lines. Line height is measured from the bottom of the font up to the top of the line height.
Sometimes you may end up with fonts like this where you think this might be a little bit too close. This is when a line wraps the second line but the text is too close or too far away. And the property that you use to adjust that is the line height property.
The line height property takes the same units of measurement as do fonts. So it can be em’s, percent or in pixels, I’d generally do it in pixels.
Thesis’ Golden Ratio Typography
Thesis 2.1 users will note that Chris has his golden ratio typography built into his skins. And an aspect of golden ratio typography is a calculation of line height based on the font size, font style and content width. So on most the diythemes skins and on all of my skins, line height is an automatically calculated value based on his golden ratio typography.
Next up we have vertical align. Now vertical align is kind of interesting, it gives you values for aligning text within its parent. For example, if you have a letter that you want to be superscript or subscript you can use vertical align to adjust its height relative to the rest of the text around it.
We can actually come take a look at that. For example, vertical-align has a bunch of different values. Base line means that it lines up with the base and you can see the sub drops it down, super pulls the other part down, top vertically aligns with the top of the text.
Top and text-top don’t really mean very much in the context of text but when we start talking using vertical-align with images, you’ll see what’s going on there; text-top is the top of the text, top is the top of the line. Middle, again aligns the middle of the text with the baseline. Bottom aligns the bottom of the text with the baseline.
Text-bottom, again, that’s the same thing except if you have large fonts and you have lots of these little aspects that drop below and you’re using something else to vertically align, bottom and text-bottom can be different places.
Then you also have the opportunity to use pixels to really move stuff out of the way, to change things around. We will be talking a little bit more about vertical-align and positioning here in just a few minutes.
You also have text-align, you’re probably already quite familiar with it. Text-align allow you to align it to the left, align it to the right or align it to the center. Text-align:left is default. That’s the way text automatically happens, it is aligned to the left unless it is changed otherwise.
Text-align:center and text-align:right are just other values you can use and besides that you also have text-align:justify. It happens to be something that my wife likes a lot in texts on our site and so she’ll routinely take texts and justify it.
You can see what it looks like if it’s aligned to the left, this edge is ragged. If it’s justified, the lines are spaced out so that they fill the text area. Center of course, centers it. Right, right aligns it with the jaggedness on the left hand side instead of on the right hand side. We’re going to talk about text-align in the context of positioning things here in just a few minutes.
Next we have text-decoration and it is a tool used often in links to designate that it actually is a link. So the fact that when we hover on this link you will see the underline there, that is the text-decoration property with the value of underline.
Sometimes you want to show text that is being written through so you might use line-through. Sometimes you might put a line on top and so you’d use overline. Again you can see none, underline, overline and line-through. In BYOB skins I use underline on hover for links and no underline for the none-hover state for links.
Text-transform is the other thing that Thesis likes to do. A good example of that is the typical Thesis menu is often used as text-transform:uppercase and so if you’re looking at a standard Thesis menu you’ll see that it’s all an uppercase even though you didn’t type it out that way. It’s because it’s using the text-transform:uppercase for that.
The same thing can be done for lowercase though, let’s just say that you want all your titles lowercase but you’ve typed some of them lowercase and some of them not all lowercase, you can just force the whole thing by using text-transform:lowercase.
The same thing is true with capitalize. It will take the first letter of each word and will capitalize it, regardless of what you’ve actually capitalized. Lowercase will make it all lowercase regardless of that and an uppercase will make it all uppercase regardless of that. So there’s capitalize, there’s uppercase, there’s lowercase and there’s none.
Then finally we have letter-spacing and they actually don’t put that under text, it just kind of hangs out there by its lonesome but letter spacing is also something that Thesis uses routinely.
Letter-spacing essentially places space between each letters in every word. Again you can use any value that you can used with text and they can be positive or negative. Negative letter-spacing actually makes texts closer together. Positive letter-spacing makes texts further apart.
Let’s come over here and take a look at it. There’s a 3px letter-spacing, there’s a 20px letter-spacing, there is a -3px. There may be cases where a minus letter-spacing is appropriate especially with some of the hosted fonts because they may have a very large fonts with a very large spacing and you may want to decrease them somewhat.
Sharon points out that she uses -1px sometimes in headings just to reduce the link of the headings and especially if you’re using a wide font like Helvetica, that can be a very useful tool.
So this is an example of uppercase and 1px letter-spacing. If you just take a look at that text it’s text-transform:uppercase letter-spacing:2px. I think it used to do letter-spacing:2px in Thesis 1 as I recall.
Anyway that is text-transform and letter-spacing and that is sort of the end of the not wildly exciting CSS2 font properties on text properties. We’re going to take a quick look at using text-align for vertical aligning and positioning.