SlideShare una empresa de Scribd logo
1 de 145
Descargar para leer sin conexión
Server tuning
with terminal
Just my
Type
holy crap you guys you’re gonna
learn so much about typography today
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
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?
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
Guidelines for letters
The tops of letters are easier to read
than the bottoms.
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
Drawing type
An exercise
typographic
personality
Stereotypes
Stereotype-ography
dmall.me/NFXpmz
Partner up
An exercise
Character character
Historical Context
dmall.me/182p67W
Foundry Stereotype-ography
Type-inspired interfaces
dmall.me/15C57Zw
Critiquing Type
theverge.com
tapmates.com
Open critique
breaktime
webfonts
The difference between
desktop fonts and webfonts
dmall.me/18VPP5V
Choosing webfonts
Hinting
dmall.me/1alFjCR
dmall.me/1aRJj1v
Comparing webfonts services by
on-screen rendering
dmall.me/18VQmVk
Comparing rendering across browsers
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

Más contenido relacionado

Similar a 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
 
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
 
Corporate Presentation Pack.pptx
Corporate Presentation Pack.pptxCorporate Presentation Pack.pptx
Corporate Presentation Pack.pptxAzisSuban
 

Similar a 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
 
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
 
Corporate Presentation Pack.pptx
Corporate Presentation Pack.pptxCorporate Presentation Pack.pptx
Corporate Presentation Pack.pptx
 

Último

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一Fi L
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...Amil baba
 
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`dajasot375
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricksabhishekparmar618
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 

Último (20)

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
 
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 

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