Font vs. Typeface (And 14 Other Design Terms We Always Get Wrong)

By on Aug 16, 2016 in Inspiration
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

Pin It

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

Pin It

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

Pin It

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

Pin It

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

Pin It

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

Pin It

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)

Pin It

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

Pin It

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

Pin It

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

Pin It

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

Pin It

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 a

with 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

Pin It

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

Pin It

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

Pin It

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

Pin It

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.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

16 Comments

  1. You know what, perhaps we don't always get these terms wrong. How about that! Negative space v white space, when are you every going to confuse those? What next Lemons and Oranges.

  2. Shouldn't it be embossing not engraving, to have the print protruding from the front of the paper? Bit ironic if there's a wrong word in this article!

  3. "Point is, DPI is a legacy term when referring to screens, and you should stick with PPI instead."

    Should be the other way round.

  4. As for me it's not that confusing actually. I could be mistaken about "Opacity vs. Fill" in the past when I was a junior (I'm still not good at PS) but everything else is piece of cake for understanding. Anyways it is good article though, I'd like to see our new front-end developer reading this because we had huge troubles working on the http://www.grabmyessay.com/research-papers because of him, no experience at all but he's really talented boy indeed. Good thing everything is done now!

  5. Vector vs. Raster is incorrect. The opposite of vector is bitmap, as in a sequence (map) of bits, not to be confused with the .bmp “Bitmap” document format.

    Rasterisation is the process of converting a vector graphic into a bitmap. Earlier versions of Photoshop used the term “raster” for the rasterisation process, so many people adopted it as a reference to the bitmapped image.

    Language is fluid and it’s common place now to use raster to mean the opposite of vector, but given that you’re article is about the origins of these terms it’s incorrect to say that raster is the opposite to vector.

  6. DPI is indeed important (especially when printing). An image at 72 dpi will look okay at 100% on a screen, but will not print well on paper. The same image at 100% on paper will need to be at least 150 to 300 dpi if it's a photo or 600 to 1200 dpi if it's a solid image such as a bitmapped logo (not vector-vector art usually reproduces well at any size in printing).

  7. Section 6. Opacity vs Translucency:
    You say "It reduces the visibility of the image, making it more opaque" - shouldn't that be LESS opaque?!

  8. In addition to the specific details mentioned above, it just seems to be a poorly written article overall. There is lots of glossing over (or is it forgetting?) facts, inaccuracies, and a generally sloppy feel to it, apparently in an attempt to be breezy and cool. Needed at least another read-through before posting. Rushing to meet deadline, perhaps?

  9. Actually it's doesn't matter if your picture is 72 or 300 dpi in PS ;) What matters is the amount of pixels, and that dpi field just tells you how large the picture will be when printed out. And of course 10 pixels per inch are better than 5 pixels stretched on 1 inch. Digital things have always ppi; dpi is only important for printing or scanning and specified by the device.

  10. I’ve a few gripes with this article. I’ve been a graphic designer for almost 20 years and am quite familiar with most of these terms and there are a few things I’d like to correct.

    One is that a font and a typeface are still two different things, even in the digital world. While “font” no longer refers to one specific size, it still refers to one specific group of characters, which is one file. Most typeface families will have multiple fonts in them. Think Helvetica Regular, Helvetica Bold, Helvetica Italic, Helvetica Condensed Italic, etc. Each of these is a font, but they’re all part of the same typeface. One of the best ways I’ve heard it explained is that the font is the digital file, like an MP3, while the typeface is like the song. So while you would download and play an MP3, you wouldn’t typically ask people what their favourite MP3 is, you would ask them what their favourite song is. Both are not necessarily incorrect used the other way around, they’re just more technically accurate.

    Another is the idea that whitespace and negative space are the same thing. I would disagree, and I view them as two different things, used for different purposes. White space is an area in your design that is absent of objects or visual interest. It should be used to help organize the page and guide the eye. Negative space is more specific spaces and shapes that exist where an object isn’t. I see negative space more specific to logos, typography and illustration wheras whitespace applies more to general layout. Similar, yes, but still different.

    Aside from those two major gripes, there are a number of other small things I feel aren’t fully accurate. Engraving is usually indented like letterpress, and I’m not familiar with engraving used as a print term, it’s usually used when a design is carved into something. I think perhaps you’re thinking more of embossing. TrueType and OpenType are also different in that OpenType incorporates the PostScript version of the font as well, which isn’t mentioned but should be to fully understand the differences between the filetypes. DPI is not a legacy term. It comes up quite often in design, although usually when it’s used people actually mean PPI. Still, PPI/DPI is a measurement used for bitmapped image files, which most designers use everyday. It wasn’t explained how it works there which is an area where many graphic designers are confused. The trim explanation is confusing because you refer to it as the Photoshop action at first and then later on talk about trim in print, which are two very different meanings for trim. The x-height vs line height diagram instead shows line height vs font size vs leading, which is confusing. Oblique fonts aren’t simply slanted fonts. They appear that way but usually have more tweaks than a simple skew.

    Overall I found it a little confusing to read and I knew all the terms. I know I’m being really critical and I hope I don’t come off as a jerk, but I just wouldn’t want young designers to read this and be misinformed. I hope that my comments are helpful.

  11. I'm going to clear up the Engraving/Embossing debate. They're essentially the same thing, both methods produce a raised image on the face of the paper unlike Letterpress where the image leaves a deboss or impression in the paper. The difference between Engraving and Embossing is the use of ink. If there is no ink used, it is considered Embossing or Blind Embossing. If ink (or foil) is used on the raised image it is called Engraving. As a Letterpress printer (who does not offer Engraving or Embossing), this is a question I deal with regularly at my studio.

  12. Thanks Stephanie, I wasn’t aware of engraving as a printing term, I’ve always just heard it referred to as embossing or foil stamping. Good to have your input.

  13. I think there's a mistake in the pictures referred to the leading.
    The leading is the distance between two consecutive baseline.
    Ciao.

  14. Hey there! Great post! I found many new stylistic things for myself. I hope you will publish more post like this one. Also, I recommend for reading this web premium-quality-essays.com. There are many helpful tips about writing.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →