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

Web Fonts First Look
Illustration by John Hersey

Font sizing considerations


From:

Web Fonts First Look

with James Williamson

Video: Font sizing considerations

If you worked with CSS for any amount of time, you've probably spend at least some time trying to decide what size to make your body copy relative to your headlines or your captions and other elements on the page. In this movie, I want to explore that process a bit further. By taking the font itself into consideration and using a technique called modular scaling. So here I have a couple of Typekit specimens open for all the fonts that we are using. If you're browsing in Typekit, if you go to Browse, you can go to Specimens and you will see a little link that says Open Expanded Specimen, well, this is what you get.

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

Font sizing considerations

If you worked with CSS for any amount of time, you've probably spend at least some time trying to decide what size to make your body copy relative to your headlines or your captions and other elements on the page. In this movie, I want to explore that process a bit further. By taking the font itself into consideration and using a technique called modular scaling. So here I have a couple of Typekit specimens open for all the fonts that we are using. If you're browsing in Typekit, if you go to Browse, you can go to Specimens and you will see a little link that says Open Expanded Specimen, well, this is what you get.

It's a really cool specimen sheet. It provides you with some sample characters, text that then resizes so you can help find sort of the sweet spot, if you will, of that text. Some contrast, comparisons, and one of my favorite features, which is the Body size comparison. It shows you how this text sort of stacks up, if you will, in terms of its Body size comparison and line height to Arial, Times, and some of the more common system fonts being used in stacks. You could go through, check out Junction. You can check out Old Standard, a League Gothic, and sort of see how they are relative in size, because 1em of one font versus another em of another font, you are going to get different sizes.

This is going to help you figure out whether this headline should be maybe a little larger than the other headlines, this one a little smaller, based on the height of the uppercase characters, things like that. Now I want to turn our attention to Calluna. This is our body copy font and in print design it's a really standard practice when you have a text heavy layout to make the rest of the layout sort of respond to the size of the body copy and sort of build off of that. We are going to explore that concept in this movie. Calluna is a very nice font. You can see its body copy size is a little bit taller than Times or Georgia.

Designed for on-screen reading. It's got a beautiful amount of space in between the letters. It's just a really, really nicely done font. As I scroll up, I can see what in the body copy size will look like at certain sizes and at 14 especially on the Mac with its anti-alias rendering that I am getting here, it's a little blurry. It looks really good at 16. It's really nice and crisp, very easy to read. It looks very elegant so 16 pixels is really what we are going to shoot for with Calluna. Now that translates in most browsers, they are set to 16 pixels unless the user goes and then changes that.

So if I set my body copy to 1em then I'm going to be in good shape to get exactly what I'm seeing here for the most part. Now, I want to introduce you to a concept called modular scaling and there is a person that can certainly explain it a lot better than me and that person is Tim Brown. So I am going to switch over real quick here. Take you to vimeo.com where you could do a search for Tim Brown - More Perfect Typography. This is a 30 minute presentation that Tim gave in a recent conference. It's really, really worth watching.

In it he discusses the history of typography, what typography is as an art form, and then he goes into his concept of modular scaling. Essentially, modular scaling means that there is a harmony to your sizes. So if you choose one size for your body copy, your headlines and all the other elements on the page should be in a harmonious scale to that size. Now this is a tool that Tim has created. This Modular Scale tool that allows you to plug-in an ideal value and another number that's kind of important to that and then get a series of numbers based on those, using different ratios.

You can use the Golden Section ratio that's been used in design for ever. You have got also the Musical Fifth and the Musical Fourth. Now we are going to come back to that in just a moment. I want to switch over to the way our site looks currently. This is Alice in Web Fonts as it is right now. There's really very little done to relate items, size wise, spacing is totally off. This text really doesn't relate to each other at all. We need to make it relate to each other. Now I'm going to pick two things that are very important to the site. First is the default size that we want for our body copy.

Now it would be 16 pixels. The second is this chapter heading, right here, "In which Alice follows a very?" This is going to be very prominent. This is going to be very big and it's going to give us a baseline to measure everything else by as well. So what I am going to do is I am going to switchover to Modular Scale. Then we will plug these values in. 16 pixels from ideal text size and for my important number I am going to choose 38 pixels. Now that's how large I want that headline. So I want that headline to be a little bit larger than twice the size of my ideal text size.

Now I am going to use the Golden Section to do this. When I hit Submit, I get this matrix of numbers based on this and notice that at the very center of the columns we have 1. This is 1em. So these are the pixels, these are ems and this is a percentage of 13. You can listen to Tim talk more about what the percentage of 13 references. We are going to concentrate more on the pixels and the ems. So this gives us a sizing chart that we can start to use when we are sizing not only the text on our page, but other things like column widths and the size of page regions.

You can base your entire layout if you want off of this. Now this is a tool and you should use it as a tool. You will notice that there are a lot of decimals involved here. You can round up, you can round down. You can make some parts of your layout adhere to the scale and other parts ignore it. It's totally up to you but this helps give your design a little bit more visual cohesion. Okay, now that we know a little bit about this, let's go ahead and use it. So I have index.htm and main.css open from the 04_04 directory and I am going to start in the CSS and what I am going to do is I am going to scroll down to find those headlines.

Now, let me give you an idea of who we are going to be styling first. First off, we are going to deal with our body copy and then we are going to deal with these three lines and we want all of these to be a harmonious in size. So I am going to scroll down to about line 207 where we can find our body copy. This is section#chapterOne p and I am going to do font-size and the size I want here is 1em. So we want our body copy to be 1em, about 16 pixels or so, and I am also going to add some line-height here and some margins as well.

For line-height I want to do 1.6 and for margin-bottom I'm also going to do 1.6ems. Now where did I get those numbers from? Well, if I go back to the Modular Scale, I can just go two steps up and that's where I find 1.6, so obviously I rounded down. So I'm using the scale to go okay, I want to go two steps up the scale, three steps down the scale. However far up and down I want to go as far as those relationships, I can do that. 1.6, two steps up. It's just going to give me a little bit of extra spacing but it's still going to be harmonious with the size of the text itself.

Right, let me go back into our code and now I want to go and find my top line, middle line, and bottom lines to those chapter headings. So what I am going to do is I am going to go just above my body copy. I can see that here I have the selectors to do the topLine, middleLine, and bottomLine. Okay so my topLine to get this sort of 38 pixels that I want for spacing there. I am going to do a font-size of 2.4ems. For my middleLine, I am going to do a font-size of 1.4em.

So I want these to be progressively smaller and then the bottomLine I am going to give it a font-size of .85 ems. Now again where did I get those measurements from? We have 2.4, 1.4 and .85. If we go back to our Modular Scale, we can see 2.4, so I rounded up there. 1.4, I rounded down, and my .85 is based on the .9. There are a lot of times when you might have to tweek those numbers just a little bit. All that text needs to fit on that one line.

I started off close that value and then just sort of went down a little bit until it fits within the line, but it is still based on that same proportion. All right! So I am going to go ahead and save that. Now we are almost ready to test this, but I still need to worry about some spacing issues. Now the first thing I want to do is take a look at my subheadings. Subheadings are going to be just above and below each one of these individuals sub-areas and then I also need to control the spacing between the sections themselves because that doesn't look really good either. Now again we are going to use our Modular Scale to do this and I am going to stick with sort of this two-step up 1.6 value, which is going to allow me to remain sort of harmonious with everything around me.

So I am going to go back into my CSS and I'm going to go down to line about 213 where I can find my sections, subsection h1 rule. Those are my subheadings. I am going to go ahead and say font size here. So font-size. That's going to be 1.6ems in using the scale. Now I am going to do a margin-top of 1em and then I am going to do a margin-bottom of .6ems. Now I still got that from the scale but I want the subheadings to be closer to the body copied than the section above it.

So that margin-top gives me a full 16 pixels worth of space above it. Margin-bottom gives me less of that to sort of pull these two together and inform the reader visually of the relationship between those elements and again those values are coming from the Modular Scale. So one more. I am going to scroll down to line 226, section.subSection div, and inside that I'm going to pass a couple of facing values. So I am going to do margin-bottom of 1.6 ems and I am also going to do a padding-bottom of 1.6 ems.

Now what's going on there? Well, that subsection div tag has a background graphic at the very bottom of it. So the padding of the bottom 1.6 is going to move the text away. So it's basically going to push that bottom graphic down 1.6 ems away from the text above it and the margin-bottom is then going to add an additional 1.6 ems worth of margin between it in the next section, giving me equal spacing between those guys. So I am going to go ahead and save that and I want to go ahead and upload. So I am just going to go ahead and upload that to my remote server.

And after previewing this I can see that my relationships are starting to form. I've got nice spacing between my sections. I like the leading that we have going on there. I like the spacing between the headlines and the region above it. I like the spacing between the paragraphs. I do notice how up here though, the sizing looks okay but obviously this isn't fitting on that one line. Well, 1.4 remembered I got that from the Modular Scale. You can feel free to modify those if you need to. I need that to fit on that one line. So what I am going to do real quickly, I am going to go back into my CSS and I am going to change that middleLine to 1.3.

I mentioned that earlier that we went ahead and did that with the bottomLine already. So 1.3, so we'll save that, upload that, and refresh our browser and we can see now that it fits on that line. Okay, our layout is using a defined relationship between the body copy and other typographic elements. This is going to help our layout become more harmonious and it's also going to make it easier for readers to understand how the elements on the page are relating to each other visually. Although our layout is coming along, it still lacks a couple of really important elements. So, in our next movie, we are going to discuss using some font variants and different weights and styles with our web fonts.

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