Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.