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 all of our text has been set using pixels. Pixels are great, because they give us control over the design and because anyone with previous experience with pixel-based software like Photoshop already knows how to think in pixels. For example, here is a low- quality pixel-based image. We can see the pixels creating a jagged edge, but pixels pose a problem. They're not flexible. A pixel is a pixel and they cannot be re- sized or scaled in all browsers or on all devices.
For example, in Internet Explorer text set in pixels cannot be scaled. This can pose a problem if a reader needs their text bigger or smaller but doesn't want to change the overall layout of the page. Thus we have ems. What is an em? Think of an em as a square. It can be used to set height or width just like a pixel. But what does 1 em mean? The basic em equals 100% of the browser's default font-size which is 16 pixels.
So 1 em is often 16 pixels, but an em is more than that. An em is a relative unit of measurement. That means it allows us as designers to set a measurement relative to another measurement. Here it's relative to the browser's default font size. We can set a measurement of 0.5 em, which is 8 pixels. We can set a measurement of 1.5 em, which is 24 pixels, but an em is even more than that.
Readers can change their browser's default font size. If they do so, an element using an em will also change in size, because ems are relative to that default font size. So a reader can set their text bigger or smaller and all elements using ems will get bigger or smaller too. Readers who tend to need bigger text can set their browser's default font size larger. Here I've changed it from 16 pixels to 24 pixels.
They will automatically see bigger text and headings. If a site uses ems, readers will automatically see bigger text and headings, but on this site the text and headings still look smaller. That's because this site uses pixels to size the text. Pixels are not relative and don't change when we change the base font size. So how do we use ems to set font size? First we figure out how many ems to make the text. Take the target size, that is, size you want the text to be, divide by the default font size, and that will give you the number of ems you need to use.
For example, if you want 12 pixel text, divide it by 16 pixels, which is our default base font size, and you'll know you need to set it at 0.75 ems. If you want 24 pixel text divide it by 16 pixels and you'll know to use 1.5 ems then use those measurements in your CSS. Here the p tag is set to 0.75 ems, which we figured out a moment ago, and the h1 is set to 1.5 ems, which we figured out a moment ago.
There are our pros and cons to using ems. Text that is set in ems is flexible. It can be re-sized across browsers by the reader. This is important, because only the reader knows what device they are using and what size they need the text at, so they can read it more easily and our first priority is our reader. But there are cons to using ems too. It's hard to start thinking in ems. We have experience designing with pixels and until we get more experience using ems most of us will think of 1 em as 16 pixels.
That means there is math involved and it's not hard math, but it is an extra step in the design. To make matters more complicated, ems can be used to set the measurement of your line height, margins, padding, and div widths. It can be used in classes and some of these elements are relative to each other. Thus the meaning of what 1 em is can change as the layout becomes more complex. For example, if we're figuring out a font size, we know that 1.5 ems = 1.5 times the base font size.
So 1.5 ems is 24 pixels. But if we're figuring out the line height the relative measurement changes. 1.5 ems means 1.5 times the font size. So 1.5 ems is 36 pixels and this can take some getting used to. Finally, I do not recommend working only with flexible type sizes. As you can see in the screenshot of alistapart.com, when text gets bigger it needs more room to live in.
It needs a longer line length to maintain optimal readability and while browsers like Internet Explorer won't let a reader change the text size, it will allow readers to zoom in or out of an entire layout, thus keeping the page intact. For example, browsers allow readers to start with a page like this one and zoom in on the whole page. Balancing the pros and cons, you can expect me to continue using pixels for most of this course.
I believe in fluid web design. If you're interested in learning more about flexible pages as well as flexible type, I recommend reading Fluid Grids by Ethan Marcotte at alistapart.com and I'll continue to touch on ems. In fact, I'll walk you through how to actually use ems in the next lesson, but I'm going to keep it as simple as possible. If you're not already familiar with ems, this is not the time to become experts in using them. Now is the time to focus on type, while getting a basic sense of what an em is as preparation for the future.
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.