Typogram's Branding, Design, and Typography Index
Welcome to Typogram’s FontDiscovery newsletter, written by your resident font and design nerd, Hua. Want to learn more about font and design? Subscribe FontDiscovery to get weekly doses of learning and inspiration♪
We are also working on a revamp to make this list more interactive. Check out part one of this update here.
Ascender
The part of a lowercase letter that goes above the top of x-height (height of lowercase “x”).
Baseline
The baseline is the horizon line on which the letters sit.
Bowl
Bowl is a closed curved stroke that connects to either a vertical stroke or to itself.
Bracket
Bracket is the area where a serif and a stroke are connected.
Brand Color
Brand color is the primary color associated with your brand. It can be on logos, business cards, decks, social media posts, websites, and other branding materials.
It’s also the color your audience will associate your brand with. For example, Home Depot’s brand color is orange.
Brand Identity
Brand identity is the visual aspect of a brand. Brand identity includes your logo, imagery, typography, colors, and creative assets. Together, these elements make your brand recognizable to your customers. Your brand identity is one of the most important parts when it comes to creating your brand.
Cap Height
The height of capital letters from the baseline.
Counter
Counter is an area that is partially or entirely closed by other parts of the letters. There are two types, open and closed.
- Open Counter
The area is partially closed.
- Closed Counter
The area is completely closed.
Descender
The part of a lowercase letter that goes below the baseline
Design Composition
Design composition is how design elements are placed on a page. Since elements are positive space and the unused space is negative space, we can also say that composition is the overall distribution of positive and negative spaces in the design.
A general rule for creating good composition is to find a balance between negative and positive space. When there is a lack of balance between negative and positive, there is tension. However, tension can also be explored to create powerful compositions.
Design Grid
Grids in design are systems for creating and organizing layouts. The layouts can be for print or screen. In design, “form follows function,” and layout is the perfect example of this. Different grids(layouts) suit different purposes.
Font
A font is the digital and graphical representation of of a typeface.
Font Family
A set of fonts that shared design styles. For example, Helvetica Bold and Helvetica Regular, both of these are in the Helvetica family.
Font Style
Normal, italicized, oblique style of the font.
Font Weight
The weight of a particular font is the thickness of the character relative to their height.
Logo
The logo is the piece of artwork that represents your brand. While a logo is only a single piece of artwork, it is used everywhere on your brand, like landing pages, social media for marketing, and ads. That’s why when you create your logo, you should think about its usability in different environments. There are times when you may have to display your logo in a small size. There might be times when your logo will end up in a dark background. Keeping those restrictions in mind at the beginning will save you troubles later on.
Monospace
seen around 1950
A monospaced font is fixed width, meaning all its letters and characters have the same width and occupy the same horizontal space. Monospace fonts are used in code editors and science periodicals in addition to many others.
Example: Plex Mono, Space Mono
Positive Space
Positive space is the counterpart of negative space. The positive space is the space that the subject (this can be the content or artwork) takes up.
Sans Serif
First seen before the 18th century but wasn’t used as widely. This category of fonts does not have serifs extending at the end of strokes. By the early 19th century, Sans Serif started to become more popular.
- Geometric
seen around 1920s
Geometric Sans serif is influenced by geometric shapes, such as circles, rectangles, or triangles. The strokes also have very little contrast. Futura is an example.
Example: Futura
- Grotesque
seen around 1815
Grotesque sans serif got its name from the Italian word grottesco, meaning “belonging to the cave” because this sans serif had an overly simplistic appearance. Grotesque sans serif is the first generation of sans serifs, with a lot of weird (wonky) visual traits.
Example: Darker Grotesque
- Humanist
seen around 1916
Humanist sans serif is characterized by calligraphic influence. You can see it in the stroke contrast. Overall, it has a more organic structure such as a double-story “a” or “g”.
Example: Open Sans
- Neo-Grotesque
seen around 1950s
Neo-Grotesque reworked the design of Grotesque and made shapes and curves of letters less awkward.
Example: Roboto
Serif
Serifs are letters with “serifs,” which are small lines attached to the end of letter strokes.
- Modern
late 18th century
Modern Serifs, also called Didones, have the largest contrast in their strokes and vertical stress axis. They are considered modern. You will find many Modern serifs in magazines and editorials.
Example: Playfair Display
Stroke Contrast: +++
- Old Style
late 15th century, ~1465
Old Style is the earliest serif style. Old Style serifs usually have a left-leaning curve axis with very little contrast between the thick and thin strokes.
Example: EB Garamond
Stroke Contrast: +
- Transitional
mid-18th century
These types of serifs are in-between “Old Style” and “Modern” serifs. In these serif types, the contrast between thick and thin strokes is more pronounced. Sometimes you will see ball terminals and vertical stress. The capital letter R usually has a curved tail.
Example: Times New Roman
Stroke Contrast: ++
Slab Serif
early 19th century, ~1817
Slab serifs have very thick, block-like serifs.
Example: Roboto Slab
Stroke Contrast: various
Terminal
Any end of a stroke that does not include in a serif.
Typeface
A typeface (or type, for short) is a set of glyphs that share a common design. For example, Helvetica.
Typographic Hierarchy
Typographic hierarchy is the visual cue of scale and spatial relationship between the specific font styles. Typography hierarchy is crucial. It shows the audience which information is the most important and which is the least. For example, on your landing page, you probably want to capture the customers' attention by first guiding them to the product's unique value, then offering them a detailed description.
To achieve this visually, you can make the header containing the copy for values of the product to be bigger and bolder in style than the detailed description of the product. That way, the eyes traveled to the header first, then to the description of the project.
Typography
Art of arranging pieces of text via typefaces to make information legible, readable, and pleasing to the eye.
Typography System
Typography System is the combination of fonts and font styles that create your visual branding system. For example, you typically have corresponding fonts and font styles for headers, subheads, and body copy on the landing page. For branding, we will normally use the same typography system across most of the branding assets to create a consistent message.
White Space/Negative Space
White space, also called negative space, is the area that is left empty in design. It could be around the content or artwork(like a photo), inside the content, or in-between two pieces of content. White space is crucial because it gives the elements in your design breathing room and provides ease for the viewer when they look at the information. Good use of white space also guides the audience’s eyes from one piece of content to the next, creating a hierarchy of information.
x-height
The x-height is the height of a lowercase letter “x” from the baseline.