Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're a graphic designer you're probably used to having an amazing amount of control over typography. Especially if you take advantage of the capabilities of most open type fonts. Sadly, the full-range of features like ligatures, ordinals, and other alternate characters aren't available to us through CSS. Now the W3C is putting the finishing touches on open type support and browsers are starting to implement it, so it shouldn't be very long before we enjoy more control over our typography, and in the meantime, there are some properties that extend what we can do in terms of using alternate characters.
One of those, the font-variant property, allows us to specify the use of small-cap, so let's go ahead and experiment with that. We can open up the variant.htm file. This is found in the 04_06 directory. And if I scroll down I can see that I have again some very simple page structure here. The headline that says font-variant, and inside of that I have a paragraph that sort of describes how this works. So I'm going to go back up to my h1 rule and underneath the font-size, I'm just going to type in font-variant: And there are a couple of values that I can use for this, really just two keywords that you can use.
Normal, which is going to overwrite any small-caps usage that you might have on another rule that's being applied to this one as well, or you can use small-caps and that's what I'm going to do here. So I'm going to do small-caps; save this, and I want to preview this in one of my browsers, and when I do that there are my small-caps. Now it doesn't look great and a lot of this depends upon the font that you're going to use. For example, if I go back in and change my font-family here, just really quickly I'm going to just change it to Georgia, save this and test it again, you can see that I get quite a different look and feel from that.
I think it is the term but there's really not a lot of variation to the font-variant property. Now it can be a very handy technique to have around in certain situations, but like any formatting option that uses alternate characters, you want to be sure to test it in as many browsers as you can, to make sure that the font that you're using and the size of the text is giving you the quality that you need. In terms of font-variant, if the font itself doesn't include a small-caps variant, the small-caps property may not often look as good as you'd like it to.
Since in those instances the browser goes ahead and just scales the font down, so sometimes there's some variations and boldness of the letters that you want to account for as well. So if you're going to use font-variant, my advice to you is just use it with a little bit of caution, experiment with it, and make sure that the formatting looks the way that you want it to, before you commit to it.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65637 Viewers
61 Video lessons · 96413 Viewers
56 Video lessons · 110153 Viewers
82 Video lessons · 105076 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.