83 Graphic Design Terms You Need to Know

Design is undoubtedly a specialization with its own language and terminology, which can seem bewildering to the rest of us. Don't feel discouraged, though. We study design for living — so much so that we compiled a list of 45 design blogs for inspiration — yet we still have endless learning to do.

Now, you don’t need to become fluent in design-ese. But if you’re working with an in-house or external design team even just knowing a few key graphic design terms can make all the difference.

Whether you’re commissioning some urgent work, discussing ideas or providing feedback on drafts, being familiar with the key concepts will help to make sure you get the design results you envisioned.

To get you started, here are some of the most common graphic design terms, and what they mean.

• Typography, text, and fonts
• Size, Layout and Composition
• Graphics and File Formats
• Color
• Branding, icons and logos
• Web & digital
• UX Design

Typography, Text, and Fonts

What your presentation or webpage says is obviously crucial. But how that text is presented is equally important. The size, look and position of type can make or break a design. These design terms will help you understand how best to display your words in any creative.

1. Copy – The text provided for use in a design or on a website.

2. Kerning – The adjustment of the space between two individual characters in a piece of text, to make the spaces between different characters look more proportional or balanced.
Not to be confused with tracking, which involves the adjustment of the space between all the characters in a piece of text.

3. Leading (pronounced ‘ledding’) – The space between two lines of text. Sometimes also called ‘line height’ or ‘line spacing’.

4. OpenType Font (OTF) – A font format created by Microsoft and Adobe. OpenType fonts are cross-platform, and so are recognized by PCs, Macs and printers, and will look the same on each. Compared with TrueType Font, OTF can store far more characters, allowing the inclusion of characters, like glyphs or ligatures (e.g. œ or Æ).

5. Orphans, widows and bad breaks – Words or short lines at the beginning or end of a paragraph that are separated from the rest of the paragraph by a new page or column starting. This can give a piece of text an unbalanced look. Bad breaks is a generic term used to describe widows or orphans in a piece of text.

According to the Chicago Manual of Style:

• a widow is a short, paragraph-ending line that appears alone at the top of a new page or column.
• an orphan is an opening line that appears alone at the bottom of a page or column, separated from the rest of that paragraph.

Orphan can also refer to a word or part of a word that appears on its own line at the end of a paragraph.
In practice, however, the terms widow and orphan are often used largely interchangeably.

6. Serifs – The small curves, lines and ‘feet’ added to the ends of strokes on some letters.

7. Sans-serif font – A font (or typeface) in which the characters don’t have serifs (Arial, Futura, Verdana, etc.).

8. Serif font – A font (or typeface) in which the characters have serifs (like Garamond, Georgia and Times).

9. Serif vs. sans-serif – which to use? – There are no fixed rules on whether to use a serif or sans-serif font. Serif fonts are sometimes said to look more traditional, and be well-suited to printed formats, while sans-serifs are cleaner and more modern. Slab serifs are more commonly used in headings than in body copy.
This page uses sans-serif fonts for both headings (Futura Regular) and body text (Nunito Sans Regular).

Some people believe that serif fonts are more legible, but the evidence on this, particularly on screen, is in fact inconclusive. Legibility will have as much to do with things like kerning, leading and tracking.

10. Slab serif font – A font (or typeface) in which the characters have strong, block-like serifs (e.g. Figaro, Rockwell, and Sentinel).

11. Script font– A font that has a flowing stroke and mimics cursive handwriting. Examples include Lucida Handwriting, Monotype Corsiva and the infamous Comic Sans.

12. Tracking – The space between characters in a block of text. Unlike kerning (which focuses on the space between individual letter pairs), tracking relates to all the characters in the selected text, and is used to make it look more or less dense.

13. TrueType Font (TTF) – An open font format designed to ensure fonts look the same on Mac, PC or in print and can be enlarged or shrunk to almost any size.

14. Typeface vs. font –These terms are sometimes used interchangeably, but there is a difference. The typeface is typically the ‘family’, which can contain several fonts, of different styles (e.g. Roman, condensed or italic) and sizes.
So ‘Times’ and ‘Arial’ are typefaces; ‘Times New Roman’ and Arial Narrow’ are fonts within those typefaces.

Size, Layout and Composition

How graphic elements relate to one another – how big they are, how they’re spaced, how they’re aligned – is a central part of design. We can all tell if a design isn’t quite laid out right, even if we can’t quite put our finger on why. The design terms below will help you work out what it is that’s wrong.

15. Alignment – How text or images are arranged or lined up on a page (e.g. left, right, center, etc.)

16. Asymmetry – When text or graphics are arranged unequally on either side of a central line. An asymmetrical design can still be balanced – for example by balancing a single, dominant element on one side of the central line with several lesser elements on the other side.

17. Balance – The design or placement of images, text or other design elements so as to be evenly distributed (and thus more appealing to the eye). Balance can be achieved either through symmetry, asymmetry or radial balance.

18. Bleed – Where a design extends beyond the page’s printed edge. This helps eliminate the risk of a white border when the document is cut to size after printing.

19. Contrast – Where two elements on a page are markedly different from one another, typically to make a design or element stand out.
Contrast is often used in relation to colors (e.g. a black background and white text, or light vs. dark). However, it can equally apply to shapes (e.g. combining rounded and sharp-edged shapes) or sizes (e.g. large items positioned alongside small).

20. Grid – A series of intersecting vertical, horizontal, angular and/or curved lines used to organize and arrange graphic elements on a page.

21. Gutter – Typically, the gap between two columns of text.
In book production, gutter also describes the white space between the inside edge of the printed text and the book’s spine.

22. Hierarchy – The arrangement of design elements (typically text) so as to indicate their relative importance, and guide the user’s eye.
A typical typographic hierarchy might include headings, subheadings and body copy in different sizes, colors or weights of type.

23. Negative space (a.k.a. white space) – Parts of a design (such as a web page) without any text or images.
Remember, white space doesn’t have to be white – a background color without text or images is white space too!

24. Padding – In graphic design, the negative space (or ‘breathing room’) all the way around an object.
In web design and coding, padding is used more specifically to refer to the space between the inside edge of a border and the actual image. This contrasts with the margin, which is the space between the outside edge of a border and the next element.

25. Proximity – The closeness / distance between different design elements.

26. Radial balance – A radial design is one in which the design elements move outwards from a central point, as a way to achieve balance in a design, webpage or piece of text.

27. Repetition and consistency – The use of the same or similar design elements in order to create a unified ‘look and feel’ to a design or series of designs.

28. Symmetry – When text, graphics and other design elements are designed or arranged so as to be the same on both sides of a central line. Symmetry is one way to achieve balance in a design, webpage or piece of text.

29. Trim – Trim size is the final size of a printed design after it has been cut to size. Trim marks are the lines just outside the corners of a design to show where a cut should be made.

Graphics and File Formats

We’ve all seen suffixes like .jpg or .png at the end of image files. Terms like GIF have now been given ‘everyday’ meanings of their own. But what, in practice, is the difference between them? Why would a designer choose one over another? Here’s what you need to know.

30. Pixels – The small squares that make up a digital raster image. The word “pixel” is an abbreviation of “picture element”. See also Resolution, PPI.

31. Raster images – Raster images are made up of a preset grid of pixels, meaning that, if the image is enlarged, it can appear ‘blocky’ or blurred (this contrasts with vectors).
Because each pixel has an assigned color code, raster images are good if, for example, the colors in a photo need to be corrected or modified.
Raster file formats include JPG, GIF, PNG, TIFF and RAW.

32. Resolution – The quality and detail of an image based on the number of Dots per Inch (DPI) for printed images or Pixels Per Inch (PPI) for digital images contained within the image.
The more DPI/PPI, the higher the resolution, and the better quality the image. The lower an image’s resolution, the more blurred or blocky that image will look when enlarged.

33. Vector image – Vector images are made up of small graphics (points, lines, polygons and curves) generated using a mathematical equation.
This can be contrasted with the fixed pixel grid of a raster image, and means that, unlike raster images, vector images won’t become blurred when enlarged Vector graphics are typically used for logos, illustrations and icons, and are particularly suited to images that will be used across different-sized formats.
Vector file formats include PDF, EPS and AI.

34. File formats – Whether you’re talking about photos, graphic designs, documents – or indeed some combination of them all – there are many different formats in which they can be saved. Each has its own specific characteristics, which may make them more or less suitable for specific uses.

When it comes to graphic design, some of those most commonly used include:

• 35. AI (Adobe Illustrator Artwork) – A proprietary vector image format developed by Adobe. As the name suggests, AI is the native file format for Adobe Illustrator design software.
• 36. EPS (Encapsulated PostScript) – Another Adobe-owned vector file format, EPS is one of the most commonly used formats for vector designs, in particular printed designs like logos and brochures.
• 37. GIF (Graphic Interchange Format) – A raster file format which can display up to 256 colors. Because of the limited color palette, GIF file sizes are very small, but are not suitable for reproducing, for example, color photographs.
  The format is often used for the simple animations familiar from social media and viral content. GIFs also support the use of transparent backgrounds.
  Despite the format creator’s assertion that it’s pronounced ‘JIF’ rather than ‘GIF’ with a hard ‘G’, the debate over the correct pronunciation of GIF appears to be no closer to being resolved!
• 38. JPEG/JPG (Joint Photographic Electronic Group) – A raster file format, and the most commonly-used such format for web-based designs – in particular online photos, banner ads, etc.
  JPEGs are compressed, and so file sizes are much smaller than with, for example, TIFF or RAW files. However, that compression also results in some loss of image quality.
• 39. PDF (Portable Document Format) – A file format developed by Adobe to allow documents to be viewed across different formats and to look the same on each. PDF is one of the most commonly-used formats for exchanging documents.
  A PDF file can store formatted text, fonts, vector graphics, raster images and metadata. However, editing possibilities are limited.
• 40. PNG (Portable Network Graphics) – Another file format that is popular for web images, due to its small file size. PNG offers millions of colors, transparency and lossless compression, allowing for better quality images than, for example, GIF images.
• 41. PSD (Photoshop Document) – A proprietary raster image format developed by Adobe. As the name suggests, PSD is the default file format for Adobe’s Photoshop image-editing and design software.
  PSD supports layering, allowing designers to amend individual layers of an image, even after saving (when that image is then converted into a universal format for sharing – e.g. JPEG, GIF or TIFF – the layers are ‘flattened’).
• 42. RAW – A file format used by many digital cameras or scanners. RAW image files contain largely unprocessed data, meaning the user has full editing control. RAW files are therefore also much larger in size than, for example, JPEGs.
  Think of RAW files like the negatives from a 35mm camera film: unprocessed, but containing all the information needed to create the image.
• 43. SVG (Scalable Vector Graphics) – A commonly-used, open vector image format for creating two-dimensional graphics.
  Because the attributes of an SVG image are defined in text-based XML files, code can be used to create or edit the files. Alternatively, drawing software can be used, as it would be for other file formats.
• 44. TIFF (Tagged Image File Format) – A cross-platform graphic file format often used for exchanging raster images between different applications (in the same way PDF is used for documents). TIFF images are higher quality than PNG or JPEG, but consequently have a much larger file size.

Color

Color can create powerful visual impact or effects, and even trigger a deep emotional response. It’s why companies invest so much in their brand colors or we spend so much time deciding what to wear. Color is often the thing designers and clients end up discussing most. And it’s why the core principles and graphic design terms around color are well worth understanding.

45. Analogous – Analogous color schemes are those made up of colors adjacent to one another on the color wheel. The use of such similar, well-matched colors results in designs that feel serene and harmonious.

46. CMYK – A four-color model used for print. CMYK creates colors by adding colors (Cyan, Magenta, Yellow and the Key Color (Black)) together. As a result, when looked at on-screen, CMYK colors will tend to look darker and less vibrant than RGB colors.

47. Color theory – The series of rules, concepts and definitions relating to the use of color in design, including the mixing of colors and the visual effects specific color combinations create. Much of color theory is based on the color wheel.

48. Color Wheel, The – A circle with differently-colored sectors that is used to show the relationship between colors.
The color wheel shows three categories of color: primary colors (red, blue and yellow), secondary colors (made by mixing two primary colors), and tertiary colors (sometimes called intermediate colors, and made by mixing a primary and a secondary color).

49. Complementary – A complementary color scheme comprised of colors directly opposite one another on the color wheel.

50. Cool colors – Colors on one side of the color wheel, such as blues, greens and violets. Cool colors stimulate feelings of cold, and are therefore often used to create a calm, reassuring and soothing atmosphere.

51. Duotone – A method of printing images in just two colors, one of which is typically black.

52. Gradient – A gradual change of color, either from one color to another, or from a color to transparency. 
The most common forms of gradient are linear (where the color changes between one point (or one end of a shape) and another) and radial (where the color changes outwards in all directions from a fixed point).

53. Grayscale – A monochrome color palette made up only of black, white and various (up to 256) shades of gray.

54. Hex – A system of classifying colors by allocating each a six-digit number. Hex is short for hexadecimal.

55. Hue – A ‘variety’ of color, hues are the terms we use when describing the color of an object. Red, blue, green and yellow are all hues. When blacks, grays and whites are added to hues, you get shades, tones and tints.

56. Monochrome – A color scheme made up of only one color and darker and lighter shades of that color (for example, grayscale).

57. Opacity – Opacity (typically measured as a percentage) indicates how transparent an image or design element is. 0% opacity is totally transparent (in effect invisible). 100% opacity means the image is completely solid (opaque).

58. Palette – The set of colors used to make up an image or other design elements. The colors in a palette will typically be chosen because they work well together. Using the same color palette across different design elements can help create a consistent, harmonious ‘look and feel’.

59. Pantone (PMS) – A color system (Pantone Matching System) which assigns a number to each hue. Pantone includes colors that can’t be mixed in CMYK. Some brands have trademarked particular Pantones, including Tiffany Blue (PANTONE 1837). Read more about brands and their color choices.

60. RGB – A three-color model used for displaying colors on-screen. RGB creates colors by adding together red, green and blue light in varying proportions.

61. Saturation – The intensity of a color. The higher the saturation, the brighter or more vivid a color looks, and the more it will stand out. Lower saturation images or hues are often used for backgrounds.

62. Shade – A color (hue) with black added.

63. Tint – A color (hue) with white added.

64. Tone – A color (hue) with gray added.

65. Warm colors – Colors on one side of the color wheel, such as reds, oranges and yellows. Warm colors stimulate feelings of heat and warmth, and are therefore often used to create a happy, energized or friendly atmosphere.

Branding, Icons and Logos

Each logo may be different, but that doesn’t mean that there aren’t features or similarities that link them. Understanding this can help you to decide which logo works for your brand, and the messages you want your brand to convey.

66. Brand Identity – The (visual) aspects of a brand that represent the values and ethos of a business, and how it wants to present itself to customers. A name, logo, stationery, packaging design, brand colors, website ‘look and feel’ and ‘tone of written voice’ can all be part of the overall brand identity of a business.

67. Logotype – A brand or product name styled as a logo. Examples include companies like Coca-Cola, Google, IKEA or Visa. Also known as a wordmark.

68. Favicon – The small logo that appears on a webpage tab in a browser toolbar (along with the title of the webpage).

69. Lettermark – A logo comprised of the initials of a business or product – examples include General Electric’s “GE” logo and Volkswagen’s “VW” logo.
Not to be confused with a logotype/wordmark, in which the full brand or product name is styled as a logo.

70. Logomark – A logo comprised of a unique symbol or graphical shape (or shapes). Also known as a brandmark. Examples include the Nike ‘swoosh’, the Android Robot or the Twitter bird.

71. Style guide – A set of standards for the writing, formatting and design of documents and other content. Many businesses will have their style guide, while others may adopt one of the commonly-used ‘standard’ guides, such as the AP Stylebook.

Web and Digital

Website design has its own unique lexicon. Many terms will be second nature to anyone who has used the internet. Others have been absorbed into everyday language. But even then, it can pay to check your understanding – the everyday meaning of a term can be rather different from its original design definition.

72. Landing Page – The page of a website to which search results or digital ads link when clicked. A website may have a single landing page (the homepage), or – more typically – several.

73. Metadata – In short, ‘data about data.’ Metadata provides information about the content of an item (such as a document or image).
For images, common metadata may include the image’s size, its creation date, its color depth, its resolution and accessibility information.
For a text document, the metadata may show, for example the document’s author, its title and its word or page count.

74. Pins – Images from across the internet that are saved (pinned) in an online board (on a site such as Pinterest) or portfolio to act as design inspiration. Sometimes known as pegs.

75. SEO (Search Engine Optimization) – Designing a website or page (typically the copy within it) so as to enhance the site’s ranking in a search engine’s ‘natural’ (unpaid) results, and therefore drive more traffic to that website/page. SEO focuses on visibility within unpaid search results: it does not include strategies to win or target paid-for advertising space.

UX Design

As the name suggests, user experience (UX) design is all about your user’s (or, say, audience’s) experience of a product or design. But beneath that, there is a range of different factors, considerations and terms at play. Here’s a few you should know.

76. Customer experience (CX) – The journey the customer goes on when interacting with a brand, viewed from the perspective of that customer.
The full customer experience will include interactions at different times (from initial discovery and research, through to purchase and after-sales support), on different channels and with different products.
Quality, user-centered design can help to enhance the customer experience and increase a business’ acquisition and retention of customers.
Metrics for measuring CX may include, for example, the customer’s overall experience, their likelihood of continued use, and the likelihood of them recommending the brand to others.

77. Design debt – When important design concepts, stages or solutions are skipped in order to hit delivery deadlines or achieve short term goals.
This deficit, or design debt, ultimately has to be ‘paid back’, meaning additional work and cost further down the line to avoid a negative impact on the brand’s sales or reputation.

78. Design validation – Testing carried out to ensure that a finalized interface, product, or other output corresponds with the original design and fulfills the user needs and requirements.

79. Microcopy – Short sentences or words on a website or app interface used to provide information, assistance or cues to users in using the site/app.
This might include, for example, a pop-up error message, the label on a call to action button, a roll-over explainer to assist in filling in certain form fields, or a link through to further information (e.g. ‘Forgot password?’ or ‘Why is this information needed?’).

80. User-centered design – An approach to design in which users and their needs are the key focus for the designer at each phase of the design process. The objective of user-centered design is to create accessible, ‘user-friendly’ designs that enhance the user experience.
Given this user-focus, users are often involved (e.g. through surveys or user-testing) throughout the design process.

81. User experience (UX) – A customer’s emotions and attitudes as a result of using a business’ product or service (including an app or a website).
Typical metrics for measuring UX include success or error rates, abandonment rates, and the time (or clicks) taken to complete a task.
UX is one part of the overall customer experience.

82. User interface (UI) – The means by which a user interacts with a computer. In digital, web or UX design, UI typically means the Graphical User Interface (GUI) – that is, the combination of graphical elements (text, links, buttons, etc.) a user uses to navigate and control a system such as an app or webpage.
A well-designed UI will be intuitive, enjoyable to use and enable the user to do what they want to do as quickly and effortlessly as possible.

83. Wireframe – In website design, a visual guide that shows only the skeletal framework of the site: for example, the layout of the site’s content and how the various elements on the page (interface elements, navigational systems, etc) work together.
Typically, a website wireframe won’t include the typographic style, color, or graphics. The focus is on the site’s functionality, not its ‘look’.
In three-dimensional design, a wireframe is the skeletal outline of a designed product, showing only the vertices and edges of the product (i.e., as if the product was made of wire).

Is a term you’ve heard not on our list? Let us know @supersideHQ. We’ll send you a definition and add frequently-raised terms to the glossary.