ERMAL ALIBALI

🧠 Why Learning Design Vocabulary Matters

When you’re new to graphic design, the technical lingo can feel overwhelming. What’s the difference between a vector and a raster image? Why do colors look different in print vs screen? And what the heck is kerning?

Knowing the correct terms doesn’t just help you sound professional — it helps you design better, communicate clearly with clients, and use design software more efficiently.

So in this article, you’ll find a breakdown of the most important graphic design terms, all explained simply, with examples and use cases.

🎨 File Types & Image Formats

1. Vector

A vector is an image made of mathematical paths, not pixels. That means it can be resized infinitely without losing quality.

🧠 Example: Logos should always be created as vectors so they can be used on anything—from a website icon to a billboard.

File types: .AI, .SVG, .EPS, .PDF

2. Raster

A raster image is made of pixels. The more pixels it has, the higher the quality — but if you stretch it too much, it gets blurry.

🧠 Example: A photo from your phone is a raster image.

File types: .JPG, .PNG, .GIF, .TIFF

3. DPI (Dots Per Inch)

This measures print resolution.

• 72 DPI is fine for screens.

• 300 DPI is standard for printing.

🧠 Example: If your flyer is only 72 DPI, it’ll look blurry when printed.

4. RGB vs CMYK

• RGB (Red, Green, Blue) is for digital designs — websites, apps, screens.

• CMYK (Cyan, Magenta, Yellow, Black) is for printing.

🧠 Example: Design your poster in CMYK if it will be printed, but in RGB if it’s just for social media.

5. Transparent Background

Used when you don’t want a background color. Common in logos and icons.

🧠 Example: A .PNG of your logo with a transparent background can sit cleanly on top of any photo or colored section of a website.

✏️ Typography Terms

6. Font vs Typeface

• A typeface is the family (like “Arial”).

• A font is the style and weight (like “Arial Bold 12pt”).

🧠 Think of a typeface like a music genre and a font like a specific song.

7. Kerning

The space between individual letters.

🧠 Poor kerning example:
“VA” might appear awkwardly spaced without proper kerning.

8. Leading

The space between lines of text (also called line-height).

🧠 Example: Tight leading makes your paragraph look cramped. Loose leading makes it easier to read.

9. Tracking

The uniform space between all letters in a word or line.

🧠 Use tracking to make a heading look more open or compact.

10. Serif vs Sans-Serif

• Serif fonts have “feet” or strokes (e.g., Times New Roman).

• Sans-serif fonts are clean and modern (e.g., Helvetica).

🧠 Serif fonts feel traditional, while sans-serif fonts feel modern and minimalist.

📐 Design Layout Terms

11. Grid

A set of lines (often invisible) that helps align elements in your design.

🧠 Example: Most websites use a 12-column grid layout.

12. Alignment

Refers to how text and objects are lined up.
Options: Left, right, center, or justified.

🧠 Consistent alignment = cleaner, more professional design.

13. Margin vs Padding

• Margin is the space outside an element.

• Padding is the space inside it, around the content.

🧠 Think of a text box: padding is the inner cushion, margin is the outer buffer.

14. Bleed

An area outside the edge of a printed design that gets trimmed off.

🧠 If your flyer has color that goes to the edge, add 3mm bleed to avoid white borders after trimming.

🎯 Branding & Visual Concepts

15. Brand Identity

The visual language of a brand: logo, colors, fonts, style.

🧠 Example: Coca-Cola’s red, cursive font and swirly design is instantly recognizable.

16. Hierarchy

The order of importance in a design, created using size, color, or position.

🧠 Headlines should grab attention, subheads explain, and body text supports.

17. Contrast

The difference between elements — often used to create focus or increase readability.

🧠 Example: White text on a black background = high contrast.

18. White Space

Also called negative space. It’s the empty area between elements.

🧠 Good white space helps a design feel organized, not empty.

🖼️ Image & Asset Terms

19. Mockup

A realistic preview of your design in context — like a T-shirt, phone, or billboard.

🧠 Designers use mockups to present logos, packaging, or app designs to clients.

20. Stock Images

Royalty-free images or illustrations available for use in your designs.

🧠 Sites: Pexels, Unsplash, Freepik

21. Resolution

Refers to the clarity of an image. Higher resolution = sharper.

🧠 1920×1080 is full HD resolution.