Way back in time, before the days of modern history, back when man was looking for better ways to write than using a chisel and stone, I bought a typewriter for college. Yeah, most kids when they graduated from high school wanted a car, video game console, etc., before they head off to college.
I wanted a typewriter.
Not just any typewriter. I wanted the ball-type typewriter. No more entangled typebars! I got an IBM Selectric typewriter. It came with a Prestige Elite 72 font element (the ball) and I bought a Light Italic element. No more backing up and underlining for me! When I needed to cite a title, name a ship, or emphasize a section of text, I could stop typing, swap out the elements, and type the emphasized section and then swap the elements back again.
My use of the Selectric came to an abrupt end when I bought an Apple IIe. Combined with a dot-matrix printer and a special card that double-printed across each line to make the output look like it was typewritten, the computer exceeded what the typewriter was capable. I even created a file of a bitmapped font that resembled my own handwriting. The special printer card was needed, because professors refused to accept papers that were printed on a dot-matrix printer.
Kind of ironic when you think how nowadays, many professors want you to email your paper instead of printing it….
What does my old Selectric have to do with the em and web pages, computer screens and ebooks?
Everything!
The Prestige Elite element I had was a pica font, a pica being a unit composed of 12 points. How long was a point? It was 1/12th of a pica! Yes, it goes around it circles. That was because until the 1980’s there was no actual finite measurement applied to the point. The point became redefined as the Desktop Publishing Point (DPT) and was set at 1/72nd of an inch. Thereafter, 12 points made up a pica, and 6 picas made up an inch.
Apple chose this value to be the pitch (pixel density) of the screen resolution for the Macintosh and as the dot per inch of their Laserwriter printer. The Macintosh and Laserwriter together set off the Desktop Publishing boom in the 1980’s.
More importantly, this screen pitch became the defacto standard for the resolution of images when the world wide web came into being. Because computer screens had a density of 72 pixels per inch (PPI), the maximum resolution you wanted in an image on the internet was 72ppi.
As a result, the point used as measurement in printing was therefore equal in size to the pixel on a screen. Web developers began to equate the two, point = pixel. So a 12pt font was the same as a 12px font, and they began designing web pages based on the pixel.
This proved to be a mistake.
For a while, the standard width for a web page was 800 pixels. This was the average width in pixels for a PC screen, so web developers would build their pages to fit this size. If a page had an image of 250 pixels in width, that left 550 pixels available for text to either side. Even I tended to think of things in terms of pixels.
As time went by, screen resolutions began to increase. Pixel widths of screens increased to 900, then 1100, 1200, 1400, and more. Apple’s computers took on the screen pitch of 110 pixels per inch, and other computer manufacturers followed suit. Suddenly, letters at the size of 12 which looked fine on a 72ppi screen were too tiny for a 110ppi screen.
Now Apple has introduced their “Retina Displays.” The new Retina Display MacBook Pro has a screen density of 220 pixels per inch. An iPhone 4S has a pixel density of 326 pixels per inch.
At those densities, a letter with a font-size set to 12 pixels will be so small as to be unreadable without a good magnifying glass.
Web designers for so long schooled in using pixels as their primary measurement, had to rethink they way they designed web pages. The pixel kept getting smaller and smaller and their web pages continued to shrink. Where once a 800px × 600px page used to fill an entire screen, now it barely fills a quarter of a screen. And on the smaller screens with high pixel densities, as said above, the situation becomes worse.
The problem is both the pixel and the point are both fixed measurements. The em is a relative size, with one em equal to the point size set for the font in use. Why is this important? Because it makes it easier for the designer to layout how the reader, viewer or user will see the work presented.
If you created a web page that you wanted to have a particular layout, you would carefully choose the size of the images and the size of the text to fill the page properly. But if someone loads that page onto a display that has a different size and pitch from what you designed for, and they change the size of the window, all your hard work is going to be distorted.
Why all the focus on web pages?
Because eBooks are actually web pages.
Each chapter in an ePub file is a single HTML file (e.g. A web page). iOS & most Android-based devices use this as their default ebook file type, and the latest Amazon.com file format for Kindle, KF8, is HTML5-based. If you open a chapter from an ePub file in a web browser, it is displayed as one, long page. It is flowing text, not page-restricted text.
An ebook reader takes this flowing text and breaks it up so that it can be displayed one ‘page’ at a time.
Typography is all about making the text pleasantly displayed on the page. Digital books may have thrown this skill for a bit of a spin, but it is still as important now as it has ever been in the publishing of books. If the text of a story doesn’t display in a manner pleasing to the eye or makes it difficult to follow, it is likely that the reader will not want to read it.
Ebook readers and web browsers allow the reader to do something that printed-paper books simply cannot: change the size of the font.
If you carefully set your paragraph indentations to exactly 1cm so the paragraphs would be excellently delineated from each other, what happens when the reader opens your story and scales the font up to the maximum size? Or the smallest size? Suddenly, your paragraphs are either going to look as though they just run together or they’ll be hugely and grossly indented. It will become tough to follow the narrative of your story because the reader’s eyes will be unable to discern the paragraph separations or will have to jump too far to pick up the beginning of the next paragraph.
I set the indentation of paragraphs in my writing to 2.5em. This way, no matter what font size the reader chooses, the paragraphs will always be proportional in the way I wanted them set. This is because that indentation is relative to the size of the letters, not to the size of the page. If you open this blog post in an iPhone or in an Android-based phone, the paragraphs will have the same relative indentation relative to the text of the narrative as they do in a web browser. By using the em as the measurement for positioning of text elements, regardless of what device is used to view my writing, what the reader sees will be consistent.
Example:
An Initial is the first letter in a document, chapter, or paragraph that is larger than the rest of the text. (Wiki explanation here.) An initial will align the base of the letter with the base of other letters in the line, so it stands above them. The first letter in this paragraph is an initial.
A drop cap is an initial that aligns its top with the tops of the other letters and therefore it drops down a couple of lines. The first letter of this paragraph and the first paragraph in this post are both drop caps, and they were defined using this as code:
<p style="text-indent: 0em;"><span style=“font-size: 3em; top-margin: -.2em; letter-spacing: .1em; float: left; color: #bb3333;”>W</span>
Everything you see in the style= “” definition are Cascading Style Sheet (CSS) commands.
The text indentation was canceled for the paragraph (<p>) using 0em. This was to counteract the size of the drop cap and the indent of the paragraph working together to force the text in too far to one side.
Second, the first letter was placed in a <span> tag so the definition of just that letter could be changed to force its size difference from the rest of the letters. I set the size of the font to 3em, which makes that letter three times the size of the other letters.
Third, an assumption about the em is that it is the width of one “M” in the font. This isn’t actually true. There is a small amount of margin around each character in a font, so the em is actually slightly larger than the letter “M”. If the letter is made larger, then those margins are made larger and the letter tends to be pushed away from other letters in a way that looks disproportionate to the reader’s eye. (The typographical term for this spacing is Kerning.) So, I used letter-spacing to reduce this gap so the larger letter would fit more proportionately with the other letters. Additionally, the margin along the top pushed the drop cap down so it didn’t align nicely with the rest of the line. This is why the top-margin was set to a negative number, to negate the enlarged margin above the letter.
Note: Blogger doesn’t use the <p>-tag to define paragraphs. They instead use the divider tag <div>. I find this disagreeable because in my mind, the paragraph is already defined in HTML by the <p> and it is my opinion that the divider should be used for structuring the page, not for replacing the <p>. So if you are looking at the raw code that defines this page, it doesn’t exactly match my example above.
It is important that you be aware of basic HTML and CSS if you want to create your own ebook, because these are at the heart of the ePub file definition. If you don’t get this right, then the formatting of your ebook will be messed up, and people will find it unpleasant to read your ebook. If people find your ebook unpleasant to read, then recommendations will not be forthcoming and sales could dry up.
The formatting in your ebook can literally make or break your career as a writer!
If someone reads my (or your) book on an ereader, and this person has poor eyesight, it is highly likely that this person will select a larger font size to read your text. If your paragraph indentation doesn’t move along with this increase, the reader could have a problem with reading the text of your narrative. Using the em can help you control the formatting of text in your ebook, regardless of what font-size the reader chooses.
Most browsers have the ability to turn off styling on a web page. I recommend you try this and see what happens.
- In Safari, it is in the Developer menu item (turned on in preferences, under Advanced) or you can click on the “Reader” button in the browser URL window.
- In Firefox it is under the View menu item.
- I’m not sure how to switch off CSS-styling using Chrome.
Study these differences and consider how important the readability of your book can be to your success as a writer.
