Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Up until now we've set our text using pixels. In this lesson we're going to set our font size using ems. Ems are relative unit of measurement, based on the default font size of the page. Let's start by finding the right size for our text. We'll be working on the sans serif version of a bibliography, so we'll be looking at PT Sans. The recommended size is 12 to 16 pixels. 12 pixels isn't bad, because it has a larger x-height than Georgia, but it's still a little small.
14 pixels is more legible. PT Sans bold is a little narrow. This reduces the amount of space in the letters. Bumping the text up two pixels helps with readability. Now let's work on the line height. A recommended measurement for line height is 150% of the font size. PT Sans has a larger x-height, so I thought it would need a little more space between the lines of text, because the larger x-height takes up some of the internal space and makes the lines of text look closer together. But 150% looks fine.
This line height helps the lines stand apart from each other a bit, without them feeling like they're floating away from each other. So it looks like we can use 14 pixels for the font size and 21 pixels for the line height. But we're using ems. To find the number of ems, we need to set the font size at. We take the size we want the font to be and divide it by the default size. Thus 14 pixels, our target size, divided by 16 pixels, our base-size, is .875 ems.
We can write ems out to three decimal points, so we can use the whole measurement. We'll set the font-size in our CSS in a minute, but first, now that we have that number, I want to tell you about a trick. Working with ems would be way easier if the base font-size was 10 pixels instead of 16 pixels. Why? Well, we use the base-ten system in math. If the default font-size was 10pixels, we divide the number of pixels by 10, which is much easier than deciding by 16. For example, we want a 14 pixel font size.
If we take 14 pixels, our target size, and divided by 10 pixels, our dream base font-size, our target number of ems would be 1.4ems. 1.4 ems is just one decimal point away from 14 pixels. That reduces the amount of math needed to work with ems. The trick is we can make the base font size 10 pixels and I'll show you how in a minute. But first let's figure out the relative measurement for our 21 pixel line height.
If our font size is flexible, our line height has to be too. That way your line height will change along with the font size if a reader changes their font size in the browser. There are two ways we can set a relative line height. We can simply set it at 150%. This measure will set to 150% of the font size, which is what we want, or we could set the line-height to 1.5ems. Since line height is relative to font size, it will set to 1.5 times the font size, and not the base font size.
So the line-height will basically set to 150% of the font size. I'm going to recommend we use 150%. Using a percentage will work whether you set your font size in pixels or ems. If you get used to using percentage for your line height, you won't have to switch back and forth between different units of measurement if you end up doing one project in ems and another project in pixels. Now that we've figured out our measurements let's apply them to our sans serif bibliography.
You can see we haven't set a font size or a line height, so the text is coming in with default measurements. The default font size is usually 16 pixels, so it's coming in a bit bigger than we wanted to be. We want to set the font size for the text and we'll do that in our CSS file. First let's make our base font size equal 10 pixels. We're going to create a body selector and make sure we have our curly brackets, and then we will put in the property, font-size: 62.5%.
This works, because the default size is 16 pixels and 62.5% of 16 pixels is 10 pixels. You might be tempted to just set the body font size to 10 pixels, but don't do it. Pixels are not a relative unit of measurement and if you set the body font size using pixels, you'll lose your flexible font sizing. Now let's go to our p. I'm going to type in font-size: 1.4em. I always say ems, but there is no 's' on it when you're typing it in the CSS, and we also have to apply the chosen line-height, so we'll type in line-height:150%.
We can save our changes and view the page in the browser. I'll refresh. The text is now set to the size and line height we want. To help you get used to using ems and percentages, we'll be using both throughout the rest of this course. Since we'll be moving back and forth between two versions of the same bibliography, we'll continue using pixels for the Georgia version and ems for the PT Sans version. I just want to be clear that pixels and ems have nothing to do with what font you use.
We just happen to be exploring typography using two different fonts. You might as well get practice using two different systems of measurements too. In the meantime, if you're interested in learning more about sizing fonts with ems, I highly recommend the article "How to Size Text in CSS" by Richard Rutter on alistapart.com
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.