SlideShare ist ein Scribd-Unternehmen logo
1 von 145
Downloaden Sie, um offline zu lesen
Server tuning
with terminal
Just my
Type
holy crap you guys you’re gonna
learn so much about typography today
Just My Type: Be the Typographer You Were Born to Be
Introductions9:00–9:15
Introductions9:00–9:15
What is typography for?9:15–10:00
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:00
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:00
11:00–11:15 Break
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:00
11:00–11:15 Break
11:15–11:45 Open critique
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:00
11:00–11:15 Break
11:15–11:45 Open critique
11:45–12:30 Understanding web typography
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:00
11:00–11:15 Break
11:15–11:45 Open critique
11:45–12:30 Understanding web typography
12:30–13:30 Lunch
Just My Type: Be the Typographer You Were Born to Be
13:30-13:45 A rundown of webfont services
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15:15 Coffee Break
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15:15 Coffee Break
15:15–16:00 An exercise: webfonts in action
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15:15 Coffee Break
15:15–16:00 An exercise: webfonts in action
16:00–16:50 Typecast, lettering.js, other tools,
and open time
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15:15 Coffee Break
15:15–16:00 An exercise: webfonts in action
16:00–16:50 Typecast, lettering.js, other tools,
and open time
16:50–17:00 Wrap-up, hugs, and fistbumps
Introductions
Who you are, where you work, what you do,
where you’re from, what you want to get out of today
mamp.info
What is typography for?
Just My Type: Be the Typographer You Were Born to Be
Typography exists to honor content.
Typography must often draw attention
to itself before it will be read. Yet in
order to be read, it must relinquish the
attention it has drawn.
What do you know about
typography on the web?
Understanding letters
Logos
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Guidelines for letters
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
The tops of letters are easier to read
than the bottoms.
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Mixed case is easier to read
than all caps.
looking at letterforms
differently
An exercise
dmall.me/ZnQgQMdmall.me/1aUUf9j
Letter
Letter
Raleway Heavy, 300pt
Letter
Raleway Heavy, 300pt
Lora Italic, 24pt
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Drawing type
An exercise
typographic
personality
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Stereotypes
Stereotype-ography
dmall.me/NFXpmz
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Partner up
An exercise
Character character
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Historical Context
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
dmall.me/182p67W
Foundry Stereotype-ography
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Type-inspired interfaces
dmall.me/15C57Zw
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Critiquing Type
theverge.com
tapmates.com
Just My Type: Be the Typographer You Were Born to Be
Open critique
breaktime
webfonts
The difference between
desktop fonts and webfonts
dmall.me/18VPP5V
Choosing webfonts
Hinting
dmall.me/1alFjCR
Just My Type: Be the Typographer You Were Born to Be
dmall.me/1aRJj1v
Just My Type: Be the Typographer You Were Born to Be
Comparing webfonts services by
on-screen rendering
dmall.me/18VQmVk
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Comparing rendering across browsers
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
implementing webfonts
Web-safe fonts vs. webfonts
SERIF
Georgia, Times New Roman,
Book Antiqua, Palatino
SANS-SERIF
Arial, Comic Sans, Geneva, Helvetica,
Impact, Lucida Sans, Tahoma,
Trebuchet MS, Verdana
Web-safe
h1 {
font-family: Georgia, ‘Times New Roman’, serif;
}
h1 {
font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
@font-face {
font-family: 'Sentinel';
src: url('sentinel.ttf');
}
h1 {
font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
dmall.me/13lvthx
@font-face {
font-family: 'Sentinel';
src: url('sentinel.eot?#iefix') format('embedded-
opentype'),
url('sentinel.woff') format('woff'),
url('sentinel.ttf') format('truetype'),
url('sentinel.svg#svgFontName') format('svg');
}
h1 {
font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
dmall.me/182z4Gg
myfonts.com
html5boilerplate.com
google.com/fonts
typekit.com
Movie titles
An exercise
annyas.com/screenshots
typecast.com
Thanks!
B u
@danielmall dan@danielmall.com

Weitere ähnliche Inhalte

Ähnlich wie Just My Type: Be the Typographer You Were Born to Be

Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark Ryan LaBouve
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...prologuitoedic
 
Hot Typography SMPS Pacific Regional Conference
Hot Typography SMPS Pacific Regional ConferenceHot Typography SMPS Pacific Regional Conference
Hot Typography SMPS Pacific Regional ConferenceDavid Lecours
 
The Art Of Typography
The Art Of TypographyThe Art Of Typography
The Art Of TypographySteven Cahill
 
Project 3 instructions
Project 3 instructionsProject 3 instructions
Project 3 instructionseMoney003
 
Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02F Blanco
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Pascal Klein
 
How to choose fonts for your website
How to choose fonts for your websiteHow to choose fonts for your website
How to choose fonts for your websiteBrand by Name
 
Typography on the web charla meetup valencia espanol
Typography on the web charla meetup valencia espanolTypography on the web charla meetup valencia espanol
Typography on the web charla meetup valencia espanolFernando Serer
 
Pre production final
Pre production finalPre production final
Pre production finalTom Batty
 
A Brief Guide to Good Typography.pdf
A Brief Guide to Good Typography.pdfA Brief Guide to Good Typography.pdf
A Brief Guide to Good Typography.pdfSophia Diaz
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 
The great state of design
The great state of designThe great state of design
The great state of designVera Kovaleva
 
Anatomy of Type - Introduction.pdf
Anatomy of Type - Introduction.pdfAnatomy of Type - Introduction.pdf
Anatomy of Type - Introduction.pdfRossMatthews19
 
all about typography interactivect.pdf
all about typography interactivect.pdfall about typography interactivect.pdf
all about typography interactivect.pdfjb00007
 
Style Manual for the Computer
Style Manual for the ComputerStyle Manual for the Computer
Style Manual for the ComputerJennifer S. Groff
 
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype City University London
 

Ähnlich wie Just My Type: Be the Typographer You Were Born to Be (20)

Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark
 
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
16. A Basic Introduction to Typography (Inglés) (Presentación) autor Northern...
 
Hot Typography SMPS Pacific Regional Conference
Hot Typography SMPS Pacific Regional ConferenceHot Typography SMPS Pacific Regional Conference
Hot Typography SMPS Pacific Regional Conference
 
The Art Of Typography
The Art Of TypographyThe Art Of Typography
The Art Of Typography
 
Typeface 2.pdf
Typeface 2.pdfTypeface 2.pdf
Typeface 2.pdf
 
Project 3 instructions
Project 3 instructionsProject 3 instructions
Project 3 instructions
 
Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
 
How to choose fonts for your website
How to choose fonts for your websiteHow to choose fonts for your website
How to choose fonts for your website
 
Typography on the web charla meetup valencia espanol
Typography on the web charla meetup valencia espanolTypography on the web charla meetup valencia espanol
Typography on the web charla meetup valencia espanol
 
Text
TextText
Text
 
Pre production final
Pre production finalPre production final
Pre production final
 
A Brief Guide to Good Typography.pdf
A Brief Guide to Good Typography.pdfA Brief Guide to Good Typography.pdf
A Brief Guide to Good Typography.pdf
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 
The great state of design
The great state of designThe great state of design
The great state of design
 
Anatomy of Type - Introduction.pdf
Anatomy of Type - Introduction.pdfAnatomy of Type - Introduction.pdf
Anatomy of Type - Introduction.pdf
 
Typography
TypographyTypography
Typography
 
all about typography interactivect.pdf
all about typography interactivect.pdfall about typography interactivect.pdf
all about typography interactivect.pdf
 
Style Manual for the Computer
Style Manual for the ComputerStyle Manual for the Computer
Style Manual for the Computer
 
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
 

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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
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
 
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
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 

Kürzlich hochgeladen (19)

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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
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
 
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...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 

Just My Type: Be the Typographer You Were Born to Be