Faces, fonts, points and pixels: The language of computer typography

Wednesday, May 6, 2015

Faces, fonts, points and pixels: The language of computer typography

Typography and publishing have changed drastically with the proliferation of personal computers in the past few years. What had originally been a profession with only one medium – paper – has exploded into the digital realm, dragging some old print design concepts along for the ride.

Now people who are just starting in this exciting field have to negotiate confusing terminology left over from the print days, some of which is even now changing in meaning. For people new in the world of digital publishing, we offer a few helpful explanations.

Typefaces vs. fonts

Back in the days of analog printing, every page was laboriously set out in frames with metal letters. The frame was rolled in ink and pressed down on a blank piece of paper. Printers used thousands of small metal blocks, each with the character it was meant to represent set out in relief. If you wanted to print a page in Times New Roman, for instance, you needed different sets of blocks for every different size (10 point, 12 point, 14 point, and so on) and weight (bold, light, medium).

This is where we get the terms typeface and font. In the example above, Times New Roman would be the typeface: It described the entire collection of metal blocks a printer might have which had been designed with the same basic design principles. But a font described a subset of blocks in that typeface with a particular size and weight. For example, bolded Times New Roman in 12 point was considered a different font than normal Times New Roman in 8 point, and italicized Garamond at 24 point was considered a different font than italicized Garamond at 28 point.

The distinction between the two terms, and the process they came from, became obsolete with the invention of desktop publishing. Fonts became digital computer files that scaled themselves up or down dynamically to whatever size or weight users wanted. The distinction disappeared in a puff of binary magic.

Points vs. pixels

Web technologies allow designers to define item sizes in either points or pixels, though the difference is often not very obvious and can even be counter-intuitive.

The word “pixel” (usually abbreviated ‘px’) is short for “picture element,” i.e. a single dot on a computer screen. A 10px x 10px image is made up of a set of pixels in a grid 10 wide by 10 high. The exact real-world size of this image depends on the size of the individual pixel-dots (known as the pixels per inch or ppi) of the device it’s being displayed upon.

Meanwhile, a point (pt) is a unit of length, commonly used to measure the height of a font but technically capable of measuring any length. In most applications, 1pt is equal to 1/72nd of an inch.

Here’s where things get confusing: In CSS, everything is somewhat abstracted, so a “point” is not necessarily one point in physical size, especially on a screen. Even a “pixel” is no longer necessarily one pixel in size anymore; screen images are scaled to be consistent with a hypothetical 96 ppi device viewed at “normal reading distance.” This means that, on high-density screens which differ significantly from 96 ppi, everything will be scaled relatively.

We said it was confusing. As a rule of thumb, though, this much is true: a box 72pt square will (usually) occupy the same amount of space on a computer screen as a box 96px square, but you can’t rely on either square being exactly one inch across on any particular display.

Any questions?

We at Matcha Design stay on top of the trends and changes in electronic publishing. Let us know if you have any questions or want to contribute any tips for this blog. We’re also more than happy to put our knowledge to work for you. Give us a call today.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like