Design ~ Typography Typography 101 Using Typography to Enhance Content.
Post on 10-Dec-2015
285 Views
Preview:
Transcript
Design ~ Typography
Typography 101
Using Typography
to Enhance Content
Design ~ Typography Designing with Type
Classifications and fonts:
R R R RSERIF
>Helvetica >Brush >Papyrus
SANS SERIF
>Times
SCRIPT DECORATIVE
Design ~ Typography Designing with Type
R R R RTHE FACES OF HELVETICA
>Thin >Roman >Bold>Italic
Styles:
Design ~ Typography Designing with Type
Typographic anatomy:
TYPE IS MEASURED IN POINTS
TypographyPOINT
SIZE
ASCENDER
DESCENDER
X-HEIGHT
Design ~ Typography Designing with Type
Alignment:~ Justified
This text block demonstrates justified text. The margins on the left and right are even so it is called justified. Text is often justified.
~ Align Center
This text block demonstrates align center. Each line of this text block is centered. Align center is often used for headlines.
~ Align Left
This text block demonstrates align left. The left margin is aligned, but the right margin is ragged, creating a more open look.
~ Align Right
This text block demonstrates align right. The right margin is aligned,
but the left margin is ragged. This isn’t suggested for lengthy text.
Design ~ Typography Designing with Type
Case:
This is a headline
this is a headline
THIS IS A HEADLINE
THIS IS A HEADLINE
~ Normal/Sentence Style
~ Lowercase
~ All-Caps
~ Small-Caps
Design ~ Typography
Designing with Type
Typographic sizes:> primary headlines: 30 to 200+ point
> secondary headlines: 12 to 18 point
> stories: 10 point
> secondary stories/quotes: 10 to 12 point, but varies
> captions: 8 point
> folios: 10 point or larger, depending on the
treatment
Design ~ Typography Designing with Type
Typographic tips:~ establish a hierarchy of sizes from large to small
~ resist the urge to use a lot of fonts; vary weight, case
and color to create different looks
~ combine two contrasting fonts [serif and sans serif]
~ readers should notice the words not the lettering
itself
Design ~ Typography
TYPE | typography
GALLERY // combining different types for effect
Design ~ Typography
TYPE | typography
GALLERY // Type faces are similar; sizes and spacing differ
Design ~ Typography
TYPE | typography
GALLERY // Outlined font and bold; all caps
Design ~ Typography
TYPE | typography
GALLERY // Different sizes; same font
Design ~ Typography
TYPE | typography
GALLERY // Font as a design element
Design ~ Typography
TYPE | typography
GALLERY // Strong font statement goes with photo
Design ~ Typography
TYPE | typography
GALLERY // Photos in font
Design ~ Typography
TYPE | typography
GALLERY // Font integrated into the design
Design ~ Typography
TYPE | typography
GALLERY // Font goes with what it says; “Style Defined”
Design ~ Typography
TYPE | typography
GALLERY // Font with photo
Design ~ Typography
TYPE | typography
GALLERY //Fancy font stands out with the squares and clean lines
Design ~ Typography
TYPE | typography
GALLERY // Font numbers make the quick reads stand out;
differing sizes
Design ~ Typography
TYPE | typography
GALLERY // Font design element
Design ~ Typography
TYPE | typography
GALLERY // Font makes quick reads stand out
Design ~ Typography
TYPE | typography
GALLERY // Font use defines the spaces for the quick reads
Design ~ Typography
TYPE | typography
GALLERY // Use of lower case letters and strong number font
Design ~ Typography
TYPE | typography
GALLERY // Font as a design tool; graphic
Design ~ Typography
TYPE | typography
GALLERY // Drop cap and side bar with strong complementary fonts
Design ~ Typography
TYPE | typography
GALLERY // Using fonts and type to define the space
Design ~ Typography
TYPE | typography
GALLERY // Contrasting fonts; headline treatment
Design ~ Typography
TYPE | typography
GALLERY // Silhouetted font behind headline
Design ~ Typography Tips for Choosing Type
When Using Script Never:
• use all caps
• mix two styles of script together on a page
Design ~ Typography
Tips for Choosing Type
Contrast your type.
Six ways to
do so:
•Size
•Weight
•Structure
•Form
•Direction
•Color
Design ~ Typography Tips for Choosing Type
• There must be an exaggerated difference, or it won’t appear to contrast
• Spacial contrast also works – little type in a large area of space
• If type elements must be included, but they are not important, shrink them
• Using upper/lower case words over all caps allows for more contrast in size
• Unusually large letters or symbols work well as graphic elements
Design ~ Typography Tips for Choosing Type
• Weight refers to the thickness of the stroke
• Be bold, don’t stop at a small or medium difference in weight, go for it!
• If you are combining different families, emphasize the weight difference
• Use weight differences for aesthetic purposes and for organization
Design ~ Typography Tips for Choosing Type
• Each category of type is founded on differences in structure
• If you are using two families of type, use two completely different structures
• Avoid setting two types from the same category, especially sans serif mono weights.
• Easy way to pick contrasting structure is to pick one serif and one sans serif and then emphasize contrasting weight and/or size
Design ~ Typography Tips for Choosing Type
• Form refers to a letter’s shape
• All capped words are different in form but are also more difficult to read
• Italic vs. Roman is another contrast of form
• Use the true italic form over oblique form if it is available for more contrast
• Since script fonts and italic forms are similar in many respects, never, never, never combine two script fonts, two italics, or a script and an italic
Design ~ Typography
Tips for Choosing Type
• Direction is the direction that an element of type of a body of type creates, for example, a line of type has a horizontal direction, a column of type has a vertical direction, and so on
• Sometimes a strong redirection of type (for example up the side of a page) creates impact
Design ~ Typography
TYPE | typography
GALLERY // Headline design uses direction
Design ~ Typography Tips for Choosing Type
• On a color page, color contrasts refer to differences in color for emphasis
• Warm colors come forward, cool colors recede• On a black and white page, color refers to values of
gray obtained by tinting letters with percentages of black.
• Or, it refers to the shade of gray a large body of text creates because of the type’s structure, form, spacing between letters and lines, and size of the type
Design ~ Typography
TYPE | typography
GALLERY // Contrasting color makes the words stand out
Design ~ Typography Tips for Choosing Type
• Don’t just choose the default font
• Think about a font that matches your theme
• Then choose a contrasting font
• Play with your design to make the type stand out
• Have fun!
top related