🚧 Under construction — VoTechWorks is being built. A free tech program — complimentary, as our commitment to get America working.
voTechWorksGrade 13 · a vocational technology learning center, by urbanicity
newSchoolWorks.com › VoTechWorks › Technology & Design › Graphic & Digital Media › Branding: Identity Design and Brand Systems › Lesson 7
TEC-DIGI47-03 · Lesson 7 · 11.5 clock hours · lab

Building a Complete Logo System: Variations and Clear Space Rules

Objective. Students extend the primary logo into a full logo system—horizontal lockup, stacked lockup, icon-only mark, and reversed version—and define clear-space and minimum-size rules, all on a single organized multi-artboard Illustrator document

⚠ Pending professional review

This lesson, its worked examples and its practice questions has not yet been verified by an industry-certified professional or by a certification or approval body. It is a study draft and may contain errors. Do not use it as instructions for work on a job site or on live equipment. Always follow your instructor, your supervising professional, and current official references and regulations.

VoTechWorks program approval and accreditation are still in progress. Credentials are issued only by the certifying bodies named in each program, after their own exams.

Why a Single Logo Is Never Enough

A primary logo designed in isolation is only the starting point of a real brand system. In professional practice, that mark must work across dozens of surfaces: a horizontal website header, a square app icon, a white label on a dark package, a tiny embroidered patch on a uniform. No single arrangement can serve every context well. A complete logo system solves this by providing approved, pre-tested variations that protect the mark's legibility and authority no matter where it appears.

This lab extends the primary logo you completed in Lesson 6 into a full, production-ready logo system inside a single multi-artboard Illustrator document.

The Four Required Variations

Horizontal lockup. The icon (or monogram) sits to the left of the logotype on a single baseline or optically centered axis. This is the most common everyday-use version and typically appears in website headers, letterheads, and slide decks where width is available.

Stacked lockup. The icon sits centered above the logotype. This version suits square or nearly square spaces — social-media profile images, app splash screens, and square print ads. Stacking changes the visual weight distribution, so you must re-examine spacing and scale optically, not just center everything mathematically.

Icon-only mark. The icon or symbol is used alone, without the company name. This version is reserved for contexts where the brand is already well established in the viewer's mind, or where extreme size constraints make type illegible. At the start of a brand's life, this mark is used sparingly.

Reversed version. The mark is reproduced in white (or a light brand color) on a dark background. Every variation above should have a reversed counterpart, but at minimum you must produce one reversed version for submission. Reversed artwork is not simply an inverted file — you must verify that thin strokes and counters (the open spaces inside letterforms) still read clearly at smaller sizes.

Build each variation on its own artboard. Name artboards descriptively: `logo-horizontal`, `logo-stacked`, `logo-icon`, `logo-reversed`. Consistent artboard naming prevents errors when files are handed off to other designers or vendors.

Optical vs. Mechanical Spacing

When you move the icon and logotype into a horizontal arrangement, resist the temptation to split the gap using the Align panel alone. Software centers objects mathematically, but human vision does not read space mathematically. A gap that measures equal on both sides of the dividing line may look uneven because letterforms have different visual densities on their left and right edges. Adjust spacing until it looks correct, then measure what you have. That measurement becomes your specification.

Defining Clear-Space Rules

Clear space (also called exclusion zone) is the minimum empty area that must surround the logo at all times. No other text, graphic element, or image edge may enter this zone. Clear space protects the logo's visual isolation and prevents it from appearing cluttered or unintentional.

Define your clear-space module as one of two common approaches:

Whichever method you choose, apply it consistently across all variations. In Illustrator, create guides at the correct offset from each artboard edge (use View > Guides and drag from rulers, or use the Edit > Guides approach with precise coordinates). Set those guides to non-printing so they are visible during design but do not appear on exported files. To annotate the clear-space zone for the specification export, draw a rectangle at the module distance from each edge, set its fill to a transparent tint (e.g., 15% opacity of a spot color), and label it with a text object before exporting the PNG. Delete or hide the annotation rectangle before saving the working AI file.

Minimum Size Rules

Every logo variation has a minimum size — the smallest reproduction at which legibility holds. Below that size, thin strokes fill in, letter spacing collapses, and counters close. Standard starting points used widely in the industry are 0.75 inch wide for print and 32 pixels wide for screen, but your specific mark may require a larger minimum if it contains fine detail.

To test: export each variation at the proposed minimum and print it. Hold the printout at arm's length (roughly 24 inches). If you cannot read the logotype clearly or the icon loses its recognizable shape, increase the minimum until legibility is confident. Document the approved minimum width for print and for screen in the specification table. These numbers are binding — no one may reproduce the logo smaller without a design director's approval.

Organizing the Multi-Artboard File

Use Illustrator's Artboards panel to manage your artboards. Keep all artwork on clearly named layers. Lock any reference layers before presenting or submitting. Save the file as an Illustrator `.ai` file with PDF compatibility checked so clients without Illustrator can open a preview. Place the specification table either on a dedicated artboard labeled `spec-table` or in an accompanying document as directed by your instructor.

Safety and Equipment Notes

When using the printer for minimum-size tests, follow the lab's posted printer guidelines. Do not reach into the printer while it is operating. Use the ruler on a flat, stable surface; a slipping ruler and an X-Acto knife are a common source of lacerations — in this lab you are measuring only, so keep cutting tools stored. Save your Illustrator file frequently and to the designated network folder so work is not lost if a workstation fails.

Key terms10

Logo systemA coordinated set of approved logo variations—horizontal, stacked, icon-only, and reversed—designed to work across all media contexts while maintaining a consistent brand identity.
LockupA specific, approved spatial arrangement of a logo's components (icon and logotype) that is treated as a single fixed unit and may not be casually rearranged.
Clear space (exclusion zone)The minimum empty area required around a logo into which no other graphic element, text, or image edge may intrude; defined by a module derived from the logo's own dimensions.
Clear-space moduleThe unit of measurement used to calculate clear space, typically derived from the cap-height of the logotype or from a defined dimension of the icon.
Reversed versionA logo variation in which the mark is rendered in white or a light color on a dark background, requiring separate legibility testing because thin strokes and counters behave differently in reverse.
Minimum sizeThe smallest width at which a logo variation remains legible; commonly expressed as a measurement in inches for print and in pixels for screen use.
Optical spacingSpacing adjusted by visual judgment rather than by equal numeric measurement, because human perception reads certain shapes as heavier or lighter regardless of mathematical equality.
Non-printing guideA guide line in Illustrator that is visible on screen during design but is excluded from printed output and exported files, used here to show clear-space boundaries.
CounterThe enclosed or partially enclosed negative space within a letterform, such as the interior of an 'O' or 'B'; counters are the first feature to fill in or close when type is reproduced too small.
ArtboardA discrete canvas within an Illustrator document that represents one page or one variation; multi-artboard documents allow an entire logo system to be managed in a single file.

Worked examples4

1. Calculate the clear-space margin for a logo whose capital letters are 18 pt tall, using the cap-height method. Express the result in both points and inches.
  1. Identify the cap-height: the measurement given is 18 pt.
  2. The clear-space module equals one cap-height, so the margin on each of the four sides is 18 pt.
  3. Convert points to inches using the standard conversion: 1 inch = 72 pt, so 18 ÷ 72 = 0.25 inch.
  4. The clear-space margin is 18 pt (0.25 inch) on all four sides of the logo.
Answer: The clear-space margin is 18 pt, which equals 0.25 inch, applied equally on all four sides.
2. A logo's primary horizontal lockup measures 3.6 inches wide. The designer wants to test whether the industry-standard minimum of 0.75 inch wide is proportionally reasonable. What percentage of the full-size width is the minimum-size width?
  1. Identify the full-size width: 3.6 inches.
  2. Identify the minimum-size width being tested: 0.75 inch.
  3. Divide the minimum by the full size: 0.75 ÷ 3.6 = 0.2083 (repeating).
  4. Multiply by 100 to express as a percentage: 0.2083 × 100 ≈ 20.8%.
  5. The minimum-size reproduction is approximately 20.8% of the full primary size, which is a common and acceptable ratio for relatively simple marks.
Answer: 0.75 inch is approximately 20.8% of 3.6 inches, a typical scaling ratio for a minimum-size specification.
3. You are setting up non-printing guides in Illustrator to show a clear-space zone of 0.25 inch around a logo centered on a 4 × 3 inch artboard. What are the exact X and Y coordinates (from the artboard origin at the top-left corner) for each of the four guides?
  1. Identify the clear-space margin: 0.25 inch on all sides.
  2. The artboard is 4 inches wide and 3 inches tall, with the origin at the top-left corner.
  3. Left guide: X = 0.25 inch (0.25 inch in from the left edge).
  4. Right guide: X = 4 − 0.25 = 3.75 inches from the left edge.
  5. Top guide: Y = 0.25 inch down from the top edge (in Illustrator's default screen orientation, Y increases downward from the top-left origin when rulers are set accordingly; confirm ruler origin setting before entering values).
  6. Bottom guide: Y = 3 − 0.25 = 2.75 inches from the top edge.
  7. Enter these values in the Guide dialog (double-click a guide to set its position precisely) or drag guides from rulers and use the Transform panel to confirm position.
Answer: The four guides are placed at X = 0.25 in (left), X = 3.75 in (right), Y = 0.25 in (top), and Y = 2.75 in (bottom), measured from the artboard's top-left origin.
4. A stacked lockup must be scaled to exactly 32 px wide for a screen minimum-size test. The current artboard version measures 240 px wide. What scale percentage should you enter in Illustrator's Scale dialog?
  1. Identify the target width: 32 px.
  2. Identify the current width: 240 px.
  3. Divide target by current: 32 ÷ 240 = 0.1333 (repeating).
  4. Multiply by 100 to get the percentage: 0.1333 × 100 ≈ 13.33%.
  5. In Illustrator, select all artwork on the artboard, open Object > Transform > Scale, enter 13.33% uniform scale, and confirm.
Answer: Enter approximately 13.33% in the Scale dialog to reduce the 240 px lockup to 32 px wide.

The math in this lesson1

Learners set logo clear space at one 18 pt cap-height and convert it to 0.25 inch.
N-Q.1
Brush up in the math halls at newSchoolWorks.com:
In class: Logo variation construction: students build each of the four required lockups on separate artboards, adjusting spatial relationships and weight optically rather than mechanically, and instructor reviews each variation for visual balance before students proceed · Clear-space rule definition: students use the cap-height of the logotype or a defined unit of the icon as the clear-space module, draw non-printing guides demonstrating the rule on each artboard, and export an annotated PNG for each variation showing the clear-space zone · Minimum size testing: students print each variation at the defined minimum size (typically 0.75 inch for print, 32 px for screen), review legibility at arm's length, and document the approved minimums in a specification table
Materials: Adobe Illustrator; student primary logo AI file from Lesson 6; printer access for minimum-size print test; ruler; specification table template (instructor-provided)
Check: Multi-artboard AI file submitted with all four variations, non-printing clear-space guides present on each artboard, and completed specification table — graded pass/fail; all four variations and both specification items (clear space and minimum size) must be present and visually consistent to pass

Practice check8

Answer each question, then check it. Nothing is recorded; this is your own practice.

Visual Design
1. Which of the following best describes the purpose of an icon-only logo variation?
Visual Design
2. A designer measures the cap-height of a logotype and finds it is 24 pt. Using the cap-height method, what is the required clear-space margin on each side of the logo?
Visual Design
3. Why is optical spacing preferred over purely mechanical (mathematically equal) spacing when assembling a horizontal lockup?
Visual Design
4. What is the standard common starting point for a logo's minimum print size?
Setting Project Requirements
5. In Adobe Illustrator, what is the correct way to ensure that clear-space guide rectangles appear on screen but do not output when a file is printed or exported?
Visual Design
6. When testing a reversed logo variation for legibility, which feature of the letterforms should the designer examine most carefully at small sizes?
Project Management
7. A student submits a multi-artboard Illustrator file with four variations but has named all artboards 'Artboard 1' through 'Artboard 4'. What professional practice has the student failed to follow?
Visual Design
8. A logo's horizontal lockup is 288 px wide. A designer wants to scale it down to 32 px wide for a screen minimum-size test. Which scale percentage is correct?
Record this lesson on my transcript. Sign in with your key and enrollment email to record lessons (enroll free if you have no key). This page stays open to read and practise.
← Previous lessonProgram planNext lesson →