--- title: Typography Terminology description: It's Design Tip Tuesday!! Let's talk about typography... TERMINOLOGY First off, the distinction between font and typeface is that a font designates a… --- [Skip to content](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/144867338#main-content) English Show submenu for translations [![punchmark-logo-horizontal-white](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/punchmark-logo-horizontal-white.png?width=225&height=38&name=punchmark-logo-horizontal-white.png)](https://academy.punchmark.com/knowledge?hsLang=en) - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) Open main navigation Close main navigation - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) - English Show submenu for translations - Go to punchmark.com Go to punchmark.com Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Punchmark Knowledge Base](https://help.punchmark.com/knowledgebase?hsLang=en) 2. [hidden WIP](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en) 3. [Mini Blogs](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en#mini-blogs) # Typography Terminology **It's Design Tip Tuesday!!** Let's talk about typography... **TERMINOLOGY** First off, the distinction between **font** and **typeface** is that a **font** designates a specific member of a type family such as thin, bold, or italic type, while **typeface** designates a consistent visual appearance or style which can be a "family". "What typeface are you using?" "Roboto!""What font are you using?" "Roboto Thin!" A **serif** is a decorative stroke that finishes off the end of a letters stem (sometimes also called the “feet” of the letters). In turn, a **serif** font is a font that has **serifs**, while a **sans serif** is a font that does not (hence the “**sans**”). (photo attached) **FONT PAIRINGS** Let's look into pairing fonts and getting the aesthetic that you're going for. Opposites attract. Contrast is about finding surprising and bold oppositions in style, that bring out the best in each font. Combining serif with sans serif is a classic move. (2 photos attached) When in doubt, keep it in the family! The most straightforward way of guaranteeing that a font pairing works perfectly is by using different fonts within the same typeface family. What about scripts and fancy fonts? These can work beautiful if properly paired. My go to is a simple sans-serif, all caps, thin, and spaced out the letters. (photo attached) ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/142770302-88638a9b8c.jpg) **LEGIBILITY** A good body/paragraph font’s goal is legibility**.** In order to achieve this, look for a font with a high x-height and open counters. The x-height is the height of the lowercase “x” and open counters means the gaps in letters like “a”, “c”, and “e” are relatively wide. (photo attached) **BE WARNED** Never, ever, ever, ever use comic sans or papyrus,... or else.... ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/142770308-0dba05b64f.jpg) ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/142770314-bbbbbdc367.jpg) ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/142770320-17d7697842.jpg) ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/142770326-53f8bf8f19.jpg) - [Default HubSpot Blog](https://blog.punchmark.com/blog) [![pm-symbol-blue](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/pm-symbol-blue.png?width=40&height=45&name=pm-symbol-blue.png "pm-symbol-blue")](https://academy.punchmark.com/knowledge?hsLang=en) Punchmark Resource Center Copyright © 2026, Punchmark