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

Web Fonts First Look
Illustration by John Hersey

Using weights and styles


From:

Web Fonts First Look

with James Williamson

Video: Using weights and styles

When working with system fonts, the browser handles the process of dealing with weights, styles, and any variants that you might need. Web fonts give us the ability to use a range of styles from the same family if they're available to us and this means when we are working with web fonts, you are responsible for serving the proper version of the font. Instead of letting the browser bold calluna for example, we might want to use calluna semi-bold. By controlling how our faults are delivered, we can do just that. So we are going to go back to Alice in Web Fonts page in just a moment and we are going to make sure that all of our fonts are using the proper family style when applicable.

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

Using weights and styles

When working with system fonts, the browser handles the process of dealing with weights, styles, and any variants that you might need. Web fonts give us the ability to use a range of styles from the same family if they're available to us and this means when we are working with web fonts, you are responsible for serving the proper version of the font. Instead of letting the browser bold calluna for example, we might want to use calluna semi-bold. By controlling how our faults are delivered, we can do just that. So we are going to go back to Alice in Web Fonts page in just a moment and we are going to make sure that all of our fonts are using the proper family style when applicable.

And doing this, we are going to examine the methods required to request a proper font style anyway, based on how the fonts are being served and then add a little stylistic variety to our text as well. Okay so you'll notice I am at Typekit and what I want to do is go to my Alice in Web Fonts kit and launch the kit editor. And there is just something I want to show you here about the way to request different weights from Typekit. That's a little different than self hosting and Google fonts. The Google fonts, you just say hey I want to use the bold, I want to use italic and then you just reference bold and italic in your styles. Easy enough.

TypeKit, on the other hand, you will notice that we have already families of calluna, light all the way to black and we have all of then bud black in our site actually. Well, I'll notice that right down here in the lower right hand corner of the Weights & Styles pod. If I click Advanced, it gives me a listing of the value that I need to use request that particular flavor of the font. So if I want semi-bold, I have to use 600. If I want bold, I have to use 700. So bold normal. That's not going to get it done. I need to request 300 through 900 to get the Light, Regular, Semi Bold, Bold and Black.

Now italic, I just say normal or italic and it will serve that properly but in order to pick the way that I want, I have to use those numeric values. So those are the things that you want to sort of right down or be sure of before you go back in your CSS. Now I should also point out to you that in these larger families where you have multiple weights and varieties, Internet Explorer is only going to allow you to use four of them. And it's a limitation. It's actually in the specification that describes how Internet Explore will only accept four family names. So that's something that you also need to be aware of if you are using one of these larger fonts.

I am going to go close out of that and close out of that and go back into our file. So here I am. I have the main.css from the 04_05_CSS directory opened in our Exercise Files. I have changed the Dreamweaver layout a little bit and it is not because I want to use any Dreamweaver tools here. It is going to make a lot easier for me to show you what I'm targeting on the page. So I'm going to turn on Live View so that its renders may be a little bit better. It will still show us our accurate fonts or accurate rendering, but we will have a good idea of at least what we are targeting here.

All right, so what I want to do is I am going to start at the very top and this is Alice in Web Fonts. They are couple of things I want to change here. First of the word N, I don't want that to be bold and the word Web Fonts, I really want that to be all caps. So I am going to go ahead and change that. So I am going to scroll down through my file here and I am going to find my headline styles and I can find those at about line 112, right around in there. In addition to the main one, I actually have these individual ones: the AliceHead, which is the word Alice, the inHead, which is the word in, and then webHead, which is the web fonts.

And the first thing I am going to do is go to the inHead and I am going to change that to font-weight:normal. Since it's in a heading 1 tag, it is going to bold it automatically and then I need font-style to be italic. Normalizing it and italicizing it on the same beat and if I look over here now, I can see it's no longer bold, it's italic. So that's looking much nicer. Now if I go down to the h1 span#webHead, I can see that this is league-gothic. So what I want to do here is I want to go down to the next line.

I am just going to use the text transform property here, so a text-transform and I want those to be all uppercase. So again, I will save that and now Web Fonts is going to be all uppercase. And that's obviously not the font that we are using but you at least give the idea. Now I am going to move down a little bit further into our chapter headings. And here we have Chapter One Down the Rabbit Hole. That's an h1 tag and then we have "In which Alice falls a very curious-looking rabbit down his hole in an odd hallway." This is all one line actually and that is a heading too. So we are going to target that h1 and that h2.

Now the h1 is using junction. Junction, remember, we're self hosting and there's only one flavor of junction. There is no junction bolder, there is no junction italic. Now because of the fact that it's a heading one, the browser is going to attempt to bold and I really don't want that to happen because the font is the way I wanted to look. So I am going to scroll down through my styles and I'm going to find this section chapterOne header h1 on line around 174 or so. And I'm going to set that font weight. So font-weight to normal.

Save that and you can see the difference. You can see it's a lot lighter over here now. This chapter name "Down the Rabbit Hole" is actually in its own selector as well right below that. And I want to italicize that so I am going to do font-style and I am going to do italic. There we go, save that and I can see that it's italicizing it. Now there is a very important distinction here. Junction does not have an italic version of its fonts, so what's going to happen is the browser is going to oblique those characters for you. Now if we had a junction italic, because we are self hosting it, we would have to do another @font-face declaration using the junction font family name and then pass the font-style italic into that declaration and then it would use the proper one.

Now if you are interested in seeing how to do that in a little bit more detail, check out the earlier movie on @font face and you will get a more detailed description of how to do that. Now I am going to go down to the next selector, which is the chapterOne header h2, and this is using calluna. So here when I choose a font-weight, instead of saying normal because I don't want that to be bold, I am going to pass a value 400. Remember 400 is the regular version of this font. So if I save that over here, I notice that I am not getting the bold version of that. I am getting only normal version of it.

Now each of these lines, top, middle and bottom, have their own selectors as well. So here's my top line, here is my middle, and here is my bottom. I am going to use a little bit of variation in here as well. So for the middle line, I am going to ask for a font-weight here of 600. That's semi-bold. And for the bottom line, I am going to ask for a font-weight of 300. That would be the light version. So I am using regular, semi-bold and light on the same one. And I am going to do another text-transform here and I am going to do uppercase on the bottom line as well.

So if I save that and test it, I can see very dramatic change in these headings. Now if you want, you can upload your main.css and preview in the browser. I am going to do that at the very end. Okay, the next thing I want to style are my sub headings right here, this "Alice continues her fall." If I scroll down a little bit, I can find on line 222 section#chapterOne section.subSection h1. That's the heading one right here. And again just using Junction. I know it's in heading so it's going to false bold it so I am going to prevent that from happening. So I am going to do font- weight and I am going to do normal.

Save that and I can see my change. Cool! Now one last thing I want to do here, guys, if scroll up, the very top of this is the beginning of the body copy for this chapter. Every single chapter that begins with the body copy, I would like to create a drop cap. So I want to do that by using CSS and it's actually relatively simple to do. So I am going to go back over to my styles and scroll down and I am going to find this selector right here, section.subSection p.first:first-letter. So this is targeting any paragraph with the class of first and it is targeting the first letter in that. So this paragraph does have a class applied to it and it has the class first.

So on the link line inside that, the first thing I am going to do is float this letter to the left. It's going to cause all the other texture wrap around it. I am going to give it a font size of 380%. Really crank it up of good bit larger so it's going to take multiple lines. For color, I am going to choose rgb(118,81,106). That's a plum color that we're using in our site and if you're interested in finding these colors the very top of the styles, there is a little color table.

You can copy and paste from it if you would like. I am also going to padding to the right so I am going to do some right padding of 0.1em. So that's just going to hold the text off of the letter just a little bit on the right-hand side. I am going to give it a font-weight of 600. Remember this is calluna so 600 is semi-bold. So this'll be a little bit bolder than the characters around it. For a line-height, I am going to do 0.8em. Now that may seem look kind of odd and really this is targeting Webkit browsers. The gecko-based browsers are going to basically treat any coded inline character like this is has a line height of 1 but Webkit browsers on the other hand recalculate line height.

So by saying 0.8em, I am basically shrinking that down a little bit for Webkit browsers, where it's knowing that Firefox is going to ignore this. So it's just one of this little workarounds we have to every now and then. And margin-top of 1 pixel just to push it down a little bit. Now I do want to say that things like line height, sizing, padding, it's going to be different for every single font you do, so don't take these settings as gospel, like "oh here is how I make a drop cap," but you are going to use types of properties to sort of experiment a little bit. Okay, so I am going to save that and I can sort of see my drop cap. So I want to see what that looks like live online.

So I am going to save the file, upload it, and preview this in the browser. And I can see web fonts there is now all uppercase. I am getting italicized, non- bold text there for the word in. Junction is appearing not false bold but like I wanted to. I have got three different weights here of my subheadings and there is my drop cape. And my subheadings aren't being falsely bolded either, so that's perfect. You know getting the proper variation of your font family is really good. It can depend a lot of times on whether that style of weight exists as part of the larger font family.

Now unfortunately in many instances, browsers are still going to resort to the false bolding and skewing the text when obliqueing it, scaling a character proportionally, if you are doing it like the small cap. And since the quality of this can vary widely, a best practice that I would recommend is to always serve the browser the proper weight and style for the font, if you have it, and then test that font in the browser to make sure it's rendering the way that you expect.

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