Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
In this lesson, we are going to attend to acronyms and lining figures in our text. You need the files biblio_serif_acronyms. html and biblio_serif_acronyms.css from the Exercise folder. You'll also need the Fonts folder with the Chopin Script web font files in it. Drag a copy of your Fonts folder from your desktop into your Exercise folder so Chopin Script continues to load properly. You also need the files biblio_sans_ acronyms.html and biblio_sans_acronyms.css from the Exercise folder because we'll be working with both the serif web page and the sans serif web page in this lesson.
We will start with the serif web page. Open the serif bibliography web page in the browser to see what we are working with. Scroll down to the second to last resource on the page. We are looking for I Love Typography. Notice that the I-L-T stands out from the rest of the text. Why? Because capital letters are bigger and squarer. We all know that if we email or text in all caps, we are yelling. All caps just feels louder on the page.
We can fix this so the acronyms are more subtle and fit in with the rest of the text. Will this change the meaning of the text or make it more readable? Probably not. Will it make the text more beautiful with a better texture and tone? Yes, it will. So we are going to do it. In the CSS for the serif page, we are going to add a class. I am going to scroll down. So I am near my h tag. I like to keep my classes together, with the text I use them with and we are going to create a class called acronyms and make sure I do our opening and closing curly bracket, and then we are going to make it font-size: 13px.
This is 2 pixels smaller than the text. We are also going to use the text-transform: uppercase. Now, this isn't necessary here because our ILT is already capitalized in the text, but some acronyms may come in as lowercase and they'll need to be capitalized. So we might as well make it part of the class. Also, while we're here I should mention that there is CSS syntax for small caps but I do not recommend that you use it because it does not work across browsers.
It's much better to use a text-transform: uppercase and then make the font size a little bit smaller. Let's save this, and we are going to go into the HTML for our serif web page. We are going to find that ILT down in the bottom of our site here and inside the parentheses because we do not want to change the size of the punctuation, we are going to add a span. I am going to span the class acronyms.
We can save this and we can review it in our browser. Before I refresh it, I am going to make it a little bit bigger so you'll really be able to see the difference when I hit Refresh. Nice. You can see that the ILT is now smaller. I wouldn't reduce the size of the acronym anymore than the 1 pixel or actually the 2 pixels that we've done here, because the 2 pixels is about 13% of the overall font size.
I usually like to hover right around the 10% mark when I'm making changes to size here. If you make the acronyms too small, they will start to stand out because they'd feel too small and too spacious. So now we are also going to look at our numbers. We have some numbers here right under I Love Typography, August 7, 2007, and then also a little later we can see the dates here, the life of Ben Shahn, and these numbers are old-style numbers. We're using Georgia. The old style numbers are designed to look more like lowercase letters.
So they have ascenders and descenders and they blend in with the text. These numbers are great. We don't have to do anything with them. They are not standing out. But you'll find that that's not the case for the sans-serif version of the page. Let's open up our sans-serif version and I'll show you the difference. I am going to scroll down and I'll zoom in a bit and here you can see that the date August 7, 2007 is really jumping out of the text.
This is because PT Sans uses what we call lining figures and the lining figures feel more like capital letters than like lowercase letters. So what we're going to do is we're going to slightly reduce the size of the numbers in our sans serif bibliography. I've already done it here next to Ben Shahn's name. They are a little bit smaller. You can compare them here to the number 14. Let me scroll down a bit and zoom in. I know this is very subtle. But the number 14 is a bit larger than what's happening next to his name.
So what we're going to do is go in and slightly change the size of our numbers. You can see it again here how that really jumps out. We are going to do this in our CSS for our sans- serif. I just wanted to show you in the CSS for the sans serif that I have already created the acronyms class for you. I am using a font-size of .925 em, the text-transform for uppercase, because we're also going to use it for the ILT.
Here, instead of using pixels, I have used ems to define the font-size because we built the page using ems. Classes reference the property they are used with. So the .925 em does not mean .925 of the base font size. It means .925 of whatever font size is being used when you apply the class. So that means that this is .925 of the p font size because we are using this within the p tag.
So that means we are making these a little bit smaller, about 92.5% of the size of the text. This is a little bigger than what we did for Georgia. The class in that file, in the more traditional bibliography using the Serif font, was reduced by 13%. So the acronyms were coming in at about 87% of the font size. I am pointing this out because you need to know there's no mathematical rule for sizing your acronyms. All fonts are a little bit different. Use the measurement that's right for the font.
Again, I started about a 10% reduction in size and then I go up and down from there whenever I need to and whenever I can. So okay, this acronym class is already set. We just need to apply it. Let's go into the HTML for our sans serif bibliography. We are working with the numbers down at the bottom, scrolling down. Here we go! You can see I have already applied the acronyms class to the ILT and I have already applied it to the date here by Ben Shahn's name.
We need to apply it to all the other numbers in the site and this is going to be a little tricky because we need to make sure that we do not apply it to the little bits of punctuation within the numbers, because we don't want the punctuation to get smaller. So what I'm going to do, again I am a big fan of copying and pasting, I am going to find the one down here by Ben Shahn's name, span class="acronyms", and I am going to copy it. I am going to find my first number here. Number 7. I am going to paste it, and then right after the number 7, I am going to end that span.
I need to start it again for the number 2007 and then I need to end it again and then I am going to come down here. Here is the number 14, paste it in front of the number 14, and I am going to end it again. Finally, I happen to know there is a number all the way up at the top I referred to Chapter 6, all the way at the top in the very first resource. Start it, and end it.
I think we've got all of them. Let's go ahead and review this in our browser and you can keep an eye on August 7, 2007 as it gets smaller. I missed an end span tag there. I am going to go back and change that down at the bottom. There it is right after the number 7. Missed my forward slash. Take a look at it again. Although you can see, before I refresh, you can see the difference in the number size here in 2007 versus 7.
Now, I will refresh it and all will be good again. Excellent! So all the numbers are now a good size and they don't yell at us off the page and that's great. Again, will this make the text more legible, more readable? Probably not, but it does make it more beautiful. You've worked really hard to create beautiful type. So it's good to really pay attention to the details.
Find answers to the most frequently asked questions about Typography for Web Designers.
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.
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.