SlideShare a Scribd company logo
1 of 54
Basics of Typography
Anatomy of Type
Historic Families of Type and Classification
Type / Typeface / Font / Families of Type
Studying a Typeface
Kerning, Leading, Tracking, Measuring Type
Type Hierarchy
What is Type Hierarchy?
Typographic Hierarchy is a system for
organizing type that establishes an order of importance
within the data, allowing the reader to easily find what
they are looking for and navigate the content
It helps guide the reader’s eye to where a section
begins and ends, whilst enabling the user to
isolate certain information based on the
consistent use of style throughout a body of text
Type Hierarchy
A Simple Example 1
Type Hierarchy
As you can see in the example, the title, date, and descriptions are all
styled uniquely, consistently and isolated by using paragraph spacing
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Styling Techniques
There are a few basic methods for establishing
a visual typographic hierarchy
Size
Weight
Color
Position
Type Contrast
Type Hierarchy
Size
This is the easiest & most common method for establishing hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Weight
Simply using a bolder weight of a font can help isolate.
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Colour
Colour plays a big role in what our eye sees as primary & secondary.
Generally speaking; warm colors pop, cooler colours recede.
Type Hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Texture & Tone
Hierarchy based on type is usually shaped by relationships of visual
texture and tone; that is, letterforms, words and lines of type come
together to form different tonal values & varying characteristics of
patterns or texture.
Type Hierarchy
Type Hierarchy
Position
Where sections of information are positioned in relationship to
each other can establish a hierarchy
Type Hierarchy
Type Hierarchy
Type Hierarchy
Contrasting Typefaces
A great way to achieve hierarchy is to use contrasting typefaces
Type Hierarchy
Type Hierarchy
Combination
As mentioned previously, these methods can be most effective
when used in combination with one another. This is the fun part –
deciding what combination is right for your content and layout!
Type Hierarchy
Spacing Matters
One of the most important concepts in type design is spacing. It’s
one of the most difficult concepts to grasp for beginning designers,
yet it is also one of the most visually obvious.
Proper typographic spacing is critical in establishing hierarchy; it can
make the difference between confusion and clarity.
Type Hierarchy
Spacing Matters
The rule of proximity in design generally states that related items should
appear closer to each other than items that are not related.
However, proper spacing involves more than just a hard return between
sections of type. Generally, a hard return creates too much space between
content in the context of a paragraph.
Paragraph spacing – either before or after – should be used. This typically
allows the group of content to hold together while providing an adequate
division of content within it.
Type Hierarchy
Type Hierarchy
Type Hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy
Basics of typography hierarchy

More Related Content

What's hot

Fundamental of typography
Fundamental of typographyFundamental of typography
Fundamental of typographyRayn HOWAYEK
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationShahria Hossain
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Graphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazGraphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazMujeeb Riaz
 
Typography - Graphic Design
Typography - Graphic DesignTypography - Graphic Design
Typography - Graphic DesignAbanoub Hanna
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The BasicsMainstreethost
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)RJNithin
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and TrendsRida Farooq
 
An Introduction to graphic design
An Introduction to graphic designAn Introduction to graphic design
An Introduction to graphic designPankul Bindal
 
Logo Design basics
Logo Design basicsLogo Design basics
Logo Design basicsGreg Sarles
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionalsJason Tham
 
Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignCasey Robertson
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryAbanoub Hanna
 
Composition and layout
Composition and layoutComposition and layout
Composition and layoutABY AUGUSTINE
 

What's hot (20)

Fundamental of typography
Fundamental of typographyFundamental of typography
Fundamental of typography
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Graphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazGraphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb Riaz
 
Typography - Graphic Design
Typography - Graphic DesignTypography - Graphic Design
Typography - Graphic Design
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
 
typography
 typography typography
typography
 
Typography
Typography Typography
Typography
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and Trends
 
An Introduction to graphic design
An Introduction to graphic designAn Introduction to graphic design
An Introduction to graphic design
 
Logo Design basics
Logo Design basicsLogo Design basics
Logo Design basics
 
Typography
TypographyTypography
Typography
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionals
 
Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic Design
 
5 Reasons Typography is Powerful
5 Reasons Typography is Powerful5 Reasons Typography is Powerful
5 Reasons Typography is Powerful
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design Theory
 
Composition and layout
Composition and layoutComposition and layout
Composition and layout
 
Typography
TypographyTypography
Typography
 

Similar to Basics of typography hierarchy

Classification And Division Essay Sample.pdf
Classification And Division Essay Sample.pdfClassification And Division Essay Sample.pdf
Classification And Division Essay Sample.pdfAmanda Cote
 
Compare Contrast Essay Template.pdf
Compare Contrast Essay Template.pdfCompare Contrast Essay Template.pdf
Compare Contrast Essay Template.pdfAlexis Turner
 
Elem of design unit 4 module 1 structure of type
Elem of design unit 4 module 1 structure of typeElem of design unit 4 module 1 structure of type
Elem of design unit 4 module 1 structure of typekateridrex
 
Compare Contrast Essay Outline.pdf
Compare Contrast Essay Outline.pdfCompare Contrast Essay Outline.pdf
Compare Contrast Essay Outline.pdfKatie Stewart
 
Division Classification Essay Topics.pdf
Division Classification Essay Topics.pdfDivision Classification Essay Topics.pdf
Division Classification Essay Topics.pdfJennifer Martinez
 
writing techniques
writing techniqueswriting techniques
writing techniquesseherqaiser
 
Example Of Classification Essay.pdf
Example Of Classification Essay.pdfExample Of Classification Essay.pdf
Example Of Classification Essay.pdfCarmen Tran
 
Neoito — Typography for the web
Neoito — Typography for the webNeoito — Typography for the web
Neoito — Typography for the webNeoito
 
Design Principles
Design PrinciplesDesign Principles
Design Principleslindy23
 
Design Principles
Design PrinciplesDesign Principles
Design Principleslindy23
 
Texture and typography
Texture and typographyTexture and typography
Texture and typographykmcintyre3
 
4 principles of design 2
4 principles of design 24 principles of design 2
4 principles of design 2Glenbaker
 
Class 7 Layout
Class 7 LayoutClass 7 Layout
Class 7 Layoutrschaff1
 
Division And Classification Essay. Online assignment writing service.
Division And Classification Essay. Online assignment writing service.Division And Classification Essay. Online assignment writing service.
Division And Classification Essay. Online assignment writing service.Diane Smith
 
1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and ReadabilityMsGilbert
 

Similar to Basics of typography hierarchy (20)

Publication Design Chapter 04
Publication Design Chapter 04Publication Design Chapter 04
Publication Design Chapter 04
 
Text as a connected discourse
Text as a connected discourseText as a connected discourse
Text as a connected discourse
 
Typography class 3
Typography class 3Typography class 3
Typography class 3
 
Classification And Division Essay Sample.pdf
Classification And Division Essay Sample.pdfClassification And Division Essay Sample.pdf
Classification And Division Essay Sample.pdf
 
Compare Contrast Essay Template.pdf
Compare Contrast Essay Template.pdfCompare Contrast Essay Template.pdf
Compare Contrast Essay Template.pdf
 
Publication Design Chapter 05
Publication Design Chapter 05Publication Design Chapter 05
Publication Design Chapter 05
 
Elem of design unit 4 module 1 structure of type
Elem of design unit 4 module 1 structure of typeElem of design unit 4 module 1 structure of type
Elem of design unit 4 module 1 structure of type
 
Compare Contrast Essay Outline.pdf
Compare Contrast Essay Outline.pdfCompare Contrast Essay Outline.pdf
Compare Contrast Essay Outline.pdf
 
Division Classification Essay Topics.pdf
Division Classification Essay Topics.pdfDivision Classification Essay Topics.pdf
Division Classification Essay Topics.pdf
 
Information Design
Information DesignInformation Design
Information Design
 
writing techniques
writing techniqueswriting techniques
writing techniques
 
Example Of Classification Essay.pdf
Example Of Classification Essay.pdfExample Of Classification Essay.pdf
Example Of Classification Essay.pdf
 
Neoito — Typography for the web
Neoito — Typography for the webNeoito — Typography for the web
Neoito — Typography for the web
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Texture and typography
Texture and typographyTexture and typography
Texture and typography
 
4 principles of design 2
4 principles of design 24 principles of design 2
4 principles of design 2
 
Class 7 Layout
Class 7 LayoutClass 7 Layout
Class 7 Layout
 
Division And Classification Essay. Online assignment writing service.
Division And Classification Essay. Online assignment writing service.Division And Classification Essay. Online assignment writing service.
Division And Classification Essay. Online assignment writing service.
 
1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and Readability
 

Recently uploaded

Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full NightCall Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`dajasot375
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 

Recently uploaded (20)

Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full NightCall Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
 
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 

Basics of typography hierarchy