Start learning with our library of video tutorials taught by experts. Get started

Web Fonts First Look
Illustration by John Hersey

CSS font capabilities


From:

Web Fonts First Look

with James Williamson

Video: CSS font capabilities

Before we talk about the mechanics of supplying web fonts to your sites, I want to take a moment to review the typographic capabilities of CSS. Understanding these properties will go a long way towards helping you control the formatting of your web fonts. In this exercise, we're going to stick to the CSS 2.1 capabilities. Later on, we'll introduce some of the new features introduced in CSS 3. So I have a file opened the css.htm from the 01_02 folder in the Exercise Files.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Web Fonts First Look
3h 23m Appropriate for all Jan 12, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.

Topics include:
  • What are web fonts?
  • Understanding the font stack
  • Using @font-face
  • Rendering basics
  • Choosing a font hosting service
  • Downloading licensed fonts
  • Generating web fonts
  • Font sizing
  • Transforming text
  • Creating special effects with text shadows
Subjects:
Web Web Fonts
Author:
James Williamson

CSS font capabilities

Before we talk about the mechanics of supplying web fonts to your sites, I want to take a moment to review the typographic capabilities of CSS. Understanding these properties will go a long way towards helping you control the formatting of your web fonts. In this exercise, we're going to stick to the CSS 2.1 capabilities. Later on, we'll introduce some of the new features introduced in CSS 3. So I have a file opened the css.htm from the 01_02 folder in the Exercise Files.

Really we're just going to play around with some font properties here. So any HTML file with text in it will work. You'll also notice that I'm using Dreamweaver. You're certainly not required to use Dreamweaver. You can use any text editor or IDE that you want to use. Just preview it in a browser, and you'll see exactly what we are going to be doing. So, we've got a couple of paragraphs over here on the right-hand side and we're just going to add some CSS to style it and get a feel for what CSS allows us to do when we are formatting our text. So the first thing I'm going to do is go into the code here and click on about line 7.

That puts me between these empty style tags. So we're just going to add some embedded styles and I'm going to write a selector for my paragraph. So I'm just going to do a p, and then open and a close a curly brace, and I just like leaving them on their own lines. Although certainly you could do all of your CSS on one line if you felt like it. So the first thing that we're going to do is define a font-family and that's often the first thing anybody does when they're formatting text. They like to pass in the font that they want to use. I know that this course is focusing on web fonts and we're certainly going to talking about how to supply those web fonts a little later on.

Right now, we just want to focus on the ability to declare a font family. So we're going to use the font-family property to do that and the font family that we're going to ask for is Georgia, Times New Roman, Times, and serif. I am going to let Dreamweaver's code hinting do a lot of the work for me. Obviously, if you're doing that on your own in the text editor, you can just type that out, and then a semicolon to end that particular property. What's going on here? Well, what you're seeing is something that we called the font stack. It's simply a comma-separated list of fonts and what happens is the client will look to see if it has the first font installed.

If it does, it'll use that. If it doesn't, it'll just move on to the next one. Now obviously later on we're going to be talking about building font stacks based on the web fonts that you're going to be supplying. Right now, we're still just asking for normal standard fonts. Now I'm going to click over here on the right-hand side in this design pane, so it'll update, and indeed now I'm seeing my text in Georgia. So the font-family declaration is supplying a brand new font for me. Now I'm going to go down to the next line and the next thing I want to do is control the size of my text. How large it is.

To do that I'm going to use font-size, the font-size property, and I'm going to make this a little bit bigger so that we can see the text well. So I'm going to type in 1.2 em. That's ems. It's a relative unit of measurement. I'm setting it essentially to about 120% of whatever the default font-size would be. If I click back in my text, I can see now it's good bit larger. If I go down to the next line, I'm going to control the line spacing, the space between our lines. A lot of graphic designers will use the term leading to refer to that.

But in CSS, we use the term line- height and we use the line-height property. So I'm just going to type in line-height. For line-height, I'm going to use a multiple instead of a fixed value and let me show you what that looks like. I'm going to do 1.5 and then a semicolon. So you'll notice I'm not passing in any unit of measurement there. I'm not using pixels. I'm not using ems. I'm not using percentages. You certainly could if you wanted to. But by leaving that off, this is essentially multiplying the value of the font-size by this.

So I'm just saying, hey, one and a half times whatever the current font-size is. Line-height is actually the only CSS property that allows us to use multiples. The helpful thing about using multiples for line-height is that if this is applied to a parent element and the line-height is being inherited, instead of inheriting the calculated value of the parent element, it'll just go ahead and do the same calculation for everything inside of it. So, a good rule of thumb is to stick with using multiples for line-height. So if I click back in my text, now you see I have increased amount spacing and that's looking a little bit better.

The next thing I'm going to do is change the color of my text. When people first come to CSS and start learning it, one of the first properties they look for is something like font color or text color and they never find it. Now that's because it doesn't exist. So if we want to change the color of an element, we use basically the foreground color property. So I'm going to go down to the next line and just type in color. For color, I'm going to just pass in a hexadecimal value. I'm going to use #333, which is a gray. If I click back on my text again, now I don't know if you noticed it or not, but it got a little bit lighter there.

So it's not solid black now. It's more of a dark gray. Next, we're going to experiment a little bit with some of the different stylistic choices we have for our text. So we're going to be bolding our text and italicizing it and changing it back just to see kind of what those properties can do for us. So in the next line, I'm going to add the font-weight property. font-weight. You'll notice that Dreamweaver's code hinting has given me some numeric values. If we were to pass one of those, it essentially tries to make the font lighter or bolder based upon those values.

100 would be as light as the font could get. 900 would be as bold as the font could get. But you can also pass keywords. So I'm just going to type in bold and if I click over on my text, I can see that indeed it is bolding the text. Now you can pass numerous values into this. There are multiple keywords. Another keyword that we can use is normal. If I click back, now it changes back to not being bold. So essentially, we have the ability to make headlines not bold or bold by default and make body copy bold if we wanted to.

We can make all of our captions bold or not bold by just using the font-weight property. Next, let's try a property called font-style. font-style. Now font-style allows us to italicize our texts. So I'm going to pass the italic property. If I click, again it's italicizing my body copy. So I can choose whether I want my text to be italicized or not by using the font-style property. Now once again I'm going to change that back to normal. That's a keyword that allows us to take text that would normally be italicized, and just display it as normal text.

For those of you that know HTML, you are also aware of the fact if we have tags in HTML that will handle this for us as well. We have a strong tag and we have an em tag, an emphasis tag that will bold and italicize text respectively. But remember that those tags are structural. So you use them because you want the structure of the text itself to be changed. If you're just wanting to change the text visually and in terms of presentation, you should use the CSS. So I'm going to go down to the next line and do some styling options that are little bit more optional and that you might not have seen as frequently.

So the first one I'm going to do is font-variant and font-variant allows us to apply small-caps to our text. If I click on my text again, then I can see the small-caps are applied. You'll notice that Alice here is capitalized. So we're actually seeing the variation in size there. This is really good for certain headings or certain captions, really good for some really nice stylistic treatments on text when it's appropriate. Later on when we start talking about web fonts, we'll talk more about how some of the higher quality fonts will actually have small-cap glyph characters in it which will take the place of the browser applying any type of proportional scaling to the text.

Let's go down and try another property. Well, just as a matter of fact, let me take that back to normal so we can see the next effect. The next font formatting property I'm going to use is the text-transform property. text-transform. Now this one allows us to do some really cool stuff. We can take all of the text in a given element and capitalize it. We can make everything lowercase. So it's really good for menu structures or headlines that you need everything to capitalize in, or we're going to just go ahead and choose uppercase.

You'll see that now it replaces everything with uppercase letters. So notice that it is not the same as small-caps. We're using full size capital letters and everything gets capitalized. Once again, you can also pass in the value of normal. A lot of people will say "Well, wait a minute, you know, if you want it to be normal, just don't use text-transform." Well, that's true, but sometimes it might be inheriting the value from something else. There might be something going on on the page in terms of user interaction where you need to toggle that back and forth. So it's really nice to be able to pass both of those properties. Now the next thing we're going to change is text alignment.

To do that, we're going to use the text-align property. Here we go. There are a couple of different ones that we can use here. We can use left, right, center, and we're going to go ahead and do justify. So that'll justify our text. Notice that in HTML when it justifies text, it does a last line left indent. So it doesn't try to force that one word to go all the way across the width of the paragraph. This is definitely a judgment call. Stylistically, a lot of people like left justified text.

A lot of people prefer not to do justification because of the spacing issues that it provides. But it's really up to you. If you want to do the default, you can just type in left or leave text-align off, because the default for HTML is to left-align your text. In terms of formatting, HTML and CSS really doesn't give us quite a power that you might be used to in other desktop programs like InDesign or Illustrator. But there are a lot of things that we can do that are very similar. For example, in InDesign, you could do tracking, which is the space between letters.

It's not quite kerning, which is the space between individual letter pairs based on the letters, but tracking is more of an overall spacing and that we can do. We can do that by using the property letter-spacing. So I'm just going to go ahead and do letter-spacing. We'll go ahead and give it a value of .5 ems. So half an em, and when I click on that notice that we have a lot of space between the letters of our text. Now I'm going to go ahead and change that value to something that's a little bit more readable, .1 ems. There we go.

You can see that's sort of opened up the spacing of the letters. In certain instances, this can make your text a little bit easier to read. On screen it's generally helpful to have a little bit more space than you need on the printed page. This is one of the things that'll allow you to do that. Another property that allows you to control spacing is word-spacing. So I'm just going to go ahead and type in word-spacing and let's try a bigger value first, .5 ems again, half of an em. You can see that now the space between the words itself is growing. This is really helpful if you're trying to fit a line into a certain spot or if you're just trying for a certain spacing options for headlines.

Again, I'm going to go back into my CSS and I tell you what. I'm just going to pass a value of 0 there to turn our word-spacing off. There we go. We're back to just having a letter-spacing only. Finally, there are just a couple of more properties that I want to talk about. The first one is text-indent. So I want to do text-indent. Text-indent does exactly what you think it does. If I do a text-indent of 1 em, notice that the first line of each paragraph is indented by that amount. So if you're dealing with a headline, the entire headline is going to shift because headlines for the most part are on one line, but for paragraphs, generally you're getting that first line indenting in.

Then finally, I'm going to change the width of these paragraphs. In order to format your text for a maximum readability on the screen, it's a good idea to limit the width of your paragraphs. If somebody is trying to scan the entire width of their display and then come back and read again, it's a little tougher. So a lot of times you want to limit the width of these paragraphs. You do that by using the width property. So there is no text specific width property. The width property basically can be applied to any element. In this case, we're just applying it to a paragraph and you can pass pixels in, percentages.

In this case, I'm just going to use ems so that we're staying with the same unit of measurement. I'll do 20 ems. When I click, you can see it's creating a little bit more of a column look for this text, not quite as wide. In certain instances that's going to be a little bit easier to read. So I'm going to go ahead and save this. Now as you can see, you have a fair amount of control over how your text is formatted and set. Maybe not quite as much as you're used to if you're a graphic designer and you've been working on the desktop with programs like InDesign, but still a pretty powerful set of controls here.

Now later as we build out an example page with web fonts, we're going to examine some of the additional typographic control brought to us by CSS3. For the most part, the properties that you see here are going to form the core controls of all of your text formatting in CSS.

Find answers to the most frequently asked questions about Web Fonts First Look.


Expand all | Collapse all
Please wait...
Q: This course was updated on 12/13/2011. Can you tell me what's changed?
A: The movie "@font-face syntax update" was added, which explains changes to @font-face in HTML5.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Fonts First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Web Fonts First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Choosing and Using Web Fonts in the lynda.com Online Training Library.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked