المساحة الآمنة حول الشعار ليست "قانونًا هندسيًا" له قيمة واحدة تصلح لكل العلامات. لا توجد قاعدة عالمية تقول إن Clear Space يجب أن يكون 10% من العرض، أو نصف ارتفاع الشعار، أو حرف X دائمًا. المساحة الجيدة هي منطقة حماية بصرية تمنع النصوص والصور والحواف والعناصر المنافسة من خنق العلامة، وتُعرّف بوحدة سهلة القياس مشتقة من الشعار أو نظام الهوية نفسه.

الخطأ الشائع هو اختيار رقم يبدو محترفًا داخل Brand Guidelines ثم اكتشاف أنه لا يعمل على Avatar صغير، أو ظهر علبة ضيق، أو Signage كبير. الأفضل بناء قاعدة بسيطة، ثم اختبارها في التطبيقات الواقعية، وإضافة استثناءات مدروسة عندما يحتاج النظام ذلك.

ما معنى Clear Space فعلًا؟

هي المنطقة المحيطة بالشعار التي لا يدخل فيها عنصر بصري منافس مثل:

• نص.
• صورة.
• أيقونة.
• حافة.
• Pattern قوي.
• Logo آخر.

لكن خلفية بسيطة يمكن أن تمتد داخلها، لأنها ليست "عنصرًا" منفصلًا بالمعنى نفسه.

المساحة الآمنة تخدم:

• التعرف.
• الهدوء.
• فصل الشعار عن المحتوى.
• الحفاظ على الشكل.

لا تمنع اللون أو الصورة الخلفية تلقائيًا؛ تمنع ازدحام العناصر حول العلامة.

اختَر وحدة X من داخل الشعار

الوحدة الأفضل:

• سهلة القياس.
• موجودة في كل النسخ الأساسية.
• ثابتة نسبيًا.
• ليست صغيرة جدًا.

أمثلة:

• ارتفاع حرف.
• عرض رمز.
• سماكة Stroke رئيسي.
• ارتفاع Counter.
• نصف ارتفاع monogram.

لو الشعار: Symbol + Wordmark.

يمكن تعريف: X = height of letter F أو X = width of symbol element

ثم Clear Space: 1X around all sides.

لكن لا تختَر أصغر تفصيل في الشعار؛ سيعطي مساحة غير مفيدة.

لماذا وحدة مشتقة أفضل من mm؟

لأن الشعار يتغير حجمه.

إذا Clear Space = 8 mm: يعمل على Poster. يفشل على Business card.

إذا = 1X: يتغير مع Scale.

هذه Relative rule.

لكن في الإنتاج قد تحتاج Minimum physical values أيضًا.

مثال: Clear space = 1X. At sizes below 20 mm, use compact logo.

هذا أكثر عمليًا.

لا تجعل الوحدة معقدة

Guideline: X = 37.5% of cap-height × golden ratio؟

لا.

المستخدم يحتاج يطبقها.

وحدة واضحة: X = width of icon stem.

صورة توضح.

Brand guideline هدفها الاستخدام، لا إثبات الرياضيات.

اختبر الحالات الأربع

1. Logo horizontal.
2. Logo stacked.
3. Symbol only.
4. Monogram.

كل variant قد يحتاج Clear Space مختلفًا.

لا تفترض نفس X.

مثال: Wordmark needs 1X. Symbol needs 0.75X. Monogram needs 0.5X.

إذا الاختبارات تدعم.

لكن لا تصنع 8 rules بلا حاجة.

Clear Space ≠ Minimum Size

فرق مهم.

Clear Space: محيط.

Minimum size: أصغر حجم للاستخدام.

شعار قد يحترم Clear Space ويظل صغيرًا لدرجة غير مقروءة.

في Guidelines ضع قسمين.

Clear space

1X.

Minimum

Print: 20 mm. Digital: 120 px.

هذه أرقام مثال فقط.

يجب اختبار الشعار الفعلي.

كيف تحدد Minimum size؟

اختبر:

• 5 sizes print.
• 5 digital.

Print: Laser. Offset proof. Actual stock.

Digital: 1x screen. 2x. mobile.

راقب:

• wordmark readability.
• fine gaps.
• ®/™ if required.
• tagline.
• symbol.

إذا tagline تفشل أولًا: create version without tagline.

Responsive.

Pattern قرب الشعار

إذا Pattern جزء من الهوية: هل يدخل Clear Space؟

إذا Pattern contrast منخفض: قد يكون مسموح خلف الشعار.

لكن: إذا motif قوي: احذفه داخل zone.

Define: Logo protection field.

Example: Solid rectangle behind logo.

لا تجعل Pattern يقطع Counter.

صورة خلف الشعار

Clear Space لا يمنع الصورة نفسها، لكنه يمنع العناصر المهمة داخلها من التنافس.

اختبر:

• face.
• edge.
• high contrast.
• texture.

لو background busy: استخدم:

• one-color logo.
• solid holding shape.
• gradient overlay.

لا تستخدم White logo فوق السماء البيضاء.

Clear Space alone لا يحل contrast.

التباين

Logo itself exempt from WCAG text contrast, لكن Design needs recognition.

إذا logo monochrome: black on light. white on dark.

إذا colored: test.

No low-contrast uses.

Guidelines show: Correct. Incorrect.

Do not treat clear space as substitute for contrast.

Edge of format

هل Page edge يدخل Clear Space؟ نعم بصريًا.

Logo لا يوضع على الحافة أقل من X.

لكن Packaging bleed? إذا Logo intentionally cropped: هذا Logo treatment مختلف ويجب أن يكون معتمدًا، لا استخدام عادي.

Don't crop master logo.

Unless brand system has pattern-derived crop, not logo.

Fold / seam

Packaging: Fold = edge.

Logo should not enter Fold if important.

Clear space extends from fold.

Also: glue. seal. cap.

Dieline constraints.

Use production template.

Handle

Shopping bag: handle rope may cross logo.

Consider handle part of exclusion zone.

Clear space should include real object interference, not only printed elements.

Mockup test.

Barcode / QR

Keep logo clear.

But barcode has own quiet zones.

Do not overlap systems.

If logo near QR: both need clear.

Arrange.

No "logo inside QR" unless QR design verified and allowed; separate article covers.

Partner logos

Co-branding: two clear-space systems.

Define lockup.

Do not simply place two logos "1X apart" if one dominates.

Create official co-brand lockup: Divider. sizes. spacing.

Clear space around total lockup.

If partners vary: minimum separation.

Legal marks

TM/® may sit within logo bounding area.

Is it included in X measurement? Define.

Often clear space measured from outermost mark including trademark if part of master artwork.

Do not move ® independently unless brand/legal allows.

Tagline

Logo + tagline lockup: clear space from full lockup.

If tagline separate: different.

Don't squeeze tagline into clear zone.

If space tight: use logo without tagline.

App icon

Clear space inside square: different.

Platform masks.

Logo clear space rule may not fit.

Create dedicated app/avatar spec.

Do not use primary horizontal logo at 32 px.

Symbol.

Guideline: Avatar is exception system, not violation.

Social profile

Circular crop.

Use symbol with internal padding.

Clear space from circle edge.

Test platform crop.

No wordmark.

Again responsive variant.

Favicon

16/32 px.

Clear space may be baked into SVG/canvas.

Use simplified mark.

Do not apply 1X and make symbol microscopic.

Brand guidelines need "micro" rule.

Signage

Large: more environmental clutter.

May need more space, not less.

Logo on storefront: other signs. doors. windows.

1X minimum. Can increase.

Clear space = minimum, not exact.

Important: say minimum clear space.

People can use more.

Stationery

Letterhead: logo near corner.

Need margin >X.

Combine page grid.

Business card: maybe same.

Test.

Don't force logo tiny to meet X.

Use compact variant.

Packaging

Front panel: Logo. Product name. Image.

Hierarchy may intentionally bring product name near.

Clear space around logo protects.

But if 1X makes product name too low: maybe rule too large.

Test 5 pack sizes.

Do not design rule before real application.

How to choose X methodically

Step:

1. Try 0.5X.
2. 0.75X.
3. 1X.
4. 1.5X.

Place text.

Blur view.

Which separation keeps logo distinct?

Then: test small.

Choose minimum.

This is design decision.

Document.

No pseudo-science.

Optical vs mathematical

Logo with diagonal: bounding box includes empty corners.

Clear space measured from bounding box may look huge.

Can define custom silhouette bounds? Risk complexity.

Simplest: use bounding box.

Or: define anchor guides.

If unusual logo: diagram.

Don't rely software bounding box if effects/shadow.

Clear space from core mark, excluding effects.

Effects

Logo should rarely use shadow, glow.

If official logo has effect: Clear space from visual edge or vector? Define.

Better have flat logo.

Effects optional environment.

Clear-space guidelines simpler.

X based on cap height

Wordmark: X = cap height.

Works.

But Arabic wordmark: Cap height concept not apply.

Use: height of specific Arabic letter. stroke module. symbol.

For bilingual identity, choose common unit.

Don't import Latin typography logic blindly.

Arabic logos

If Arabic calligraphy has ascenders/descenders: unit can be: height of central letter. dot diameter? Too small.

Test.

Also diacritics/dots included in bounds.

Don't crop dots.

Clear space from outermost form.

Minimum physical line

Clear space doesn't protect fine detail.

Print test.

If logo at 15 mm: thin 0.15 mm maybe fail.

Create compact.

Supplier.

No universal minimum.

Guidelines visual

Page: Logo center. X colored blocks around.

Caption: Minimum clear space = X.

Another page: Examples.

Correct: more than X.

Incorrect: text inside X. edge inside X. pattern inside. partner logo.

Keep simple.

Exceptions page

Approved exceptions:

• favicon.
• social avatar.
• watermark.
• embroidery.

Each has dedicated asset.

Don't say: "Clear space can be ignored when needed."

That destroys rule.

Instead: Use approved variant.

Dynamic digital

Responsive header: Logo can shrink.

At breakpoint: switch horizontal → symbol.

Not shrink below min.

Clear space padding becomes CSS token.

Example: desktop: 24 px. mobile: 16 px around compact mark.

These values derived.

Don't use image margin manually each page.

Developer handoff

Provide:

• SVG with no extra whitespace? Usually yes.
• CSS/container padding handles clear space.

If SVG itself has 1X embedded padding, developers may add more.

Decide: Asset tight bounds. Layout provides space.

For social export: padding baked.

Document.

Export files

Logo SVG: tight.

PNG: transparent maybe with tight.

Template: safe area.

Do not put hidden clear-space rectangle in artwork if it will affect clicks/layout.

Keep guide separate.

Watermark

Watermark may intentionally ignore standard clear space relative to photo.

But: use dedicated watermark asset. opacity. position.

Don't call it logo primary.

A watermark is special use.

Testing with competitor context

Put logo: shelf. website header. poster.

Does clear space separate enough?

If category crowded: maybe 1.5X.

Brand guidelines can set 1X min, recommend 1.5 in marketing.

Do not change per mood randomly.

Clear space and legal protection

Clear space is design rule, not trademark law guarantee.

Do not say: "1X protects trademark legally."

Trademark protection separate.

Clear space may support consistent brand use but isn't legal registration.

Checklist

• unit X?
• easy to identify?
• primary?
• stacked?
• symbol?
• tagline?
• TM included?
• min size?
• print test?
• digital?
• edge?
• fold?
• handle?
• co-brand?
• avatar?
• favicon?
• exceptions?
• developer?
• guideline diagram?

الخلاصة

تحديد المساحة الآمنة للشعار لا يحتاج Golden Ratio ولا رقمًا سحريًا. اختر وحدة واضحة من الشعار نفسه، حددها كـMinimum clear space، ثم اختبرها على تطبيقات حقيقية: عبوة، بطاقة، موقع، كيس، Avatar، ومقاسات صغيرة. افصل Clear Space عن Minimum Size، واعمل Variants معتمدة للحالات التي لا يحتمل فيها الشعار الأساسي المساحة. المساحة الآمنة الجيدة بسيطة بما يكفي ليطبقها أي مصمم أو مطور، وقوية بما يكفي لتحمي الشعار من الزحام من غير أن تجعل التطبيقات مستحيلة.

المصادر العربية

• W3C — WCAG 2.2 (للتباين الرقمي؛ الشعار مستثنى من SC 1.4.3): https://www.w3.org/TR/wcag/
• Adobe Illustrator — About selecting colors and approved swatch libraries: https://helpx.adobe.com/illustrator/desktop/manage-colors/select-and-adjust-colors/about-selecting-colors.html
• Figma Learn — Define your design system: https://help.figma.com/hc/en-us/articles/14552740206743-Lesson-2-Define-your-design-system

© 2026 FargPack. جميع الحقوق محفوظة للمحتوى الأصلي.

Logo clear space is not a universal geometric law with one correct value. There is no industry rule stating that every logo needs 10% of its width, half its height, or exactly one “X” around it. Effective clear space is a visual protection zone that keeps text, imagery, edges, strong patterns, and competing marks from crowding the brand.

A good rule uses a simple relative unit derived from the logo or identity system and is tested across real applications. A beautiful equation in the guidelines is useless if it fails on a small package, mobile header, social avatar, or narrow label.

What clear space actually means

Clear space is the area around the logo where competing visual elements should not enter.

Typical exclusions include:

• text
• icons
• other logos
• strong pattern motifs
• image focal points
• page edges

A plain background can still extend behind the logo.

Clear space is about visual competition, not creating a transparent rectangular box around every application.

Its goals are:

• recognition
• visual separation
• hierarchy
• consistency

Derive a simple X unit from the logo

Choose a unit that is:

• easy to identify
• stable
• large enough to be useful
• present in the primary mark

Possible sources:

• height of a letter
• width of a symbol element
• main stroke thickness
• counter height
• half the monogram height

Example: X = height of the F

Then: Minimum clear space = 1X on all sides.

Avoid using the smallest decorative detail.

If X is tiny, the protection zone becomes meaningless.

Relative units scale better than fixed millimeters

A rule such as: Clear space = 8 mm

may work on a poster and fail completely on a business card.

A relative rule: Clear space = 1X

scales with the logo.

Production guidelines can still add physical minimum sizes.

For example:

• clear space = 1X
• below 20 mm logo width, switch to compact logo

That is more practical than one fixed measurement.

Keep the formula simple enough to use

Avoid: X = 37.5% of cap height multiplied by a golden-ratio construction.

The user needs to apply the rule correctly.

A clear diagram and a simple unit are more valuable than mathematical complexity.

Brand guidelines exist to support consistent use, not demonstrate geometric sophistication.

Test every approved logo configuration

A brand may include:

1. horizontal logo
2. stacked logo
3. symbol
4. monogram

Each can require a different protection rule.

For example:

• wordmark: 1X
• symbol: 0.75X
• monogram: 0.5X

if testing supports those values.

Do not create many rules unless there is a real need.

A system that is impossible to remember will not be followed.

Clear space and minimum size are different

This distinction should be explicit.

Clear space protects the area around the mark.

Minimum size protects internal legibility.

A logo can have perfect clear space while being too small to read.

Guidelines should contain separate sections.

Example structure:

Minimum clear space

1X.

Minimum size

Print: tested physical width.
Digital: tested pixel width.

Do not copy another brand’s minimum-size number.

Test your own mark.

Determine minimum size empirically

Print and display the mark at several sizes.

For print:

• office laser
• professional proof
• final substrate if possible

For digital:

• normal-density display
• high-density display
• mobile header
• thumbnail

Inspect:

• wordmark legibility
• counters
• thin strokes
• registered mark
• tagline
• internal spacing

If the tagline fails first, create a version without the tagline.

That is the beginning of a responsive logo system.

Pattern near the logo needs its own rule

If a brand uses a pattern, decide whether it can enter the logo protection area.

A low-contrast background texture may be acceptable.

A strong motif may not.

A useful rule: Primary logo sits on a calm field. Pattern begins outside the protection zone.

Do not let a motif cross through the logo counters or visually merge with the symbol.

Images behind the logo require contrast as well as space

Clear space does not automatically solve a busy photograph.

A face, bright highlight, sharp edge, or texture can compete even when no object technically enters the X zone.

Possible solutions:

• choose a quiet image area
• use a solid holding shape
• apply a controlled overlay
• switch to positive or reverse logo

Do not place a white logo over a white sky and claim the clear-space rule was followed.

Clear space and contrast solve different problems.

Digital contrast rules are separate

Under WCAG 2.2, text that is part of a logo or brand name is exempt from the standard text-contrast requirement in Success Criterion 1.4.3.

That does not mean low contrast is a good brand choice.

It means WCAG treats logotypes differently from body/interface text.

Buttons, form labels, UI icons, and navigation still need to meet applicable accessibility requirements.

Do not use the logo exemption to justify inaccessible interface colors.

Format edges are visual competitors too

A page edge, trim line, or crop is part of the clear-space environment.

Do not place the logo closer to the edge than the minimum zone.

For packaging, also consider:

• fold
• seam
• glue zone
• cap
• handle
• seal

A logo can be technically inside the dieline and still be visually damaged by construction.

Treat folds and seams like edges

If the package fold enters the clear-space zone, the logo may distort.

Use the actual supplier dieline.

Do not measure protection only on the flat front rectangle.

A wraparound bottle label can place the logo near a curve or overlap seam.

Test the assembled object.

Shopping-bag handles are real exclusion zones

A rope handle crossing the logo creates a violation even if no printed object enters the guideline rectangle.

When building bag artwork:

• include handle position
• include top fold
• photograph a physical prototype

Clear space must consider physical components, not just printed graphics.

QR and barcode zones have separate requirements

Do not use the logo’s clear-space rule to define barcode quiet zones.

Barcodes and QR codes have their own technical requirements.

If logo and code are close, both systems must be respected.

Do not “share” the empty space and assume one rule satisfies both.

Co-branding needs an official lockup

Two logos placed together create another hierarchy problem.

Do not simply place them one X apart and call it done.

Define:

• relative sizes
• divider if needed
• separation
• total lockup clear space
• vertical/horizontal versions

If partner logos vary, create a general co-brand framework.

Clear space around the combined lockup should be defined.

Trademark symbols belong to the logo master when required

If ™ or ® is part of the approved master, decide whether the clear-space measurement includes it.

Usually, the easiest workflow is to measure from the outermost approved artwork.

Do not reposition a registration symbol freely unless the legal/brand team permits it.

Tagline lockups need their own measurement

Logo + tagline is a separate lockup.

Measure clear space from the full lockup.

If a small format cannot support it, use the logo without tagline.

Do not squeeze the tagline into the logo’s protection area just to preserve all elements.

Avatars require dedicated rules

A horizontal logo rarely works well inside a circular social profile crop.

Create:

• symbol
• monogram
• approved avatar master

Define internal padding from the circle or square mask.

This is not “breaking clear space.”

It is using an approved responsive variant designed for that context.

Favicon use is an extreme case

At 16–32 px, a full logo may be impossible.

Use a simplified symbol.

The clear space may be built into the asset or application container.

Do not apply 1X around a tiny wordmark until the logo becomes a microscopic dot.

Brand guidelines need a micro-application rule.

Large signage may benefit from more space

Clear space is usually a minimum, not an exact value.

Environmental signage often competes with:

• doors
• windows
• neighboring signs
• architecture

Use more than 1X when needed.

The guideline should say: Minimum clear space not: Exact required gap

Additional space is normally acceptable.

Stationery should combine clear space with the layout grid

For letterheads and business cards:

• page margin
• header grid
• logo protection

should work together.

If the required 1X causes the logo to become too small, consider the compact mark rather than shrinking the primary below its minimum.

Packaging is the best stress test

Put the logo on:

• small label
• large carton
• pouch
• bottle
• shopping bag

Test:

• product name relationship
• image
• quantity
• fold
• seam
• barcode
• finishing

If 1X never works, the rule is too large or the primary lockup is not appropriate for those formats.

Guidelines should emerge from application tests, not precede them blindly.

A simple method for choosing X

Try:

• 0.5X
• 0.75X
• 1X
• 1.5X

Place real text or imagery outside each zone.

Blur the composition or step back.

At what distance does the mark stop feeling crowded?

Then test the smallest application.

Choose the simplest minimum that works consistently.

This is a design judgment, not pseudo-science.

Mathematical bounding boxes can mislead

A diagonal or irregular symbol may have large empty corners in its rectangular bounding box.

Using that box can create overly generous space.

Options:

• accept the simple rectangular rule for ease
• define custom reference guides for unusual marks

Avoid a complicated silhouette-based formula unless the brand truly needs it.

Simple systems are more likely to be followed.

Logo effects should not redefine the rule unless they are official

If someone adds:

• shadow
• glow
• outline

to the logo, that effect should not become part of the clear-space measurement unless it is an official approved variant.

Ideally, the primary mark remains flat.

Effects can be environmental treatments, not new master logos.

Arabic logotypes need culturally appropriate measurement units

“Cap height” is a Latin typographic concept.

For an Arabic wordmark, use a more relevant unit:

• height of a chosen letter
• stroke module
• symbol dimension
• a stable internal square

Include dots and diacritics in the visual bounds.

Never crop or ignore Arabic dots because the Latin rule was easier.

Print detail is a separate constraint

A logo may have enough clear space and still fail in print because its thin line is too small.

Review:

• minimum stroke
• counter size
• reverse gaps
• finishing process

If small production fails, use a compact variant.

Do not solve every print problem by adding more clear space.

Build a clear guideline page

Show:

• logo
• X measurement
• color blocks around all sides
• caption: minimum clear space = X

Then show: Correct

• more than X
• quiet background

Incorrect

• text inside zone
• page edge inside zone
• pattern collision
• partner logo collision

The guideline should be understandable without a paragraph.

Document approved exceptions

Examples:

• favicon
• avatar
• watermark
• embroidery
• engraving

Do not write: “Clear space can be ignored when necessary.”

That destroys the rule.

Instead: Use the approved micro/avatar/watermark asset for this case.

Exceptions should be designed, not improvised.

Responsive website headers need implementation rules

At large desktop width: horizontal logo.

At smaller breakpoint: compact logo or symbol.

Do not continuously shrink the horizontal logo below its tested minimum.

Clear-space padding can become a layout token.

For example: desktop logo container padding
mobile symbol container padding

Values depend on the actual mark and UI.

Decide whether whitespace is inside the SVG or in the layout

For development handoff, a common clean approach is:

• SVG uses tight vector bounds
• CSS/layout provides clear-space padding

If whitespace is embedded in the SVG and developers also add padding, the logo can become too small.

For social export, built-in padding may be useful.

Document the difference.

Watermark use is a separate asset

A watermark may intentionally sit close to an image edge and use lower opacity.

Treat it as: watermark variant

not: primary logo with ignored rules

Define:

• opacity
• position
• size
• safe margin

Do not let people invent watermark treatments ad hoc.

Test the brand in competitive context

Place the logo in:

• ecommerce grid
• shelf mockup
• website header
• signage

Does the minimum zone protect it enough?

If the environment is crowded, increase space.

You can define: 1X minimum 1.5X recommended for campaigns

Keep the recommendation stable.

Clear space is not a legal trademark guarantee

A clear-space guideline supports brand consistency.

It does not automatically provide legal trademark protection.

Do not state: “Using 1X protects the trademark.”

Trademark law, registration, dilution, and enforcement are separate questions.

Consult qualified counsel for important legal usage.

Final checklist

• X unit defined
• easy to identify
• horizontal logo rule
• stacked logo rule
• symbol rule
• tagline rule
• trademark-mark treatment
• minimum size
• print test
• digital test
• edge spacing
• fold/seam handling
• handles
• co-branding
• avatar
• favicon
• exceptions
• developer implementation
• visual examples

Final takeaway

Logo clear space does not require a golden ratio or a magic percentage. Choose a simple unit derived from the mark, define it as a minimum protection zone, and test it on real applications: packaging, stationery, website headers, shopping bags, avatars, and small sizes. Keep clear space separate from minimum-size rules and create approved responsive variants for contexts where the primary lockup cannot work. The best clear-space guideline is simple enough for any designer or developer to apply and strong enough to prevent visual crowding without making real applications impossible.

English sources

• W3C — WCAG 2.2 (digital contrast; logotypes are excluded from SC 1.4.3 text contrast): https://www.w3.org/TR/wcag/
• Adobe Illustrator — About selecting colors and approved swatch libraries: https://helpx.adobe.com/illustrator/desktop/manage-colors/select-and-adjust-colors/about-selecting-colors.html
• Figma Learn — Define your design system: https://help.figma.com/hc/en-us/articles/14552740206743-Lesson-2-Define-your-design-system

© 2026 FargPack. All rights reserved for the original content.