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.