Category Archives: Typography

Pixels, Ems, and Rems

Website design measurements are not inches or even centimeters. They are pixels, ems, and rems. Rems are new. When I opened the Twenty-Twelve CSS (styling) sheet, I was thrown by the new rem measurement. The first thing I did was delete all of them and used pixels or ems. That messed things up pretty well, until I came to terms with rems.

Pixels

Computer monitors have resolutions in pixels. A screen can be 72 pixels per inch (PPI), 124, etc, etc. To size a font in pixels means it will appear as that number of screen pixels. It’s a constant that depends on the number of pixels on the screen. On my monitor has many pixels per inch, so in Microsoft Word, for example, I view documents at 125% in order to see what the page will look like when I print it. On websites, I often have to increase the font in order to read it.

In addition to different pixels per inch on different monitors, pixels are sized in absolute numbers, Each style on the webpage has to be given a specific number of pixels. Since the styles may take pages of code and pixel sizes range from 36 to 8, proportions of various elements were difficult to keep consistent. And if the size or proportions were changed, each of those numbers had to be replaced.

Then ems came along.

Ems

“Em” is a typographical term that refers to the height of a letter. Other measurements on a page of text, like line-height and the proportions of titles and headings, are measured in percentages of ems. On webs pages the size of an em is established by the website designer for the site or each section of a page or the site. If the base font size is set to 16 px other sizes are set a percentages of the base font size, the em. If the base font is 16px, a  smaller font might be set .75 em resulting in 14 px letters. When a base font size is increased or decreased, all the other sizes will change in relation to the base font size.

But they don’t. And there lies the problem.

Measurements, like colors, are established using “CSS,” which stands for Cascading Style Sheet. Styles change in relation to the style above them or in which they are nested in a “cascade.” If the text of a paragraph is set at .75 em, and a quote within the paragraph is set at .25em, the quote will be 25% of 75%, not 25% of the original 16 pixels. With long pages of complex CSS coding, this means sizes can change unexpectedly. Tracking down all the relationships between cascading percentages of ems can take a lot of time—unless you are mathematically inclined and can see the logical (or illogical) flow of percentages cascading on top of percentages. Designers are often not.

On top of that screen sizes began changing. One person would be using an iPhone and another a 24 inch monitor. One person a new retinal display and another a much older 72 ppi screen. Predetermined numbers meant that what was good design on one was unusable on another. Enter rems.

REMs

With the increasing variety of screen sizes and resolutions, programmers began working on “responsive design,” web pages that change according the size of the screen. What can be read on a desktop monitor may be difficult to read on a notebook and laborious on a smart phone. This required either different websites, at triple the design cost, or a web page that would change depending on the device it was being viewed on. Elements had to be able to move around according to the width of screen on mobile devices and the browser window size on desktops. A stable, non-cascading measurement became necessary.

Rem stands for “root em”. Rems work as logically as one expects ems to: in relation to the base font size of 16 px, not the size of the font immediately above it. Current version of all the mainstream browsers and mobil devices support rems, which means they can read them and render a page accurately. As a fall back, however, for those who are not using current browsers, sizes are still set in both pixels and rems.*

More on Rems

 

A good place to watch for updates on CSS changes is CSS-Tricks which features a blog, forums, demos, gallery, snippets of HTML and CSS, videos, and more.

A  (Life Saving) Rem Calculator

And here is a calculator from Foliovision to convert a pixel measurement to rem measurement. Type in your pixels measurement and hit Enter. You will get two results—one for font-size, width, height, margin, padding and the other for line-height.

Responsive Design Calculator: Pixels to REM

*Everyone should be using current versions of browsers. They have better security protecting your computer from worms and viruses and trojan horses, and can use more features on websites. And they are faster. Old version so Internet Explorer are particularly deficient. Those users should definitely upgrade to version 9 or change browsers.

 

 

Typography: Modular Scale

Typecast Logo

Modular Scale sponsored by Typecast is a handy tool for converting type sizes from pixels to ems and beyond. Enter the size of your text in pixels and translate it using one of almost a dozen perfect ratios and the pixels will be translated into ems, ems@16 and %of 13. If you are using rems, this makes it a lot easier.

If you don’t understand any of this, you probably don’t need to. If you want an explanation, please don’t ask me. I have to look up the reasons every time I scale fonts. It’s complicated, arcane, and only of value if you code CSS.

Modular Scale by Tim Brown, Type Manager for TypeKit.

Link

Nice Web Type is a list typography tools online:  tips, utilities, and resources available on the Web assembled by Tim Brown Type Manager for Adobe Typekit. Includes a video of his talk about fonts, the web, typesetting, layout, the tools we use, the information we gather, and the value of graphic design.

Animated History of Typography

Photo of Ben Barrett-Forest

Ben Barrett-Forest

This animated history of typography as succinct and clear as possible. Also an animation wonder in that it doesn’t use computer graphics, just simple paper cutouts and a camera. And time.

It took: 291 Paper Letters. 2,454 Photographs. 140 hours of work.

Five minutes. Well-worth the time. If you know little about letters or what a serif is, you will have a more appreciation of all things in print. If you know the history, you will enjoy the animation. And probably learn at least something.

On Vimeo and YouTube

YouTube also has many other videos on typography. When you view this video, look to the right for a list.

Book Design

Joel's SignatureThe Book Designer is another wonderful resource available on the web, free to everyone. I was referred to it by Jackie Urbanovic when I asked about alternatives to Adobe’s InDesign. The new edition is only available via the “Cloud” and is very expensive for those of us who do not use it everyday. Something like $50 a month.

Her short answer on InDesign was no, but she referred me to The Book Designer by Joel Friedlander, a very useful website for anyone considering publishing a book or designing text. The site also has a free 24 page booklet on self-publishing, 10 Things You Need to Know About Self-Publishing.

Tons of resources here. Many links to other well-selected sites on design and publishing. Topics include writing, book design, planning a book, understanding fonts and typography, print choices, ebooks and ebook readers, and marketing.

Best Book Designer Posts Include:

Understanding Fonts & Typography with nine links to specific topics, including elements of a book page, what goes on the title page with two examples, 5 layout mistakes, and book page layout. One of the nice things about the site is that Friedlander doesn’t overwhelm you with information. He gives from 2-10 examples and moves on. But you can trust those examples.

Five Favorite Fonts for Interior Book Design takes the guessing out of which font to use to make work look professional.

3 Great Typeface Combinations You Can Use in Your Book will help you avoid looking like you designed your book yourself, or your neighbor did it for you. The one who has a computer and never read a book. Type is about readability and appropriateness.

The site also has great comments—don’t miss them.

And don’t miss this site if you are planning on self-publishing anything.

I used his signature as an image because his header is rather undistinguished. The design of the site doesn’t match the quality of the information or the examples given.

Optimum Line Length

In addition to letter spacing and line height, optimum line length, the number of characters per line, affects readability and user experience. A long line of text produces fatigue and a short line of text can be distracting. Seventy-five characters per line, including spaces, is usually the maximum for a block of text with 50-60 being the optimum range. Unless a line is short for effect, such as emphasizing relationships between words as in poetry, readers begin to skip words as their eyes move down the page instead of moving from left to right, because quick side-to-side movements fatigue the eyes.

Responsive vs. Fixed Website Design

Since line length is so important as a fatigue factor, the traditional advice is that web pages should be set to a fixed width rather than being liquid, which means they are allowed to contract and expand.  On a desktop computer, a fixed width remains a fixed width even when the window if much wider. With liquid layouts too narrow to read comfortably, readers can become fatigued and stop reading for reasons that have nothing to do with your content.  However, since so many people are reading on so many different sized devices now, the new advice is that responsive is a plus.

Designers generally don’t like responsive page design because it prevents controlling the look of the page. It allows graphics to move around and headlines to end up on two lines with word breaks that can change comprehension. A compromise is to have two layouts, one responsive for mobile devices and tablets and one fixed for desktops. (This is almost twice the work.)

The Golden Ration Typography Calculator

A narrow text will require smaller type in order to maintain a line width that is conducive to being read. If you are designing specifically for a device with known measurements, like an iPad, you can adjust type size and line height accordingly.

For calculating the relationship between text size and line length, you can use the Golden Ratio Typography Calculator by Chris Pearson of Pearsonified (Yes, that is the right spelling.)

Also see the Triple Threat post Golden Ratio Typography Calculator.