Join Sue Jenkins for an in-depth discussion in this video Going big with type, part of Productivity Tips for Web Designers.
- Hello, Friends. This is Sue Jenkins with productivity tips for web designers. In this week's lesson, you'll learn more about the large type trend on the web and discover some useful strategies for going big with type in your own web designs. One of the main reasons for larger type on the web has to do with usability. By going big, web designers can help site visitors identify important parts of the design much, much faster, which in turn helps those visitors scan pages quickly and easily to find what they're looking for.
Here's an example of a block of text fomatted the old way on the left. It's using 12 pixels for the paragraph text, 14 pixels for heading three, 16 pixels for heading two, and 20 for heading one. Even when designers started going slightly larger, with 14 pixels as a base font size, the second box, in the middle there, the text often still appeared to be too small. So today, the new standard sets paragraph text at 16 pixels, heading three at 18, heading two at 24, heading one at 36.
It's a big, big difference. The new standard looks open and airy, the text is easy to read, and clearly, there's ample opportunity to go even bigger. I wanted to show you a couple of websites that have already gone big with their type. This first one, take a look at the size of that heading one in the paragraph text. On this one, too, heading text is really big and bold, all caps, paragraph text nice, big, open, lots of line spacing. On this website, the designer is actually using two sets of font sizes to vary the content and actually call your attention to every other row.
So "On the Job" is highlighted just as "Ask a question," and it really draws your attention in and focuses your attention. On most of the sites, paragraph text is actually set as large as 24 pixels instead of 12, 14 or 16. The headings have ranged in size from 32 all the way up to 72. So you can see: big type, it's easy to read. It translates well on lots of different devices and really makes the job of the viewer much eeasier. Here's an example of a web page layout with average size text for the title, heading, and paragraph.
It's clean, but at this size, it's going to be a tough read. Bigger type will definitely make a bigger impact. Here's the same layout with larger text. When you're choosing the larger font sizes, I want you think in terms of tiered sizes for your headings one, two and three. Heading one should really be the largest, and then the other ones should be progressively smaller. If you'll also be using pull quotes, like this example here, go big with those, too. You can allow those to stand apart from your regular text by sizing and styling them differently.
You can use colors hand-in-hand with your font size to help define the different regions and emphasize what's really important on the page. Another thing to consider when you go big with type is whether to use pixels, points, percentages, or ems when sizing in CSS. These days, ems are really popular because their units are relative to the base font size. When you're using ems, the general practice is to assume a base font size of one em for your paragraph text.
You can declare your base font size as a property of your body tag. If you set it to 100 percent, the presumption is that the base font size is 16 pixels. Using this method, then, with one em equal to roughly 16, in most browsers, your heading should scale systematically as follows. This is just an example. If you're going to go bigger, you can adjust these accordingly. 16 pixels is equal to one em. That's 100 percent of your base font size. It's roughly equivalent to 12 points, and you can use that for P text.
Your heading three, heading two and heading one would then be proportionate to your base font size, so 1.125 em, 1.50 em, 2.250 em and, of course, adjusted to fit your needs. Now, there are some designers who do it a little bit differently. They set the body font size to 62.5 percent, which actually makes the default font size 10 pixels. Then, using 10 as your multiplier, you can use ems as relative units for pixels.
For instance, if you needed 24-pixel text, you could set the font size to 2.4 ems. Personally, I find it easier to work with the font size at 100 percent, but if this works better for you, go for it. To help you figure out how to convert your pixels or points into ems, check out Brian Cray's PXtoEM.com website, where you can view a conversion chart with common font sizes or use the online form to convert your own pixel to em values.
Big text is really great on so many different levels. First and foremost, big text is easy to read. Secondly, it's accessible to the widest possible audience. Third, big text is really great for visitors who may be accessing your site on a smartphone, tablet, or other hand-held device under less-than-optimal lighting conditions. In addition, when you work with relative sizing units like ems or percentages for your text, resizing your web fonts down the road will be so much simpler. Above all, big text looks fantastic and it really helps the web layout feel open, expansive, and more inviting to your visitors.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.