Category Archives: Tools

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.

 

 

WordCount

Another fabulous gem from the UK. WordCount is a ranking of the 86,800 most used words in the English language by frequency of use. Presented in the same format as a timeline—a beautiful timeline. Very minimalist and elegant. Perfectly simple. The design itself is worth the effort. You can also use it to analyze the vocabulary on your site—are the words you are using common, if understanding is your goal, or rare if sounding obtuse is  your goal.

From the site:

WordCount data currently comes from the British National Corpus (BNC), a 100 million word collection of samples of written and spoken language from a wide range of sources, designed to represent an accurate cross-section of current English usage. WordCount includes all words that occur at least twice in the BNC. In the future, WordCount will be modified to track word usage within any desired text, website, and eventually the entire Internet.

You can scroll the horizontal line of words or search for a specific word. Very interesting results. Then you can go to QueryCount that tracks the words that people search. Note: A screenshot of those words would be R-rated.

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.

Article source: https://www.waybackmachinedownloader.com/blog/optimum-line-length/

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator addresses one of the most difficult aspects of designing a text: to layout type in such a way that it is most readable and attractive. Most typographers and graphic designers have had years of visual experience that allows them to choose the most attractive and readable font sizes, widths, and line lengths intuitively. Even with comparable experience, however, doing this on the web can be a challenge. Chris Pearson of Pearsonified has designed a calculator that produces several optimal sizes and proportions given your preferences or the requirement of a specific project.

Calculating Sizes, Heights, and Widths

The calculator will (1) calculate the appropriate font size, line height, content width, and characters per line, and paragraph spacing; and (2) allow you to choose a font that is set to these numbers in a block of text. It will show you the optimum settings for a given content width, number of characters per line, for your chosen font and size, etc.

For 16pt type, for example, in Hoefler Text the optimum settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx.92, Characters Per Line: 85.

In Verdana, these settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx. CPL: 74

If you click on the font size, a box will open giving you the optimum settings for headline and primary and secondary text sizes.

You may not agree with the settings Chris finds optimal, but it is an excellent place to start.

Choosing Colors: Color Schemer

 

Color Schemer Application Start Page

Color Schemer Start Page

If you love choosing colors or you hate it because you never get it right,  I highly recommend an inexpensive software program called Color Schemer.  It is both useful and captivating. It recommends and allows you to create color samples and save them in palettes, collections of colors—without wasting any paint.

Sample and Match Colors

Color Schemer Sampler Tool measuring the color of an orange lily.

Color Schemer Sampler Tool

You can also sample and match color with any photograph or other image on the screen. Love the colors in that landscape by Vincent van Gogh or that Martha Stewart Living interior? Choose Tools > Color Screen Picker and save the color. You can sample a whole photograph to create a full palette of colors based on a field of wild flowers.

Even more fabulous is the quality of color. On a computer, screen color is instant and luminous. It doesn’t take hours of mixing and 45 coats of thin glazes to get a rich pale blue.

Automatically Generate Palettes

ColorSchemer Sample Palettes

ColorSchemer Sample Palettes

The program will also create analogous splits, angled accents, complements, smooth gradients, shades, soft blends, rectangle shades, semi-circle blends, mono comps, and tetrad blends. I have not a clue what an angled accent or tetrad blend is but my original palette was transformed into 20 or so radiant prisms of perfectly calibrated colors. Fabulous.

Once you have a palette of colors you like, you can name it and save it. As a graphic or website designer this is fabulously helpful because you can save by project. if you are doing website design, you can print out the html # codes for each color. You can also check your color to see how they work for those who are color blind.

Share Color Palettes & Get Ideas

Color Schemer Themed Palette

Color Schemer Themed Palette

Color Schemer also has a website where people upload their palettes so you can scan through tens of thousands of examples, and even rate them. They are all named: A Rose, A Walk in the Park, Angel in the Moonlight. Even Baby Poop and Windows XP. Wedding names are common and get a lot of stars: Winter Wedding, My Wedding, Silver Wedding, Tiffany’s Berry Wedding, Sunny Wedding Day. You get the idea.remixed colors, you have to mix them every time you want to use them. With Color Schemer, you just enter the color number or drag and drop to your new palette or graphics program. Some artists keep records of 2 drops this and 4 drops that, but many painters and designers are intuitives. Intuitives think differently—we do it the hard way and recreate.

And avoid Taxes

I spend hours there, particularly instead of doing my taxes, like today when I’ve received my last deferral and have four days to finish them. I have a whole folder of palettes, my own and others. Totally useless. Complete waste of time. So I recommend Color Schemer if you care about color, or even if you don’t. You might grow to love it since you don’t even have to mix the paint.

Color Schemer Website

This entry  is Part II of a two part post on Color. In case you didn’t take my advice the first time, you  may enjoy  Part I: Colorist Painting that might contribute to your appreciation of color and thus of this program.