Font vs. Typeface (And 14 Other Design Terms We Always Get Wrong)
Designers talk in fancy technical terms all the time, but how often do we get it right? Well, that’s a good question, and with that in mind, we came up with 15 design terms that we always seem to screw up, then put them in one convenient place — right here!
1. Font vs. Typeface
Entire articles could be done about this little tidbit, and in fact, they have. So what is the difference between a font and a typeface?
Alrighty, let’s take it back. When the printing press was new, you had to physically lay out each character one at a time until you had what you needed printed. These were done with metal blocks that had a relief of the character on its face (as in the type face), and then after the ink was applied (usually by a roller), the paper was stamped onto it, creating the text. Each block was unique, and varied based on the style, size and weight of the character at hand.
The word font also goes back to the printing press, but instead of referring to each character piece, it was for a group of blocks within certain parameters. For example, Courier 12 would be a font, but Courier 8 would be a different font.
So what’s the difference? Today, not so much. When computers came into play and people like Steve Jobs decided that they wanted pretty characters on their displays, they used font to describe the different styles of text that you wanted to use on the screen. This is technically correct, as they are blocks of text within a certain style, but font now refers more to the way the text looks, and not the way it was actually assembled back in the good ol’ days when print was king.
image via Center for Book Arts
2. Lettering vs. Calligraphy
In its simplest terms, calligraphy is about the penmanship, and lettering is about draftsmanship. But that’s probably oversimplifying things a bit, so let’s dig deeper.
Think about a comic book. In both the printed and digital mediums, a letterer comes in and lays down all of the text for the book, using either a pen and paper, or Adobe Illustrator. The letterer is using the tools at their disposal to fit the specified amount of text within certain parameters, and is doing more drawing of the letters than writing them. When it comes to calligraphy, you’re writing the letters yourself; your concern isn’t drawing the letters within certain guidelines, but instead you’re writing them in place. You can’t do calligraphy with a computer, you can only emulate it.
image via Lyndsay Wright Design
3. Leading vs. Tracking vs. Kerning
We actually covered this one in 2014, but here’s a refresher.
Leading (pronounced ˈlediNG, rhymes with “bedding”) deals with the vertical space set between each line. The tighter the leading, the closer that sentences are together, and vice versa. On many letters, you have a descender — the lowercase “Q,” for example — or an ascender — lowercase “B” — and between the two is the baseline, where the bottom of the main part of the letter is positioned. The leading is measured based off those factors.
Tracking is very similar to kerning, but not quite the same. While kerning deals with individual letter spacing, tracking is the spacing for the entire word. Meaning, if you raise of lower the tracking on a word, it will either spread out or tighten up the overall width.
Kerning is the spacing between individual letters. In some cases, you want to tighten up the kerning between two letters so it looks more visually pleasing, and on other times you want to spread it out for legibility. So where tracking deals with the entire word, kerning is the letters that make up the word.
image via Adobe Inspire
4. Vector vs. Raster
This is a good one, because some people get it, and others just … don’t.
Think about an Apple keynote — any of them, frankly. They’re always talking about the pixel counts of their screens, and how many pixels they can squeeze into a space. These pixels make up images on the display, particularly photographs and the like, and are referred to as “raster” images. Any jpeg, tiff, bmp, png or gif that you see is a raster file, and Photoshop users primarily deal with raster graphics.
The problem with a raster image is that when it’s enlarged, it becomes super pixelated, losing focus in the process. This is because the computer is trying to figure out how all of the pixels need to go together, and some of it is educated guesswork. The solution? Vector graphics.
A vector graphic isn’t based on pixels, but instead is based on math. Let’s take a heart as an example. If you drew out a heart in Photoshop, it would have hundreds — maybe more — of pixels sending data to the display. If you did the same thing in Illustrator, it would be based on lines and curves. And instead, we would talk about the points where lines connect, like at the top and bottom centers of the heart shape. Your computer is doing the math on the fly to get all the info.
You work with vector graphics primarily in fonts and logos, because both of them need to look crisp no matter what size they are. But to sum it up: raster is for photos, vectors are for logos.
image via California State University Northridge
5. Dodge vs. Burn
Back when we used film for our cameras (you know, like many did back in 2000 and — gasp — the 20th century) you had to develop the film. There were lots of specialized techniques that you could use in this process, which would allow you to adjust how bright or dark the image was exposed, as well as other fancy tools. If you wanted to dodge an image, you would be exposing certain components of the photo for less time than others, lightening them in the process. If you wanted to burn them, you’d do the opposite, exposing those parts to longer times so you’d get darker portions. Today, these same terms are used in Photoshop. If you want to lighten an image, you can add a dodge layer, and to darken, a burn layer.
image via Digital Photography School
6. Opacity vs. Translucency
Alrighty, so looking at an image in Photoshop, one of your options is to adjust the opacity. What exactly does that do? It reduces the visibility of the image, making it less opaque. So what’s so different about translucency? That’s where it gets more complex.
If an object is transparent — we’ll get to translucency in a second — then it has a physical property that allows it to pass light. Think of a color gel on a camera lens or light, for example. The light can go through the transparent object, but you can still tell what it is, because the light doesn’t get tossed all over the place. This is Snell’s Law, which is a formula used “to describe the relationship between the angles of incidence and refraction, when referring to light or other waves passing through a boundary between two different isotropic media, such as water, glass, or air.”
Now translucency deals with the same basic principle, but it doesn’t necessarily follow Snell’s Law, at least on a macroscopic scale. Meaning, you may not be able to make out the image on the other side of a translucent object.
image via Liquitex Artist Materials on YouTube
7. Opacity vs. Fill (Photoshop)
This one is tricky, but only in that both functions seem to do the same thing. If you have an object and you want to reduce the opacity or fill, doing so gives you essentially the same look. Both reduce the visibility of the image. However, when you choose Fill, adjusting the visibility does not affect any effects applied to the object. So if you had a stroke or drop shadow around text, for example, it would not change at all — only the fill of the object would. If you were to do the same thing with opacity, the object and the effects would fade together. This video by Cindy Lemons shows both actions quite well.
image via Cindy Lemons on YouTube
8. Letterpress vs Engraving
Boy. Google this and you’ll find a lot about wedding invitations. Probably more than you want to know, frankly, but that’s why I’m doing the hard work for you.
Anywho, Letterpress printing is back in fashion, but its origins go back to the printing press. The results are beautiful cards with indented designs on its face, and ink filling the indentions. To do that, you roll ink onto the type face (call back to No. 1!) and then press heavy paper stock into the type. This gives you that cool indentation plus color, and looks killer.
Engraving is done by a similar process, but in this case the press has a recessed image, so the type and graphics are raised on the page. You need big machines to achieve good looks with engraving, and they produce around 2-tons of pressure. If you ever want to know if you’re holding an engraved piece of paper or not, check the backside; an engraved piece will have a negative of the frontside, which is called “bruising.”
images via The Southern Coterie and Boston Betrothed.
9. Negative Space vs. White Space
This one is super complicated. Negative space is …
OK, I can’t do this anymore. It’s a trick question. Negative space and white space are the same thing. Forgive my trickery.
image via Murderati
10. OTF vs. TTF
TTF stands for TrueType Format, and has been around since the late ’80s. Each font has the screen and printer versions in one piece, which means that you don’t have to install two different versions of the same font.
OTF is OpenType Format, and this is the latest and greatest font type out there. Essentially, it’s TTF on steroids; it has the same screen/printer in one deal as TTF, but it also supports expanded character sets. Check out the example above. See how the same word can be done multiple ways using the same letters? That’s the advantage of an OTF font in a nutshell.
image via us! Authentica on Creative Market
11. Rem vs. Em vs. Px
OK so first off, these all have something to do with two things: CSS, and sizing things for the web. From there, everything goes wonky.
Although you’re probably used to pixels in reference to the number of them that display on a screen, pixels in CSS terms is a non-linear angular measurement (if you click that link and you don’t like math, your head might explode). If you’re measuring things in pixels (px), then you’re using an absolute unit of measurement. Now that doesn’t mean that what you see on your iPhone is going to be the same as on your Chromebook, because px aren’t always used the same from device to device, but they are absolute.
Now compare that to an em, which is a relative measure of length to its parent element. It’s explained quite well in a post on futurehosting:
If you have awith the font size is set to 16px, and a
element inside that div with a font-size set to 2em, the font-size of text in the
will be 32px; set it to 0.5px, and the font-size will be 8px.
OK, so what about rem? A rem is a root em, which means that they’re always relative to the font size of the
element. Why are they important? Because with ems you can have issues with elements that are nested in your code, making things more complicated. The rem solves that problem, and although it’s not perfect, it does work nicely.
Which one should you use in your code? Why not all three?
image via Frontify
12. PPI vs. DPI
In its simpliest terms, PPI is pixels per inch, and DPI is dots per inch. DPI is originally a printing term, and it refers to the number of ink drops that a printer can put into an inch of printed material. A 300-DPI image is super clean and detailed, while 72-DPI, not so much. PPI is from computer screens, and it also counts the number of pixels that can be put into an inch of screen. The difference? Well that’s a bit more complicated.
Since screen resolutions change, if you were to measure something in PPIs, the actual size may be much different from resolution to resolution. I’m looking at a 27-inch Thunderbolt display right now, and it has a PPI of 109. That means that for every 1 inch on my screen, 109 pixels appear. That means that my screen has a resolution of 2560X1440. If I were to create an object that was 109px high and wide, it would look great on my screen and be exactly 1-inch X 1-inch. But if I were to pick up my 13-inch MacBook Air however, its displaying at 128 PPI, which means that my 109px square would be smaller than an inch.
Point is, DPI is a legacy term when referring to screens, and you should stick with PPI instead.
image via Fast Co. Design
13. Trim vs. Crop vs. Bleed
All three of these terms have their roots in printing, and some of them are still used that way today. But in regards to design, here are the basics.
In Photoshop, if you want to take out the transparent or solid areas around your image, you can use the Trim command. This lets you take out some of the fluff that may be around your image. Cropping an image involves using the Crop tool. You highlight the section of the object that you want to keep, and everything outside of the crop lines are removed.
Let’s say you want to get some business cards printed out for this fancy new venture that you’ve got going. If you’re using a template like the one above, they’ll have listed a “bleed” area. This is the area that will be trimmed off of the business card when the job is printed. Without it, the ink won’t print all the way to the edge, and you’ll have a clear border or white edge.
If you want to setup bleed lines on your project, make the artboard larger than it needs to be, then drag in guides and place them at the bleed points designated by your printer. Then just make sure your design goes to the edges of the artboard, and therefore past the bleed lines.
image via Minuteman Press
14. X-height vs. Line height
This one is easy. The line height refers to the height of a line as designated by your design program or web browser. It’s a vertical unit of measurement, and it can be adjusted by tweaking your leading (another callback!).
X-height refers to the height of the lowercase “x” in any font. Why is that important? Fonts are measured in point sizes, which goes from the very top of the highest character above the baseline, and then down to the lowest descender from the same point. But when we’re reading, most of the letters are lowercase, and those proportions can be all over the place depending on what font you’re using. By referring to the x-height, you know how legible the font will be in different sizes.
image via Danielle Walker Designs
15. Italic vs. Oblique
This is an easy one to confuse, and it happens all the time. Take a font, and slant it at an angle; that’s now an oblique version of the font. Now take a font, slant it at an angle and change some characters to give it a more ornate or calligraphic appearance. So then oblique is slanted but the same font, while italic is a complementary version of the prime font, but at a slanted angle.
image via Bigelow & Holmes
Kevin Whipps is a writer and editor based in Phoenix, Arizona. When he’s not working on one of the many projects in his queue, he’s looking for fun and irreverent things online to share with his friends.Tags: