SlideShare a Scribd company logo
1 of 7
Typography
•History
•The word, typography, is derived from the Greek words
τύπος typos "form" or "impression" and γράφειν graphein "to
write", traces its origins to the first punches and dies used to
make seals and currency in ancient times, which ties the concept
to printing.
Typography is the art and technique of arranging type to
make written language legible, readable, and appealing when
displayed. The arrangement of type involves
selecting typefaces, point sizes, line lengths, line-spacing (leading),
and letter-spacing (tracking), and adjusting the space between
pairs of letters.
• The style and appearance of printed matter.
• The art or procedure of arranging type or processing data and
printing from it.
Scope
In contemporary use, the practice and study of typography is very
broad, covering all aspects of letter design and application, both
mechanical (typesetting, type design, and typefaces) and manual
(handwriting and calligraphy). Typographical elements may appear in
a wide variety of situations, including:
1. Documents
2.Presentations
3.Display typography (described below)
4.Clothing
5.Maps and labels
6.Vehicle instrument panels
7.As a component of industrial design—type on household
appliances, pens, and wristwatches, for example
8.As a component in modern poetry (see, for example, the poetry
of e. e. cummings)
Since digitization, typographical uses have spread to a wider range of
applications, appearing on web pages, LCD mobile phone screens,
and hand-held video games.
The Importance of Typography, Part 1:
Fonts Speak Louder Than Words
1. Fonts vs. Typefaces
Fonts, typefaces… what’s the difference? Here’s the easiest explanation to
remember: A font is a grouping of typefaces that have similar
characteristics. A typeface is referring to an individual family member of
that font.
2. Know the Big Players
There are an overwhelming amount of fonts at our fingertips, but first let’s
talk about the main categories of fonts out there.
Serif: Serif is the slight projection at the end of a stroke that’s most commonly
seen at the bottom of letters. If you look closely, some fonts will have
“little feet” on them. This is what characterizes it as being a Serif font. This
allows the eye to flow through sentences with ease.
Sans Serif: Fonts that are Sans have no “feet,” or serif. Take a look at the
diagram:
Script: This font type is known for its elegant, light and professional
appeal. You often see this kind of font written on wedding invitations,
diplomas or certificates. Use this kind of font sparingly. It’s not designed
to be used as body copy or used in small spaces.
Display: You often see this kind of font on movie posters, newspapers,
banners, etc. It’s intentionally designed to grab your attention or to give
emphasis to a certain area. This is another font that’s not meant to be
used in large quantities—a little goes a long way.
Hand Lettering: These kinds of fonts have hand rendered characteristics.
Maybe they look as if a child has written it, or as if someone used a
Sharpie or whiteboard marker to jot something down. Designers like to
use fonts like this because they add a human element to the design—
something that people can relate to.
Typography rules and terms every
designer must know
Choosing a font
01. Size
All typefaces are not created equally. Some are fat and wide; some are
thin and narrow. So words set in different typefaces can take up a very
different amount of space on the page.
02. Leading
Leading describes the vertical space between each line of type. It's called
this because strips of lead were originally used to separate lines of type
in the days of metal typesetting.
03. Tracking and kerning
Kerning describes the act of adjusting the space between characters to
create a harmonious pairing. For example, where an uppercase 'A' meets
an uppercase 'V', their diagonal strokes are usually kerned so that the
top left of the 'V' sits above the bottom right of the 'A'.
04. Measure
The term 'measure' describes the width of a text block. If you're
seeking to achieve the optimum reading experience, it's clearly an
important consideration.
05. Hierarchy and scale
If all type was the same size, it would be difficult to know which was
the most important information on the page. In order to guide the
reader, then, headings are usually large, sub-headings are smaller, and
body type is smaller still.
Size is not the only way to define hierarchy – it can also be achieved
with colour, spacing and weight.
Examples of typography

More Related Content

What's hot

UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptxRiniyaMary
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 
Figma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersFigma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersAugustina Reipšlėger
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
Usable psychology for UX/UI Designers
Usable psychology for UX/UI DesignersUsable psychology for UX/UI Designers
Usable psychology for UX/UI DesignersMaor Shabbat
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJason Hando
 
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptx
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptxWireframe and Low Fidelity Prototype - Developer Student Clubs.pptx
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptxYOSAFAT11
 

What's hot (20)

UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
Lean UX
Lean UXLean UX
Lean UX
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
UI UX DESIGN.pptx
UI UX DESIGN.pptxUI UX DESIGN.pptx
UI UX DESIGN.pptx
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
Figma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersFigma design tool - an alternative for windows users
Figma design tool - an alternative for windows users
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Usable psychology for UX/UI Designers
Usable psychology for UX/UI DesignersUsable psychology for UX/UI Designers
Usable psychology for UX/UI Designers
 
Imk 1 pendahuluan
Imk 1   pendahuluanImk 1   pendahuluan
Imk 1 pendahuluan
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
Konsep dasar UI/UX
Konsep dasar UI/UXKonsep dasar UI/UX
Konsep dasar UI/UX
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptx
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptxWireframe and Low Fidelity Prototype - Developer Student Clubs.pptx
Wireframe and Low Fidelity Prototype - Developer Student Clubs.pptx
 

Similar to Typography in UI Design

Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering TypographyShahria Hossain
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typographyMigle Migle
 
The Art and Science of Fonts.pdf
The Art and Science of Fonts.pdfThe Art and Science of Fonts.pdf
The Art and Science of Fonts.pdfTEWMAGAZINE
 
1.01 Typography PowerPoint
1.01 Typography PowerPoint1.01 Typography PowerPoint
1.01 Typography PowerPointcindymartin
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...prologuitoedic
 
all about typography interactivect.pdf
all about typography interactivect.pdfall about typography interactivect.pdf
all about typography interactivect.pdfjb00007
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use TypographyRavi Bhadauria
 
Text-Elements of multimedia
Text-Elements of multimediaText-Elements of multimedia
Text-Elements of multimediaVanitha Chandru
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdfssusercc3ff71
 
Unit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingUnit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingLauren Bratslavsky
 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgFarisZainudin1
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The BasicsMainstreethost
 

Similar to Typography in UI Design (20)

Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering Typography
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
 
Typography
TypographyTypography
Typography
 
Chap7
Chap7Chap7
Chap7
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
The Art and Science of Fonts.pdf
The Art and Science of Fonts.pdfThe Art and Science of Fonts.pdf
The Art and Science of Fonts.pdf
 
1.01 Typography PowerPoint
1.01 Typography PowerPoint1.01 Typography PowerPoint
1.01 Typography PowerPoint
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
 
Science of font
Science of fontScience of font
Science of font
 
all about typography interactivect.pdf
all about typography interactivect.pdfall about typography interactivect.pdf
all about typography interactivect.pdf
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use Typography
 
Text-Elements of multimedia
Text-Elements of multimediaText-Elements of multimedia
Text-Elements of multimedia
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Typography class 3
Typography class 3Typography class 3
Typography class 3
 
Unit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacingUnit2 type anatomy_categories_spacing
Unit2 type anatomy_categories_spacing
 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdg
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
 
Topography
TopographyTopography
Topography
 
Text
TextText
Text
 

Recently uploaded

Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,bhuyansuprit
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...Pooja Nehwal
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
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
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...Amil baba
 
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
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Narsimha murthy
 
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 nightCheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 nightDelhi Call girls
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentationamedia6
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 nightCheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 nightDelhi Call girls
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 

Recently uploaded (20)

Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
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
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
 
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🔝
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
 
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 nightCheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentation
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 nightCheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 

Typography in UI Design

  • 1. Typography •History •The word, typography, is derived from the Greek words τύπος typos "form" or "impression" and γράφειν graphein "to write", traces its origins to the first punches and dies used to make seals and currency in ancient times, which ties the concept to printing. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters. • The style and appearance of printed matter. • The art or procedure of arranging type or processing data and printing from it.
  • 2. Scope In contemporary use, the practice and study of typography is very broad, covering all aspects of letter design and application, both mechanical (typesetting, type design, and typefaces) and manual (handwriting and calligraphy). Typographical elements may appear in a wide variety of situations, including: 1. Documents 2.Presentations 3.Display typography (described below) 4.Clothing 5.Maps and labels 6.Vehicle instrument panels 7.As a component of industrial design—type on household appliances, pens, and wristwatches, for example 8.As a component in modern poetry (see, for example, the poetry of e. e. cummings) Since digitization, typographical uses have spread to a wider range of applications, appearing on web pages, LCD mobile phone screens, and hand-held video games.
  • 3. The Importance of Typography, Part 1: Fonts Speak Louder Than Words 1. Fonts vs. Typefaces Fonts, typefaces… what’s the difference? Here’s the easiest explanation to remember: A font is a grouping of typefaces that have similar characteristics. A typeface is referring to an individual family member of that font. 2. Know the Big Players There are an overwhelming amount of fonts at our fingertips, but first let’s talk about the main categories of fonts out there. Serif: Serif is the slight projection at the end of a stroke that’s most commonly seen at the bottom of letters. If you look closely, some fonts will have “little feet” on them. This is what characterizes it as being a Serif font. This allows the eye to flow through sentences with ease. Sans Serif: Fonts that are Sans have no “feet,” or serif. Take a look at the diagram:
  • 4. Script: This font type is known for its elegant, light and professional appeal. You often see this kind of font written on wedding invitations, diplomas or certificates. Use this kind of font sparingly. It’s not designed to be used as body copy or used in small spaces. Display: You often see this kind of font on movie posters, newspapers, banners, etc. It’s intentionally designed to grab your attention or to give emphasis to a certain area. This is another font that’s not meant to be used in large quantities—a little goes a long way. Hand Lettering: These kinds of fonts have hand rendered characteristics. Maybe they look as if a child has written it, or as if someone used a Sharpie or whiteboard marker to jot something down. Designers like to use fonts like this because they add a human element to the design— something that people can relate to.
  • 5. Typography rules and terms every designer must know Choosing a font 01. Size All typefaces are not created equally. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page. 02. Leading Leading describes the vertical space between each line of type. It's called this because strips of lead were originally used to separate lines of type in the days of metal typesetting. 03. Tracking and kerning Kerning describes the act of adjusting the space between characters to create a harmonious pairing. For example, where an uppercase 'A' meets an uppercase 'V', their diagonal strokes are usually kerned so that the top left of the 'V' sits above the bottom right of the 'A'.
  • 6. 04. Measure The term 'measure' describes the width of a text block. If you're seeking to achieve the optimum reading experience, it's clearly an important consideration. 05. Hierarchy and scale If all type was the same size, it would be difficult to know which was the most important information on the page. In order to guide the reader, then, headings are usually large, sub-headings are smaller, and body type is smaller still. Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and weight.