Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Typography for
[Digital] Humanists.
Friday, February 12, 2016
10am – 12pm
Fordham University
Amy Papaelias | @fontnerd
Ass...
The title for this presentation is inspired by:
Typography for Lawyers
Matthew Butterick
typographyforlawyers.com
And chec...
Today, we’ll focus on
a few things:
Typeface selection in digital projects
Very basic type rules
Web typography tools and ...
“ 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 weath...
[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)...
Google Fonts
open source; web / print;
range of quality
Adobe Edge Fonts
free, web only, limited library
Typekit
access th...
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 w...
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—y...
Thereactuallyisalotofnegativespaceonthisslide,butit’s
not being used very effectively. If you squint your eyes—
go ahead—y...
There actually is a lot of negative
space on this slide, but it’s not being
used very effectively.
If you squint your eyes...
There actually is a lot of negative
space on this slide, but it’s not being
used very effectively.
If you squint your eyes...
4.
the details:
Dashes and Ligatures and
Punctuation,
oh my!
Dashes: [Em] ­—, [En] –, [Hyphen] -
Ligatures: ffluffy
Punctuation:
“smart quotes ” ≠ ˝(inches)
apostrophe’s ≠ '(foot)
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 n...
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: typograph...
Typography for [Digital] Humanists
Typography for [Digital] Humanists
Typography for [Digital] Humanists
Typography for [Digital] Humanists
Upcoming SlideShare
Loading in …5
×

of

Typography for [Digital] Humanists Slide 1 Typography for [Digital] Humanists Slide 2 Typography for [Digital] Humanists Slide 3 Typography for [Digital] Humanists Slide 4 Typography for [Digital] Humanists Slide 5 Typography for [Digital] Humanists Slide 6 Typography for [Digital] Humanists Slide 7 Typography for [Digital] Humanists Slide 8 Typography for [Digital] Humanists Slide 9 Typography for [Digital] Humanists Slide 10 Typography for [Digital] Humanists Slide 11 Typography for [Digital] Humanists Slide 12 Typography for [Digital] Humanists Slide 13 Typography for [Digital] Humanists Slide 14 Typography for [Digital] Humanists Slide 15 Typography for [Digital] Humanists Slide 16 Typography for [Digital] Humanists Slide 17 Typography for [Digital] Humanists Slide 18 Typography for [Digital] Humanists Slide 19 Typography for [Digital] Humanists Slide 20 Typography for [Digital] Humanists Slide 21 Typography for [Digital] Humanists Slide 22 Typography for [Digital] Humanists Slide 23 Typography for [Digital] Humanists Slide 24 Typography for [Digital] Humanists Slide 25 Typography for [Digital] Humanists Slide 26 Typography for [Digital] Humanists Slide 27 Typography for [Digital] Humanists Slide 28 Typography for [Digital] Humanists Slide 29 Typography for [Digital] Humanists Slide 30 Typography for [Digital] Humanists Slide 31 Typography for [Digital] Humanists Slide 32 Typography for [Digital] Humanists Slide 33 Typography for [Digital] Humanists Slide 34 Typography for [Digital] Humanists Slide 35 Typography for [Digital] Humanists Slide 36 Typography for [Digital] Humanists Slide 37
Upcoming SlideShare
What Analytics Won't Tell You: Get Essential Insights for Content and Design
Next
Download to read offline and view in fullscreen.

228 Likes

Share

Download to read offline

Typography for [Digital] Humanists

Download to read offline

A typography workshop for NYC DH Week 2016. Based on previous presentations with some new information, references and more focus on web typography.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  5. 1. Use good fonts well.
  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
  9. http://squidspot.com/Periodic_Table_of_Typefaces.html
  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.
  20. 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. 4. the details: Dashes and Ligatures and Punctuation, oh my!
  22. Dashes: [Em] ­—, [En] –, [Hyphen] - Ligatures: ffluffy Punctuation: “smart quotes ” ≠ ˝(inches) apostrophe’s ≠ '(foot)
  23. 5. nerd out. Typographic resources abound.
  24. ON WEB TYPOGRAPHY BY JASON SANTA MARIA FONTSTAND PRACTICE.TYPEKIT.COM SMARTQUOTESFORSMARTPEOPLE.COM
  25. type.method.ac
  26. typeconnection.com
  27. Examples for discussion QUESTIONS TO ASK OURSELVES: How is hierarchy created? What feeling is the type conveying? How is negative space used?
  28. audubon.org
  29. warholinitiative.org
  30. gov.uk
  31. pilot.boston.gov
  32. A Brief Typography Exercise with Typecast.com
  33. 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
  • ToniHerrera1

    Nov. 25, 2021
  • muse5

    Nov. 5, 2021
  • AshleyPaxton3

    Aug. 23, 2021
  • SarahJayneBeale1

    Jul. 27, 2021
  • SharonMcClintic

    Mar. 17, 2021
  • SergioCremonesi

    Mar. 17, 2021
  • KunalDabhane

    Dec. 21, 2020
  • mohamedabdelazizm

    Nov. 18, 2020
  • rupantor

    Jul. 19, 2020
  • GHOSTGraphics

    Jul. 3, 2020
  • AriannaCruz7

    Mar. 23, 2020
  • viswanathanshanmugam6

    Feb. 20, 2020
  • LizBrown21

    Feb. 20, 2020
  • rianepearson

    Feb. 11, 2020
  • katafrakta

    Dec. 12, 2019
  • SergioGalletto

    Jul. 10, 2019
  • lattelis

    May. 23, 2019
  • JohnBWilson

    Feb. 12, 2019
  • ChrisJWiltshire

    Jan. 16, 2019
  • PhamDan8

    Jan. 16, 2019

A typography workshop for NYC DH Week 2016. Based on previous presentations with some new information, references and more focus on web typography.

Views

Total views

45,693

On Slideshare

0

From embeds

0

Number of embeds

1,541

Actions

Downloads

368

Shares

0

Comments

0

Likes

228

×