BrandingModule 2: Naming and visual identityLesson 7 of 10
Course progress60%
17 min lesson · Updated August 2026
How do typography, imagery and iconography shape identity?
Typography, imagery and iconography create a recognizable visual voice when they are selected for meaning, usability, rights and consistent application—not fashion alone.
What you will learn
By the end, you will understand:
Build a readable type hierarchy
Define an image approach with real subject guidance
Use coherent icons and legally permitted assets
Visual explainer
See the idea clearly.
Aa
A brand system combines a readable heading/body type hierarchy, documentary portrait direction, product crops and one coherent icon family across website, social and print.
Typography has voice and function
Type choices can feel formal, technical, warm or expressive, but readability and language support come first. A display face can add identity while a practical text face carries long reading and interface work.
Test real words, numbers, punctuation, weights, scripts and small screens. Confirm web/app/print licences and file formats.
Create hierarchy with several tools
Tool
Use
Size/scale
Show page, section and detail relationships.
Weight
Create emphasis without making everything bold.
Spacing
Group related content and create rhythm.
Line height/measure
Support comfortable reading.
Color
Add hierarchy only with sufficient contrast.
Case/tracking
Use restrained labels; avoid long hard-to-read uppercase text.
Imagery needs a point of view
Define subjects, moments, lighting, color, composition, cropping and level of polish. “Use authentic photos” is not enough—show what authenticity means for this business.
Use real people and work confidently where permission exists. Avoid tokenistic representation, misleading composites and generic stock scenes that contradict the service.
Iconography supports, not replaces, language
Choose one coherent approach to stroke, fill, corner, perspective and optical size. Use familiar symbols where clarity matters and pair ambiguous icons with labels.
Meaningful icons and controls need sufficient contrast and accessible names. Decorative icons should not create screen-reader noise.
Rights and provenance
Typeface licence and allowed embedding
Photographer/illustrator agreement
Model/property releases where needed
Stock licence scope and expiration
Creator/employee permission
AI tool terms and source risks
Trademarked objects or artwork in images
Alt text and captions
File metadata and owner
Version/source archive
Test the system in real applications
01
Strategic visual traits
02
Type/image/icon directions
03
Representative prototypes
04
Accessibility and language test
05
Rights review
06
Production test
07
Document rules and source files
Real-world example
Example: a clinic chooses calm clarity
Example
The clinic uses a warm humanist sans-serif for readable guidance, real environmental portraits with consent, and simple labelled icons. It rejects fashionable ultra-light body text and AI-generated patient photos that could imply false testimonials.
Try this
Build a real-content specimen
Create one mobile page with an H1, long paragraph, price, form error, Arabic/English sample, portrait and four icons. Test readability, rights and consistency.
Common questions
Questions beginners ask.
How many fonts should a brand use?
Enough to create a useful hierarchy; often one family or a considered pair is sufficient.
Can Google Fonts be used commercially?
Many are open-source, but verify the licence of the exact family and intended embedding/use.
What is line length?
The width of a line of text; comfortable reading often uses a controlled measure rather than full-screen width.
Should all photography use one filter?
No. Consistency comes from art direction, not merely an identical overlay.
Do icons need labels?
Use labels when meaning is not universally clear, especially for navigation and actions.
Can AI generate brand imagery?
It can assist, but rights, truth, bias, representation and provenance require review.
What is image alt text?
A contextual text alternative that conveys the image’s relevant purpose to users who cannot see it.
