What is a Font? – Part 2
Now that we’ve covered the basic differences between typefaces, let’s drill down to the details of fonts.
As the word implies, width refers to whether or not the typeface is regular, narrow, or sometimes even extended. Some typefaces call their narrower version “condensed,” others call it “narrow,” and still others call it “compressed.” All three words basically mean the same thing. Arial, for instance, comes in both a regular and a narrow width. Bodoni, on the other hand, comes in both a regular and a compressed width.
Weight refers to how bold the typeface looks. The bolder a letter, the fatter or “heavier” or “weightier” it is and the more horizontal space it takes up. Virtually every typeface has a regular and a bold version, but some have a whole bunch of weights ranging from hairline (extra slender and practically gray in color) to extra black (extra bold and really really black in color).
Style refers to what, if any, additional attributes are applied to a typeface. The most frequently seen style is italics. (Bold is often referred to as a style as well.)
Most computer programs, especially word processors, allow you to add a bunch of styles a/k/a attributes yourself. That’s what you’re doing when you bold and/or italicize selected text. But there are other attributes too. These are the ones my word processor allows me to choose. Okay, okay, I know you can’t really see the effect of my shadow attribute; it only works well for huge font sizes!
Speaking of size, of course a font needs to have one, but here things get a bit wonky.
Print documents: For print documents, size is measured in points. A point is a ridiculously tiny number equal to approximately 1/72 of an inch. In other words, each horizontal inch of text in a print document represents 72 points, no matter how many actual characters are in that inch. That depends on the font size you’ve chosen.
The vertical measurement is even wonkier. Here we’re still measuring in points, but what we’re measuring is the em height of the font, meaning the approximate distance from the top of the typeface’s ascenders to the bottom of the typeface’s descenders. Obviously a lowercase h has a tall ascender and a lowercase g has a tall descender. The distance between the top of the h and the bottom of the g is the em height of the font. The best graphical representation I’ve found of this is on the Graphic Exchange website. They don’t say the graphic is copyrighted, so I sincerely thank them for it, attribute it to them, and include a link to their specific page on which it’s found.
So if you’re typing in a 12-point font (the default size in most word processors), your typeface on the printed page is approximately 12/72" tall, which converts to 1/6" tall. Merciful heavens! No wonder we mature folks have difficulty reading printed material!
But that’s not the end of it. Every computer program, certainly every word processor, adds a few additional points of white space between lines of text so they don’t run together.
As stated above, font size is measured in points for print documents. NEVER use points as the measurement unit for web document fonts. Why? Because that 1 point = 1/72" rule does NOT hold true across all browsers. In fact, it can vary greatly, resulting in the strong possibility that your text will go all over the place and not stay with the graphic(s) associated with it.
Web documents: For web site documents, size is measured in pixels. A pixel represents one dot on a screen and screens have different sizes for different devices: computers, laptops, browsers, mobile devices, etc. etc. etc.
A pixel is an unchangeably fixed size. Therefore a 14-px font remains a 14-px font no matter what device/browser it’s viewed on. This also means that pixel text will always wrap around any associated graphic(s) the same way on any device/browser. That’s because the graphics are also measured in pixels.
“Wait a minute,” you say. “That’s baloney. I can increase my browser’s font size by hitting Ctrl+ and decrease it by hitting Ctrl-.” Oh no, no, no you can’t! Ctrl+ and Ctrl- are zoom in and zoom out features, not font size changing features. When you hit Ctrl+ the text does indeed get bigger, but that’s because the whole web page, including its graphics, gets bigger as you zoom in!
On the practical level, all this point vs. pixel stuff means that I can’t copy/paste directly from my word processor to my web authoring program. Take this blog article for instance. I created it in my word processor where the default font is Times New Roman 12-pt. In this website the default font is Times New Roman 20-px. So I copy the word processor article and paste it into Notepad, which strips the text of all formatting. Then I copy that unformatted text and paste it into the proper page of this site. Voila! The text is now Times New Roman 20-px.
Whew! Finally we get to color. This one’s easy and doesn’t require any examples. You already know that your word processor and other computer programs allow you to spruce up your text by applying virtually any and every shade of any and every color known to mankind.
Some typefaces are designed to be decorative only. I call these fancy fonts. They’re wonderful for chapter titles, headlines, etc., but most of them definitely are not for writing body text. You’d drive your readers plumb nuts! Here are my A-M fancy fonts. Pretty cool, huh? Some fancy fonts like Algerian have only capital letters, so even when you type a sentence using both capital and lowercase letters, all the letters show up as capitals. And yes, all of these fonts are the same size!
Putting it all together
Expanding on our original definition of a font, we now know that a font is a specific typeface (set of printable or displayable letters, numbers, and characters) in a specific style, size, and color. In other words, a typeface becomes a font once you start “messing” with it. The possibilities are endless and the messing around is downright fun! Talk about creative juices!
One final font caveat
Earlier I bragged that I have 428 fonts currently available on my computer. That doesn’t mean that everyone else has the same 428 fonts available on his or her computer, laptop, device, and/or browser. That’s why you need to be careful and thoughtful when choosing a website font. If the viewer’s browser doesn’t have the font you chose, it will try its best to substitute a different, albeit similar, font that it does have. Heaven knows what the result will be in terms of your page layout!
If you absolutely must use a certain font (such as the fancy fonts I’ve used in this blog post) that you strongly suspect other people and browsers won’t have, convert them into a graphic format such as a jpg or png and insert them on your page as graphics.
See, I told you that fonts are fascinating little critters. I absolutely love them! Not only are the variations almost infinite, they allow me to design via text as well as via pictures and other graphics. How wonderful for a writer without any formal graphic artist training. Go check out your own word processor. Bet you’ll be astonished to discover all the fonts at your disposal. Happy fonting!