SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
Typography for
[Digital] Humanists.
Friday, February 12, 2016
10am – 12pm
Fordham University
Amy Papaelias | @fontnerd
Assistant Professor of Graphic Design, SUNY New Paltz
The title for this presentation is inspired by:
Typography for Lawyers
Matthew Butterick
typographyforlawyers.com
And check out this very worthy follow-up:
Butterick’s Practical Typography
practicaltypography
Today, we’ll focus on
a few things:
Typeface selection in digital projects
Very basic type rules
Web typography tools and resources
“ Typography is what
language looks like.”
	 — Ellen Lupton
“ Typography exists to
honor content.”
— Robert Bringhurst
1.
Use good fonts well.
How do I know
what is good?
Choose your type
like you choose
your outfit:
What’s the occassion?
What’s the feeling I want to portray?
What’s the weather like?
[some very basic] Type Classification:
Serif
Sans-serif
Monospace
Script
Decorative
http://squidspot.com/Periodic_Table_of_Typefaces.html
Source Sans
FREEreadability
1/2 designer, 1/2 developer
tech & coffee
3,256webstandards
Type Designer: Paul D. Hunt (2012) Foundry: Adobe
Google Fonts
open source; web / print;
range of quality
Adobe Edge Fonts
free, web only, limited library
Typekit
access through Creative
Cloud; web & print
(subscription)
2.
Contrast
[in size, weight and style]
creates hierarchy.
Something old,
something new,
something borrowed,
something blue.
Something Bigsomething small
SOMETHING BOLD
something italic.
type in digital projects: levels of hierarchy.
<h1>Headlines</h1>
<h3>This might be a subhead</h3>
<p>Body copy. Here we want to consider a comfortable
line length as well as leading (or line height in CSS).
Use a font with low stroke contrast (not a lot of thicks
and thins) and select sizes for comfortable reading.
Note: 12pt ≠ 12px.</p>
Button Button
Type is everywhere on screen! Don’t forget other elements such as
buttons, captions, navigation, etc.
3.
breathe in, breathe out:
Negative space gives visual pause.
Thereactuallyisalotofnegativespaceonthisslide,butit’s
not being used very effectively. If you squint your eyes—
go ahead—you can see the space between lines of text.
There’s not a lot of breathing room because the space be-
tween lines and words is too monotonous. Negative space
creates dynamic visual interest and makes a text more
readable.
Thereactuallyisalotofnegativespaceonthisslide,butit’s
not being used very effectively. If you squint your eyes—
go ahead—you can see the space between lines of text.
There’s not a lot of breathing room because the space be-
tween lines and words is too monotonous. Negative space
creates dynamic visual interest and makes a text more
readable.
There actually is a lot of negative
space on this slide, but it’s not being
used very effectively.
If you squint your eyes—go ahead—
you can see the space between lines
of text. There’s not a lot of breath-
ing room because the space between
lines and words is too monotonous.
Negative space creates dynamic
visual interest and makes a text
more readable.
Typography for [Digital] Humanists
There actually is a lot of negative
space on this slide, but it’s not being
used very effectively.
If you squint your eyes—go ahead—
you can see the space between lines
of text. There’s not a lot of breath-
ing room because the space between
lines and words is too monotonous.
Negative space creates dynamic
visual interest and makes a text
more readable.
4.
the details:
Dashes and Ligatures and
Punctuation,
oh my!
Dashes: [Em] ­—, [En] –, [Hyphen] -
Ligatures: ffluffy
Punctuation:
“smart quotes ” ≠ ˝(inches)
apostrophe’s ≠ '(foot)
Typography for [Digital] Humanists
Typography for [Digital] Humanists
Typography for [Digital] Humanists
5.
nerd out.
Typographic resources abound.
ON WEB TYPOGRAPHY BY JASON SANTA MARIA FONTSTAND
PRACTICE.TYPEKIT.COM SMARTQUOTESFORSMARTPEOPLE.COM
type.method.ac
typeconnection.com
Examples for discussion
QUESTIONS TO ASK OURSELVES:
How is hierarchy created?
What feeling is the type conveying?
How is negative space used?
audubon.org
warholinitiative.org
gov.uk
pilot.boston.gov
A Brief Typography
Exercise with Typecast.com
Some NYC type resources:
Type Directors Club of NY: tdc.org
Type@Cooper: coopertype.org
Typographics Conference: typographics.org
Type as Language SVA: typography.sva.edu
Grolier Club: grolierclub.org
Some beyond NYC type resources:
Typographica: typographica.org
I Love Typography: ilovetypography.com
Letterform Archive: letterformarchive.org
Alphabettes: alphabettes.org

Weitere ähnliche Inhalte

Was ist angesagt?

The Future of Everything
The Future of EverythingThe Future of Everything
The Future of EverythingCharbel Zeaiter
 
4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative TeamsWrike
 
Boring to Bold: Presentation Design Ideas for Non-Designers
Boring to Bold: Presentation Design Ideas for Non-DesignersBoring to Bold: Presentation Design Ideas for Non-Designers
Boring to Bold: Presentation Design Ideas for Non-DesignersMichael Gowin
 
Designing the Future: When Fact Meets Fiction
Designing the Future: When Fact Meets FictionDesigning the Future: When Fact Meets Fiction
Designing the Future: When Fact Meets FictionDean Johnson
 
10 Color Banner Design Inspiration
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design InspirationBannersnack
 
Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Ayman Sadiq
 
The Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatThe Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatVelocity Partners
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Stephen Anderson
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersJeroen van Geel
 
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screenJason Mesut
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersDigital Surgeons
 
17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to View17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to ViewJim MacLeod
 
10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work ForO.C. Tanner
 
25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Statscontently
 
How LinkedIn built a Community of Half a Billion
How LinkedIn built a Community of Half a BillionHow LinkedIn built a Community of Half a Billion
How LinkedIn built a Community of Half a BillionAatif Awan
 
Steal this presentation
Steal this presentationSteal this presentation
Steal this presentationScott Hoag
 

Was ist angesagt? (20)

The Future of Everything
The Future of EverythingThe Future of Everything
The Future of Everything
 
4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams4 Biggest Challenges for Creative Teams
4 Biggest Challenges for Creative Teams
 
Boring to Bold: Presentation Design Ideas for Non-Designers
Boring to Bold: Presentation Design Ideas for Non-DesignersBoring to Bold: Presentation Design Ideas for Non-Designers
Boring to Bold: Presentation Design Ideas for Non-Designers
 
Designing the Future: When Fact Meets Fiction
Designing the Future: When Fact Meets FictionDesigning the Future: When Fact Meets Fiction
Designing the Future: When Fact Meets Fiction
 
10 Color Banner Design Inspiration
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design Inspiration
 
Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!Things That Don't Matter in Your Presentation!
Things That Don't Matter in Your Presentation!
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 
100 Beautiful Slides from Cannes Lions 2010
100 Beautiful Slides from Cannes Lions 2010100 Beautiful Slides from Cannes Lions 2010
100 Beautiful Slides from Cannes Lions 2010
 
The Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatThe Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing great
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to others
 
How to Use Photography for Great Presentations
How to Use Photography for Great PresentationsHow to Use Photography for Great Presentations
How to Use Photography for Great Presentations
 
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screen
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More Customers
 
17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to View17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to View
 
10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For
 
Tbwa speech
Tbwa speechTbwa speech
Tbwa speech
 
25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats
 
How LinkedIn built a Community of Half a Billion
How LinkedIn built a Community of Half a BillionHow LinkedIn built a Community of Half a Billion
How LinkedIn built a Community of Half a Billion
 
Steal this presentation
Steal this presentationSteal this presentation
Steal this presentation
 

Ähnlich wie Typography for [Digital] Humanists

Type Matters: 5 Typographic Tips to Make Better Work
Type Matters: 5 Typographic Tips to Make Better WorkType Matters: 5 Typographic Tips to Make Better Work
Type Matters: 5 Typographic Tips to Make Better WorkAmy Papaelias
 
Rettig.interface designislanguagedesign
Rettig.interface designislanguagedesignRettig.interface designislanguagedesign
Rettig.interface designislanguagedesignMarc Rettig
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionalsJason Tham
 
Writing And Writing Analysis
Writing And Writing AnalysisWriting And Writing Analysis
Writing And Writing AnalysisStephanie Moore
 
Analytical Essay Outline
Analytical Essay OutlineAnalytical Essay Outline
Analytical Essay OutlineEssay Help .
 
Beyond Task Based Testing: Interviews and Personas
Beyond Task Based Testing: Interviews and PersonasBeyond Task Based Testing: Interviews and Personas
Beyond Task Based Testing: Interviews and PersonasJeff Wisniewski
 
Typography & WordPress - WordCamp Rochester 2016
Typography & WordPress - WordCamp Rochester 2016Typography & WordPress - WordCamp Rochester 2016
Typography & WordPress - WordCamp Rochester 2016AndyStaple
 
Typography & WordPress
Typography & WordPressTypography & WordPress
Typography & WordPressAndyStaple
 
Ielts Essay Telegraph
Ielts Essay   TelegraphIelts Essay   Telegraph
Ielts Essay TelegraphLisa Graves
 
Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015AndyStaple
 
Use Your Words: Content Strategy to Influence Behavior
Use Your Words: Content Strategy to Influence BehaviorUse Your Words: Content Strategy to Influence Behavior
Use Your Words: Content Strategy to Influence BehaviorLiz Danzico
 
PowerPoint Do's and Dont's
PowerPoint Do's and Dont'sPowerPoint Do's and Dont's
PowerPoint Do's and Dont'smeganturnham
 

Ähnlich wie Typography for [Digital] Humanists (20)

Type Matters: 5 Typographic Tips to Make Better Work
Type Matters: 5 Typographic Tips to Make Better WorkType Matters: 5 Typographic Tips to Make Better Work
Type Matters: 5 Typographic Tips to Make Better Work
 
Writing Technique And Sentence Structure
Writing Technique And Sentence StructureWriting Technique And Sentence Structure
Writing Technique And Sentence Structure
 
Rettig.interface designislanguagedesign
Rettig.interface designislanguagedesignRettig.interface designislanguagedesign
Rettig.interface designislanguagedesign
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionals
 
Writing And Writing Analysis
Writing And Writing AnalysisWriting And Writing Analysis
Writing And Writing Analysis
 
Essay On The Writing Process
Essay On The Writing ProcessEssay On The Writing Process
Essay On The Writing Process
 
Creative Writing Ocean
Creative Writing OceanCreative Writing Ocean
Creative Writing Ocean
 
Analytical Essay Outline
Analytical Essay OutlineAnalytical Essay Outline
Analytical Essay Outline
 
Analytical Essay Outline
Analytical Essay OutlineAnalytical Essay Outline
Analytical Essay Outline
 
Beyond Task Based Testing: Interviews and Personas
Beyond Task Based Testing: Interviews and PersonasBeyond Task Based Testing: Interviews and Personas
Beyond Task Based Testing: Interviews and Personas
 
Typography & WordPress - WordCamp Rochester 2016
Typography & WordPress - WordCamp Rochester 2016Typography & WordPress - WordCamp Rochester 2016
Typography & WordPress - WordCamp Rochester 2016
 
Essay Wrting
Essay WrtingEssay Wrting
Essay Wrting
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Typography & WordPress
Typography & WordPressTypography & WordPress
Typography & WordPress
 
My Writing Techniques
My Writing TechniquesMy Writing Techniques
My Writing Techniques
 
Ielts Essay Telegraph
Ielts Essay   TelegraphIelts Essay   Telegraph
Ielts Essay Telegraph
 
Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015
 
Separating The Writing Process
Separating The Writing ProcessSeparating The Writing Process
Separating The Writing Process
 
Use Your Words: Content Strategy to Influence Behavior
Use Your Words: Content Strategy to Influence BehaviorUse Your Words: Content Strategy to Influence Behavior
Use Your Words: Content Strategy to Influence Behavior
 
PowerPoint Do's and Dont's
PowerPoint Do's and Dont'sPowerPoint Do's and Dont's
PowerPoint Do's and Dont's
 

Kürzlich hochgeladen

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Kürzlich hochgeladen (18)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Typography for [Digital] Humanists

  • 1. Typography for [Digital] Humanists. Friday, February 12, 2016 10am – 12pm Fordham University Amy Papaelias | @fontnerd Assistant Professor of Graphic Design, SUNY New Paltz
  • 2. The title for this presentation is inspired by: Typography for Lawyers Matthew Butterick typographyforlawyers.com And check out this very worthy follow-up: Butterick’s Practical Typography practicaltypography
  • 3. Today, we’ll focus on a few things: Typeface selection in digital projects Very basic type rules Web typography tools and resources
  • 4. “ Typography is what language looks like.” — Ellen Lupton “ Typography exists to honor content.” — Robert Bringhurst
  • 6. How do I know what is good?
  • 7. Choose your type like you choose your outfit: What’s the occassion? What’s the feeling I want to portray? What’s the weather like?
  • 8. [some very basic] Type Classification: Serif Sans-serif Monospace Script Decorative
  • 10. Source Sans FREEreadability 1/2 designer, 1/2 developer tech & coffee 3,256webstandards Type Designer: Paul D. Hunt (2012) Foundry: Adobe
  • 11. Google Fonts open source; web / print; range of quality Adobe Edge Fonts free, web only, limited library Typekit access through Creative Cloud; web & print (subscription)
  • 12. 2. Contrast [in size, weight and style] creates hierarchy.
  • 13. Something old, something new, something borrowed, something blue.
  • 14. Something Bigsomething small SOMETHING BOLD something italic.
  • 15. type in digital projects: levels of hierarchy. <h1>Headlines</h1> <h3>This might be a subhead</h3> <p>Body copy. Here we want to consider a comfortable line length as well as leading (or line height in CSS). Use a font with low stroke contrast (not a lot of thicks and thins) and select sizes for comfortable reading. Note: 12pt ≠ 12px.</p> Button Button Type is everywhere on screen! Don’t forget other elements such as buttons, captions, navigation, etc.
  • 16. 3. breathe in, breathe out: Negative space gives visual pause.
  • 17. Thereactuallyisalotofnegativespaceonthisslide,butit’s not being used very effectively. If you squint your eyes— go ahead—you can see the space between lines of text. There’s not a lot of breathing room because the space be- tween lines and words is too monotonous. Negative space creates dynamic visual interest and makes a text more readable.
  • 18. Thereactuallyisalotofnegativespaceonthisslide,butit’s not being used very effectively. If you squint your eyes— go ahead—you can see the space between lines of text. There’s not a lot of breathing room because the space be- tween lines and words is too monotonous. Negative space creates dynamic visual interest and makes a text more readable.
  • 19. There actually is a lot of negative space on this slide, but it’s not being used very effectively. If you squint your eyes—go ahead— you can see the space between lines of text. There’s not a lot of breath- ing room because the space between lines and words is too monotonous. Negative space creates dynamic visual interest and makes a text more readable.
  • 21. There actually is a lot of negative space on this slide, but it’s not being used very effectively. If you squint your eyes—go ahead— you can see the space between lines of text. There’s not a lot of breath- ing room because the space between lines and words is too monotonous. Negative space creates dynamic visual interest and makes a text more readable.
  • 22. 4. the details: Dashes and Ligatures and Punctuation, oh my!
  • 23. Dashes: [Em] ­—, [En] –, [Hyphen] - Ligatures: ffluffy Punctuation: “smart quotes ” ≠ ˝(inches) apostrophe’s ≠ '(foot)
  • 28. ON WEB TYPOGRAPHY BY JASON SANTA MARIA FONTSTAND PRACTICE.TYPEKIT.COM SMARTQUOTESFORSMARTPEOPLE.COM
  • 31. Examples for discussion QUESTIONS TO ASK OURSELVES: How is hierarchy created? What feeling is the type conveying? How is negative space used?
  • 36. A Brief Typography Exercise with Typecast.com
  • 37. Some NYC type resources: Type Directors Club of NY: tdc.org Type@Cooper: coopertype.org Typographics Conference: typographics.org Type as Language SVA: typography.sva.edu Grolier Club: grolierclub.org Some beyond NYC type resources: Typographica: typographica.org I Love Typography: ilovetypography.com Letterform Archive: letterformarchive.org Alphabettes: alphabettes.org