SlideShare a Scribd company logo
1 of 8
WD133: Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Type
In order to create dynamic images
that effectively communicate a
message it is important for
designers to understand some key
terminology.
Readability
Readability is related to how the type is
arranged. Readability is affected by point
size, leading, line length, alignment, letter-
spacing, and word-spacing. Paragraphs of
text, similar to paragraphs in a textbook or
a novel, are meant to be read for
comprehension, and focus must be placed
on readability. This emphasis ensures that
the eyes do not tire and that the formatting
of the copy does not distract a person from
the meaning of the text.
The color and texture of the type selected
will also affect the readability and message
conveyed. Display of red text on a black
background is considered striking, eye-
catching, and readable. White body copy on
a black background can add contrast.
However, the designer must watch out for
strokes that are too thin.
WD133: Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Legibility
Legibility refers to the typeface design. This
element includes the size of the counters,
the x-height, the size of ascenders and
descenders, the character shape and angles,
stroke contrast, serifs or the lack of serifs,
and the weight. These features help
distinguish one letter from another. A
headline on a poster is meant to capture
attention and immediately convey a feeling.
Legibility, though necessary, is not always
the highest priority.
Script, calligraphic, and hand-written fonts
are used in both display and body copy
applications. Although they can convey
elegance, formality, or individualist
messaging, the legibility can be poor, and
they can be difficult to read.
WD133: Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Leading
The spacing between the lines of type
is known as leading. This term relates
to the times when type was set
manually and thin strips of lead were
placed between the rows to increase
the spacing. Tight leading—10 point
type size on 11 point leading, read as
10-on-11 and written as 10/11—is
supposed to be more difficult to read.
A 10/12 is more standard, but the
ideal leading always depends on the
typeface characteristics.
Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Kerning
Spacing between two
characters is known as
kerning.
Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Tracking
Spacing between all the
characters in a line is known as
tracking. If letters are too close,
they are said to be set tight; if
they are set too far apart, they
are said to be open or loose.
Many designers do not focus on
proper and consistent character
spacing, a clear message to the
client that the designer is not
experienced.
Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
Justified Text
Word spacing is a tool used when
aligning text so that the beginning of
a line and the end of the line align
with the left and right column edges,
respectively. This is known as
justified text. Too much word spacing
can lead to large, annoying word
spaces that can lead to rivers. Rivers
occur when the spaces between
words line up top to bottom in a
paragraph. More than three line ups
in a row decreases readability
because attention is drawn to the
river that results instead of the
reading process.
Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties
White Space
White space is a term used to define
the cramped or crowded look of a
headline, paragraph of text, or an
entire layout. Recall the saying “less is
more.” Try to leave space on a page to
create effect and emphasize the text. It
also helps with the flow of the reader’s
eye. A good test for white space is to
turn the completed job upside down
and look at the design at arms length.
This move restricts the brain from
reading the text and forces it to just
look at the design elements and the
weighting and positioning of each. Is
the leading too small? Is the line length
too long? Is the point size to big or too
text-heavy? If the answer is in the
affirmative for any of these questions,
the white space may not be enough or
the layout may be too packed.
Digital Imaging
Unit 4: Working with Type
Module 1: Learning about Type Fonts and Properties

More Related Content

Similar to Wd133 unit 4 module 1 learning about type fonts and properties[2]

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
 
Wd131 unit 6 module 3 type as visual organizer
Wd131 unit 6 module 3 type as visual organizer Wd131 unit 6 module 3 type as visual organizer
Wd131 unit 6 module 3 type as visual organizer kateridrex
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11Bryan Chung
 
Fund of design unit 6 module 3 type as visual organizer
Fund of design unit 6 module 3 type as visual organizer Fund of design unit 6 module 3 type as visual organizer
Fund of design unit 6 module 3 type as visual organizer kateridrex
 
Clear language putting readers first
Clear language putting readers firstClear language putting readers first
Clear language putting readers firstLiteracyNL
 
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
 
Lesson 11 TEXT MEDIA AND INFORMATION.pptx
Lesson 11 TEXT MEDIA AND INFORMATION.pptxLesson 11 TEXT MEDIA AND INFORMATION.pptx
Lesson 11 TEXT MEDIA AND INFORMATION.pptxRosebeltBantillo
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsMesaPublicLibrary
 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgFarisZainudin1
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdfssusercc3ff71
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs DesignRavi Bhadauria
 

Similar to Wd133 unit 4 module 1 learning about type fonts and properties[2] (20)

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
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
 
Typography
TypographyTypography
Typography
 
Wd131 unit 6 module 3 type as visual organizer
Wd131 unit 6 module 3 type as visual organizer Wd131 unit 6 module 3 type as visual organizer
Wd131 unit 6 module 3 type as visual organizer
 
Typography class 3
Typography class 3Typography class 3
Typography class 3
 
Multimedia Design Chapter 2
Multimedia Design Chapter 2Multimedia Design Chapter 2
Multimedia Design Chapter 2
 
Top Ten List
Top Ten ListTop Ten List
Top Ten List
 
Text
TextText
Text
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
Typography
TypographyTypography
Typography
 
Fund of design unit 6 module 3 type as visual organizer
Fund of design unit 6 module 3 type as visual organizer Fund of design unit 6 module 3 type as visual organizer
Fund of design unit 6 module 3 type as visual organizer
 
Clear language putting readers first
Clear language putting readers firstClear language putting readers first
Clear language putting readers first
 
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
 
Lesson 11 TEXT MEDIA AND INFORMATION.pptx
Lesson 11 TEXT MEDIA AND INFORMATION.pptxLesson 11 TEXT MEDIA AND INFORMATION.pptx
Lesson 11 TEXT MEDIA AND INFORMATION.pptx
 
Midterm review
Midterm reviewMidterm review
Midterm review
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design Basics
 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdg
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs Design
 

More from kateridrex

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)kateridrex
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)kateridrex
 
Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imagekateridrex
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imagekateridrex
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonskateridrex
 
Dig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphicsDig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphicskateridrex
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectskateridrex
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapeskateridrex
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolkateridrex
 
Dig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionsDig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionskateridrex
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelskateridrex
 
Dig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelsDig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelskateridrex
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filterskateridrex
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filterskateridrex
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping maskskateridrex
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layerskateridrex
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer maskskateridrex
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolskateridrex
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertieskateridrex
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textkateridrex
 

More from kateridrex (20)

Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)Dig imag unit 11 module 4 creating slices in an image (2)
Dig imag unit 11 module 4 creating slices in an image (2)
 
Dig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an imageDig imag unit 11 module 4(2) creating slices in an image
Dig imag unit 11 module 4(2) creating slices in an image
 
Dig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an imageDig imag unit 11 module 4 creating slices in an image
Dig imag unit 11 module 4 creating slices in an image
 
Dig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttonsDig imag unit 11 module 3 creating buttons
Dig imag unit 11 module 3 creating buttons
 
Dig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphicsDig imag unit 11 module 1 understanding web graphics
Dig imag unit 11 module 1 understanding web graphics
 
Dig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effectsDig imag unit 10 module 1 advanced type effects
Dig imag unit 10 module 1 advanced type effects
 
Dig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapesDig imag unit 9 module 2 modifying shapes
Dig imag unit 9 module 2 modifying shapes
 
Dig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen toolDig imag unit 9 module 1 working with the pen tool
Dig imag unit 9 module 1 working with the pen tool
 
Dig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color correctionsDig imag unit 8 module 3 making color corrections
Dig imag unit 8 module 3 making color corrections
 
Dig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channelsDig imag unit 8 module 2 creating and saving alpha channels
Dig imag unit 8 module 2 creating and saving alpha channels
 
Dig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channelsDig imag unit 8 module 1 understanding channels
Dig imag unit 8 module 1 understanding channels
 
Dig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filtersDig imag unit 7 module 2 adjusting filters
Dig imag unit 7 module 2 adjusting filters
 
Dig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filtersDig imag unit 7 module 1 understanding and implementing filters
Dig imag unit 7 module 1 understanding and implementing filters
 
Dig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masksDig imag unit 6 module 3 using clipping masks
Dig imag unit 6 module 3 using clipping masks
 
Dig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layersDig imag unit 6 module 2 using adjustment layers
Dig imag unit 6 module 2 using adjustment layers
 
Dig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masksDig imag unit 6 module 1 working with layer masks
Dig imag unit 6 module 1 working with layer masks
 
Dig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting toolsDig imag unit 5 module 2 using the various painting tools
Dig imag unit 5 module 2 using the various painting tools
 
Dig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and propertiesDig imag unit 5 module 1 learning about brush types and properties
Dig imag unit 5 module 1 learning about brush types and properties
 
Dig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path textDig imag unit 4 module 3 creating path text
Dig imag unit 4 module 3 creating path text
 

Wd133 unit 4 module 1 learning about type fonts and properties[2]

  • 1. WD133: Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties Type In order to create dynamic images that effectively communicate a message it is important for designers to understand some key terminology.
  • 2. Readability Readability is related to how the type is arranged. Readability is affected by point size, leading, line length, alignment, letter- spacing, and word-spacing. Paragraphs of text, similar to paragraphs in a textbook or a novel, are meant to be read for comprehension, and focus must be placed on readability. This emphasis ensures that the eyes do not tire and that the formatting of the copy does not distract a person from the meaning of the text. The color and texture of the type selected will also affect the readability and message conveyed. Display of red text on a black background is considered striking, eye- catching, and readable. White body copy on a black background can add contrast. However, the designer must watch out for strokes that are too thin. WD133: Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 3. Legibility Legibility refers to the typeface design. This element includes the size of the counters, the x-height, the size of ascenders and descenders, the character shape and angles, stroke contrast, serifs or the lack of serifs, and the weight. These features help distinguish one letter from another. A headline on a poster is meant to capture attention and immediately convey a feeling. Legibility, though necessary, is not always the highest priority. Script, calligraphic, and hand-written fonts are used in both display and body copy applications. Although they can convey elegance, formality, or individualist messaging, the legibility can be poor, and they can be difficult to read. WD133: Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 4. Leading The spacing between the lines of type is known as leading. This term relates to the times when type was set manually and thin strips of lead were placed between the rows to increase the spacing. Tight leading—10 point type size on 11 point leading, read as 10-on-11 and written as 10/11—is supposed to be more difficult to read. A 10/12 is more standard, but the ideal leading always depends on the typeface characteristics. Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 5. Kerning Spacing between two characters is known as kerning. Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 6. Tracking Spacing between all the characters in a line is known as tracking. If letters are too close, they are said to be set tight; if they are set too far apart, they are said to be open or loose. Many designers do not focus on proper and consistent character spacing, a clear message to the client that the designer is not experienced. Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 7. Justified Text Word spacing is a tool used when aligning text so that the beginning of a line and the end of the line align with the left and right column edges, respectively. This is known as justified text. Too much word spacing can lead to large, annoying word spaces that can lead to rivers. Rivers occur when the spaces between words line up top to bottom in a paragraph. More than three line ups in a row decreases readability because attention is drawn to the river that results instead of the reading process. Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties
  • 8. White Space White space is a term used to define the cramped or crowded look of a headline, paragraph of text, or an entire layout. Recall the saying “less is more.” Try to leave space on a page to create effect and emphasize the text. It also helps with the flow of the reader’s eye. A good test for white space is to turn the completed job upside down and look at the design at arms length. This move restricts the brain from reading the text and forces it to just look at the design elements and the weighting and positioning of each. Is the leading too small? Is the line length too long? Is the point size to big or too text-heavy? If the answer is in the affirmative for any of these questions, the white space may not be enough or the layout may be too packed. Digital Imaging Unit 4: Working with Type Module 1: Learning about Type Fonts and Properties