Typeface vs. Font and 11 Other Typography Terms Designers Need to Know

Typeface vs Font and Other Typography Terms

Art comes with its own terminology, and design and typography are no exception. When you are looking at something at the granular level graphic design often requires, it’s much easier to have a term for the stylized curlicue at the bottom of your letter “A” than to attempt to describe it every time.

But if you are breaking into the world of design, you hardly have the time to crack open a comprehensive dictionary of typography terms. For instance, do you know the difference between a typeface and a font? Does a graphic designer need to know?

“One thing designers should know about typography is that it is part of the design as well,” says Meghan Dantzler, graphic designer at Brew Agency. “Choosing the typography to pair with your design needs as much attention and care as the design itself. Each font can create an entirely different visual experience. The type of typography chosen can either make or break a design.”

As you can see, designers need to know their way around typography. But instead of hitting you with a huge glossary of terms, we asked graphic designers about the typography terms that are most useful on the job.

Common typography terms designers should know

1. Typeface vs. font

“Think of typeface like an alphabet family, a group of related letters, numbers or symbols that share one basic style,” says Michael Cohen, owner of Michael Cohen Images. “There are millions of typefaces—although most people call them fonts. In fact, the word ‘font’ relates to how you manipulate a typeface—by making it italic, bold or subscript.”

“A font is any style of lettering and only exists on a computer,” says Sandra Lauer, writer for Greenback Inc. Lauer explains that the terms “font” and “typeface” had more relevance when letters and numerals were set by hand. “A typeface existed in real life in various forms,” Lauer says. “There was Letraset, where you could press the ink onto paper, and the letters came out perfectly. You didn't want to try to do lettering by hand with an artist's paint brush or a calligraphy pen because it might not come out perfectly, and you needed to photograph it for a logo or artwork, etc...”

Lauer explains that if you wanted to talk about the style of lettering you were using, you said, “my typeface.” “But now, everyone confuses fonts with typefaces, so it doesn't matter anymore—you can refer to them interchangeably,” Lauer says. “As long as you know the difference between Arial and Helvetica, we can be friends.”

2. Serif

“Serif” refers to extra decoration on the edges of letters. These typefaces have little curlicues and extras off of the T and Y, Cohen says. An example of a serif typeface is Times New Roman. The little extra stylization gives a more established or bookish look to the lettering. Some research suggests that fonts with serifs are slightly easier to read, potentially due to the extra space serifs require between the letters.

3. Sans serif

If you know your French—sans means “without”—you can probably take a guess at what a sans serif character looks like. In sans serif, nothing extra hangs off the basic form of the lettering. Examples of a sans serif typeface are Helvetica and Arial.

4. Kerning

“There are a lot of typography terms, but I find the most important to be kerning and leading,” says Jasmine Bou-Nassif, designer at Stark/Raving Branding + Advertising. “Kerning is the distance between characters. If you adjust the kerning, you are deciding how close or far apart characters are horizontally.” This kind of adjustment can change the look of your text, create more space, adjust readability or make something fit when you have to maximize space.

5. Leading

“Leading (pronounced “led-ing”) is the distance between lines of characters,” Bou-Nassif says. “When you adjust the leading, you decide how close or far apart lines of characters are vertically.” As with kerning, changes in leading can have a major impact on the way a block of text looks and reads. For example, when you write a paper and choose double or single spacing you are altering the leading.

6. Point-size

Point-size is one of the top typography terms a designer needs to know, according to Cohen. “Point-size refers to the actual relative size of the type itself, measured from the top of the ascender (the highest any letter goes, like the top of an ‘h’) to the bottom of the descender (lowest letter below the main line, like ‘g’).” If your teachers ever asked you to write a paper in 12 point font, you’ve already had an example of why point size matters.

7. Ligatures

“I thought it was really cool when I learned what ligatures were,” Bou-Nassif says. “It is when two or more letters are tied into a single character.” For example, Bou-Nassif explains that it’s very common for “ff” to form a ligature in Latin typefaces. “I had seen this happen when using certain typefaces, and I liked that there was a special name for it. Typography is an art, but it is also very scientific in how there is a name and definition for everything.”

8. Tracking

“The term ‘tracking’ is commonly unheard because it is very similar to kerning,” Dantzler says. “But tracking is the uniform spacing between all letters of any word, sentence or paragraph.” Tracking is typically used to indicate letter spacing in a large block of text—creating automatically uniform distances. Kerning usually applies to adjusting smaller pairings by eye.

9. Swash

“Another great word is ‘swash,’ which is essentially a fancy extension of a serif way beyond the actual letter,” Cohen says. “Designers create new ones all the time.” If you ever find yourself wanting to customize your letters with some extra flourish, the word “swash” will come in handy.

10. Personality

“Personality is more about the visual look of font. Everything needs to fit together to keep the whole style consistent,” says Runyu Xia, senior designer at Essense Partners. As an example, Xia explains that branding for an elegant luxury brand might make serif the best choice, whereas a technology company’s website might be better suited to sans serif.

11. Readability

“Readability refers to multiple aspects, including font size, font type, font weight, font color, leading, tracking and more,” Xia says. “The key factor to improve readability is building clear hierarchy, which means creating strong contrast. In general, we make the most important information stand out most.” Xia says a lack of hierarchy ruins the reading experience and will be frustratingly noticeable for audiences. “Great typography should be invisible.”

Xia says designers should regard readability as the most important aspect of typography. “Most clients do not like to take risks. They want their information to be conveyed clearly and accurately to the target audience. That is why readability is one of the most important typography terms.” When you are designing for a client, knowing how to emphasize what they want emphasized is a vital typographical skill.

There’s so much more to learn

Of course, these terms only scratch the surface of terminology specific to typography. But with this basic foundation, you’ll have a better idea of how to talk about the text in your design. Are there any useful typography terms you would add to this list? Put them in the comments below!

Though these terms aren’t necessarily essential for a designer to work and create, knowing them and knowing the capabilities and alteration possibilities they represent can make you a much better designer.

Typography isn’t the only area where a little extra academic knowledge can make a big design impact, however. Check out our article, “7 Things Self-Taught Designers Don't Know They're Missing” to see some of the other things trained graphic designers know.


About the author

Brianna Flavin

Brianna is a senior content manager who writes student-focused articles for Rasmussen University. She holds an MFA in poetry and worked as an English Professor before diving into the world of online content. 

Related Content

Related Content

This piece of ad content was created by Rasmussen University to support its educational programs. Rasmussen University may not prepare students for all positions featured within this content. Please visit www.rasmussen.edu/degrees for a list of programs offered. External links provided on rasmussen.edu are for reference only. Rasmussen University does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen University is accredited by the Higher Learning Commission, an institutional accreditation agency recognized by the U.S. Department of Education.

logo-accreditation-acen logo-accreditation-ccne chart-credential-laddering-associates-bachelors-masters 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE Start Here MASTER'S DEGREE PURSUERS End Here BACHELOR'S DEGREE End Here MASTER'S DEGREE chart-credential-laddering-associates-bachelors 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-msn chart-credential-laddering-nursing-programs chart-credential-laddering-nursing DNP MSN RN to BSN LPN to RN Bridge Accelerated BSN Professional Nursing ADN Practical Nursing Diploma Pre-Licensure Post-Licensure icon-colored-outline-bank icon-colored-outline-certificate icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-hand-heart icon-colored-outline-head-blocks icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-health-plus-leaves icon-colored-outline-hospital icon-colored-outline-lifelong-learning icon-colored-outline-light-bulb-analytics icon-colored-outline-location-pin icon-colored-outline-magnifying-glass icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-nurse-rays icon-colored-outline-padlock-shield icon-colored-outline-person-presenter-screen icon-colored-outline-scales ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-colored-advance icon-colored-arrows-cross-curve icon-colored-briefcase-star icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-development icon-colored-duo-chatbox icon-colored-folder-mortarboard icon-colored-forward-ribbon icon-colored-gears-clock icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-hand-stars icon-colored-hands-gear icon-colored-head-blocks icon-colored-head-cog icon-colored-health-plus-leaves icon-colored-hospital-building icon-colored-laptop-cbe-skyscraper icon-colored-laptop-checkmark icon-colored-laptop-webpage icon-colored-location-map icon-colored-location-pin icon-colored-monitor-paper-scan icon-colored-mortarboard-dollar icon-colored-national icon-colored-people-chat-bubbles icon-colored-person-cheer-star icon-colored-person-laptop-checkboxes icon-colored-person-screen-instructor icon-colored-person-whiteboard icon-colored-phone-chatbox icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-save-time icon-colored-shirt-hat icon-colored-skyscraper icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-triangle-arrow-up-plant icon-triangle-calendar-pencil icon-triangle-clock-rotating-arrows icon-triangle-display-gears icon-triangle-hand-right-speech-bubble icon-triangle-laptop-coding-brackets icon-triangle-mortarboard icon-triangle-paper-ribbon icon-triangle-person-cheer-star icon-triangle-person-juggle icon-triangle-triple-people-chat-bubble icon-modality-campus icon-modality-field icon-modality-online icon-modality-residential icon-arrow icon-bank icon-camera icon-filter icon-general-chart icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-hat icon-general-heart icon-general-laptop-building icon-general-laptop icon-general-leader icon-general-map icon-general-money icon-general-paperwork icon-general-people icon-general-phone icon-general-speak-out icon-head-heart icon-info-circle icon-mail-forward icon-mglass icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-scales icon-share-square-o icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-spinner icon-tag icon-testimonial-quotes icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-circle-arrow-down icon-util-circle-dot icon-util-language-switch icon-util-loading icon-util-open-window-link icon-util-pdf-link icon-util-refresh icon-util-x rebrand-arrows icon-social-facebook-colored icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram-colored icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p-colored icon-social-pinterest-p icon-social-twitter-colored icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play graduate-cap-star-coin hand-coin hand-heart nurse-stethoscope-rays card-send-smile person-yoga-pose suitcase-star