A to Z of Design

With Canva and other digital design tools available to non-designers, it’s more important than ever to know your design ABCs. Follow along and learn basic design terminology—from alignment to ZIP—that will make your designs both attractive and effective.

The A to Z of Design came out of a daily blogging challenge I have participated in several times. The blog series has been moved here for easier reading.

A is for Alignment

Alignment is the positioning of text, images or design elements in a layout. Items can be left-aligned (also called flush left), right-aligned (flush right), centered or justified (when text aligns on both left and right edges). Justified text can cause strange gaps, so extra attention must be given to line breaks and spacing.

B is for Bleed

If a design prints to the edge of the paper, it must be extended slightly past the page—this is called bleed. A standard bleed is 1/8–¼” past the actual page size (also called trim size) but varies by print vendor. A design with bleed is printed on a larger sheet of paper and trimmed to the correct size.

C is for Color

Designers use a variety of color systems, based on the project’s needs and goals. CMYK is a system in which colors are created using a combination of cyan (C), magenta (M), yellow (Y) and black (K) inks. CMYK is also referred to as four-color process printing. 

PMS (Pantone Matching System) is a standardized system in which each ink color is assigned a number, i.e. PMS 179. This allows print vendors to assure color accuracy. PMS colors are often used for branding projects (usually 1 or 2 colors) in which color match is crucial. PMS colors are also called spot colors. 

RGB (red, green, blue) is a system used by computer monitors and video screens. RGB colors are difficult to match as brightness and quality can vary by monitor. 

Hex is a six-digit system used for web applications (i.e. HTML and CSS). Colors are specified like this: #CD5C5C.

D is for DPI

DPI (or dots per inch) is a way to measure the resolution of a printed digital image. The higher the DPI, the higher the detail and quality of an image. For most print projects, 300 DPI is optimal. When an image is enlarged, its DPI and resolution become reduced so it’s best to use an image that is 300 DPI at the actual size or larger than it will be used.

This also means that you can’t “size up” or take an image of lower quality, say 150 DPI, and make it 300 DPI. (Note: vector images don’t apply to these rules as they can be enlarged without losing quality.) To learn more, read Creative Bloq’s post, The ultimate guide to image resolution.

E is for EPS

EPS, TIF, JPG, oh my! Navigating all the various file formats can be confusing. Here’s a quick primer.

EPS (vector): A fully-scalable file format, which means quality and resolution are not lost when scaling up. This type of file is generally used for logos or other artwork that will be reproduced in print.

TIF: The standard format used for high-resolution, detailed images that will be placed in a layout program.

JPG: A compressed image file format, mainly used for desktop printing and web/online graphics. It does not support transparent backgrounds.

PNG: A low-resolution image format used for web or social media graphics, as well as PowerPoint/Word files. Images can have a transparent background.

GIF: A low-resolution image format mainly used for web or email.

PDF: A file format that embeds fonts, images and design. Used often for design proofs or forms (fillable form fields can be created). Print vendors will also accept high-resolution PDF files for print projects.

F is for Fold

Choosing a fold is an important part of the design process. How well do you know your folds? Below are some of the most common folds. 

For folding inspiration and examples of more unique folds, check out the Super-Cool Folds page by FoldFactory.

G is for Gutter

The gutter is the space created by the binding of a book or magazine. It is the inside margins of the left and right pages or blank space between two facing pages. Depending on the type of binding, the gutter measurement may need to be increased as the viewing area can be reduced by the curvature of the pages.

H is for Hierarchy

An important principle of graphic design is visual hierarchy. It communicates to the viewer the importance of each element in relation to the rest. Elements with more importance are made bolder in size, weight or color. Items are also arranged on the page according to their importance to the reader or viewer.

I is for Indicia

An indicia is an imprint on a mailpiece, that is instead of a stamp, indicating that postage has been paid. All pieces in a permit imprint mailing must be the same weight. The mailer must submit forms and a fee to the Post Office where the pieces will be mailed. TIP: Many print vendors handle this as part of their mailing and fulfillment services. For more info, see this USPS Quick Service Guide on permit imprints.

J is for Juxtaposition

Juxtaposition is the art of placing design elements close to each other with the intention of creating visual interest or contrast. The design elements may be similar to each other or jarringly different. The goal is to create a situation that will draw in and engage the viewer.

K is for Kerning

Kerning refers to the space between characters (letters, numbers, etc.) as well as the process of adjusting that space to make words more legible or pleasing to the eye. Most fonts require at least some kerning to avoid awkward gaps or spaces. These gaps are more apparent in larger text such as headlines. Kerning is more art than science. A designer usually adjusts a word’s kerning by sight rather than specific measurements. Bad kerning is usually a designer’s biggest pet peeve.

L is for Leading

Leading is a typesetting term that refers to the vertical space between lines of text. Leading is measured from baseline (the line the text rests upon) to baseline and is calculated in points, i.e. 12 point leading. Leading is used to avoid letterforms from touching and to make the text more legible, especially in large blocks of type. The term leading comes from the early days of metal typesetting when small strips of lead were inserted between lines of type.

M is for Monochrome

Monochrome refers to a design that only uses one color or shades of one color. A grayscale (or black-and-white) design is considered monochrome, as well as a design printed using one Pantone color (see example above). Monochrome designs are sometimes chosen to keep printing costs down as only one ink color (and related printing plate) is required.

N is for Negative Space

Also called “white space,” this refers to the areas of a design that are empty or don’t contain any design elements. Negative or white space gives a design “breathing room.” Using adequate negative space allows design elements to stand on their own, prevents a design from looking cluttered, and helps to guide the viewer’s eye successfully around the design.

O is for Orphan

An orphan is a word or short line of text that appears by itself at the top of a column (i.e. when a paragraph flows onto the next column). Similarly, a widow is a word that appears by itself at the bottom of a text block or paragraph. It’s always a good idea to manually adjust a text layout to avoid orphans and widows as they can distract the reader and create spacing issues.

P is for Print

Print is not dead! In fact, there are more ways to print affordably now than in the past. Offset printing is a method that transfers ink from a plate to a rubber blanket and then to paper using a different printing plate per color. It is best used when precise color and print quality are needed. If Pantone colors are used in a design, offset printing will assure the most accurate color match. 

Digital printing is a method where a digital-based image is printed directly to paper (or another substrate such as plastic or metal). It is useful when quantities are low or a quick turnaround is needed, as there isn’t as much set-up required as for offset. 

Letterpress printing is a type of relief printing where an inked raised surface (printing plate) is pressed down onto paper in a printing press. This results in a slight indentation of the paper, so heavier and higher-quality paper stock should be used. Letterpress is best used for fine line work and typographic designs.

Q is for Quote

A pull quote is a quote or excerpt “pulled” from the main text to set it apart or highlight it in some way. Pull quotes are usually styled differently (i.e. bold, italic, color) and larger in size to stand out from the body text. They are commonly used in magazine and brochure design.

A pull quote may be a sentence that has been removed from the main text or one that has been repeated for emphasis. Personally, I’m a big fan of pull quotes, especially in blog posts. They help to keep the reader’s interest and move the eye along the page.

R is for Resolution

Resolution is a way of measuring the quality of an image. In general, the higher the resolution, the higher the quality. A high-res image will be sharp and detailed, while a low-res image will be pixelated or blurry. A high-resolution image results in a larger file size due to the larger number of pixels captured within the image. For print projects, 300 dpi (at 100% of the desired size) is usually the minimum resolution recommended for quality output, while for online images, 72 dpi is recommended.

S is for Serif

Serifs are the small lines or flourishes that extend from the beginning and end of a stroke on a letter or symbol. Serif fonts have this decorative element, while sans serif fonts do not. Serif fonts are usually easier to read in printed works, which is why most books are typeset in a serif font. However, sans serif fonts can be more readable online, due to the lower resolution of computer monitors and digital devices, which can make thin serifs difficult to see.

T is for Tint

tint is formed when white ink is mixed with a color to make the color lighter. It’s also called “screening back” a color and is indicated by a percentage (i.e. 50% red). Using tints allows you to include multiple colors in a design when a project budget only allows for 1-color printing.

Conversely, a shade is formed when black ink is mixed in with a color to make the color darker.

U is for Usage

Image usage rights are generally available in royalty-free or rights-managed options. Rights-managed (RM) images are basically “rented” from the image owner, so they are limited by things such as duration of use, type of use (i.e. editorial, print, online), geographic location, or number of impressions. 

Royalty-free (RF) images allow (nearly) unlimited use, in any application for as long as you like, based on the terms of the license agreement. There are also now multiple online sources for free stock images licensed under the Creative Commons Zero (CC0) license, which means they can be used anywhere without attribution required. But always check the licensing information on the website for any photo or illustration you purchase or download before using them.

And most importantly, just because you find an image online doesn’t mean you can use it! Research the image first to see if a license or attribution is required. See this website for more information about image usage rights.

V is for Vector

You may have had a designer ask you for a vector version of your logo and wondered: “What the heck is that?” Vector images are made up of points, lines and curves, so they can be scaled to virtually any size without losing quality or becoming pixelated or blurry; they maintain their high resolution.

Conversely, raster images are created from a grid of pixels (if you’ve ever accidentally zoomed in really close on an image, you’ve seen this). So when you enlarge a small raster image, you begin to see those pixels and hard edges. Enlarging too much will cause the image to appear low resolution. Vector images are generally created in Adobe Illustrator and have a file extension of .eps or .ai. Raster images are generally created in a program like Photoshop and can have a file extension of .eps, .tif, .jpg or .png.

W is for Weight

Weight is the range of a typeface stroke’s width. Most type families are available in weights of Normal (or Regular), Semibold, and Bold. Some also include weights such as Light and Extra Light or Heavy and Extra Bold.

The weight of a typeface is especially important to consider when designing a print piece with small type as too light of a typeface could be illegible. Weight should also be considered when designing for the web as light type weights can seem to “disappear” on computer screens or mobile devices.

X is for X-Height

The x-height is the distance between the baseline (the line a letter sits on) and the top of a lowercase letter, excluding ascenders and descenders (the parts of the letters that extend up or down). The name comes from the fact that x-height is measured by looking at the height of the letter “x” in a typeface. Typefaces with large x-heights may appear crowded when used in body copy and will need extra leading to assure legibility.

Y is for Yard

Ok, so we don’t actually use yard measurements in graphic design, but I had to stretch my creativity to find a design term that starts with Y! Back when I started out (ahem, before computers took over), graphic designers had a unique measuring system that was all our own. It consisted of points and picas and I loved it because it was based on multiples of 12 (and therefore easy to calculate in your head).

Points are still used for measuring type sizes (as well as things like paragraph leading) however picas have gone the way of agates (another design measuring system, which was slightly before my time). I was a pica holdout for quite some time, however, I finally gave in and reluctantly started using inches.

Z is for ZIP

A ZIP (Zone Information Protocol) file is a file format that compresses multiple files into a smaller, more manageable size. ZIP files are easily restored by clicking to unzip the file. I always recommend creating a ZIP when sending multiple files—especially if sending font files as they can get corrupted in transfer.