Web Typography How We Read Our eyes move across a line of text and move information to our brains Filter words into context Depending on where you read it experience is different How We Read Just because its legible doesnt mean its readable ID: 558560
Download Presentation The PPT/PDF document "ATLAS 2200 - WEB" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
ATLAS 2200 - WEB
Web TypographySlide2
How We Read
Our eyes move across a line of text and move information to our brains
Filter words into context
Depending on where you read it, experience is differentSlide3
How We Read
Just because its legible doesn’t mean it’s readable
TL;DR
Length isn’t the only detractor
Sure, you can read it, but do you
want
to?Slide4
How We Read
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG AND GRUMPY WIZARDS MAKE TOXIC BREW FOR THE EVIL QUEEN AND JACK.
The quick brown fox jumped over the lazy dog and grumpy wizards make toxic brew for the evil queen and jack.Slide5
Readability
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG AND GRUMPY WIZARDS MAKE TOXIC BREW FOR THE EVIL QUEEN AND JACK.
The quick brown fox jumped over the lazy dog and grumpy wizards make toxic brew for the evil queen and jack.Slide6
Shape Recognition
Simplicity
SIMPLICITYSlide7
Typography in Our Lives
The are no rules for typography
Type is everywhere: Our phones, New papers, books, magazines, billboards, ads, fliers, stickers, computers, games, television, etc.
Good typography is still rare, why?
Too many options?Slide8
The Unseen
Good typography shouldn’t be noticedSlide9
Typeface vs. Font?
Helvetica
Helvetica.ttfSlide10
For the Web
System Fonts (Web Safe Fonts)
Sans-serif
Arial, Calibri, Helvetica, Verdana
Serif
Times New Roman, Georgia, Lucida, Cambria
Monospace
Courier New, Lucida Sans Typewriter
Fantasy
Impact, Copper Plate, Papyrus (Don’t use unless your building a website for a Yoga Studio)
Cursive
Brush Script
Std
, Comic Sans (Don’t use unless you want to fail the class)Slide11
Serif
Times New RomanSlide12
Sans-Serif
Arial TypefaceSlide13
Monospace
Courier New
Courier NewSlide14
Fantasy
Impact
PapyrusSlide15
Cursive
Brush Script
Comic Sans
(Seriously… don’t use this font…)Slide16
Font-Family
body{
font-family:
helvetica
,
arial
, sans-serif;
}
Pros:
No
licensing
Easy
to use
Cons:
Limited
choices
Fonts
must be installed on users computer
User
control over your designSlide17
Contrast
Helvetica
Bodoni
Higher contrast fonts tend to be better suited for short lengths of text because they can be burdensome to read in longer spans…Slide18
WeightSlide19
Weight
body{
font-family:helvetica
,
arial
, sans-serif;
font-weight:800;
}
Not all typefaces have every weight option availableSlide20
Variant Styles
Bodoni Condensed
Bodoni BlackSlide21
Variant Styles
Bodoni Condensed
Bodoni BlackSlide22
Font Size
Point
8
9
10
11
12
14
18
24
36
48
60
72Slide23
Font Size
1 point = 1/72in.
Default Browser Font Size: 16px
Pixel sizes?
Slight differences vs.
pt
Pixel values don’t scale wellSlide24
EMs
.75em = 75% =
figcaption
1em = Default browser font size = p, body
1.5em = 150% = h2
2em = 200% = h1Slide25
@Font-Face
@font-face
{
font-family
:
myUniqueFont
;
src
:
url
(fonts/myFontFile.ttf);
}
body{
font-family:
myUniqueFont
;
}Slide26
@Font-Face
Pros:
Unique
fonts in normal text state
Easy
to set up at a base level
No
JavaScript needed
Cons:
Different
browsers only support certain font types
Potential
copyright implicationsSlide27
@Font-Face
Font-Squirrel: http
://
www.fontsquirrel.com/fontface/generatorSlide28
Font Services & Subscriptions
Google Fonts
Adobe
TypekitSlide29
Font Services & Subscriptions
Pros:
Unique
fonts in normal text state
Easy
to set up
No
risk of copyright infringement
Cons:
If
the service goes down, fonts will not work
$$$Slide30
Font Pairing
Text for a moment
Text for awhileSlide31
Attendance Question: Week 4
Compare two real-world examples of products, services, brands, entertainment media, etc. that compete within the same market yet one uses typography successfully while the other does not. Does this stronger use of typography benefit the executor over their competition? How so? Provide URL
examples if you can.
Post your question to Edmodo under “Lecture Attendance Question Week
4”
Your answer should be approximately one paragraph in length.