Content precedes design. Design in the absence of content is not design, it’s decoration.
—Jeffrey Zeldman, designer, writer, and publisher
The Web is 90% text, so let’s style it first.
—Jeremy Thomas, CSS guru and author of MarkSheet
Choosing a typeface is not typography.
iA, digital design and product agency
Brief
Design a modern day type specimen single-page website for a not so modern web safe font, make it “cool” again, and showcase that accessible type, color, and layout is not only cool, but a best practice for inclusive and responsible web design.
[ ] Select a web safe font; show off its styles and weights: italic, normal, and bold; transform its cases: upper, lower, and even small-caps; change its size: 1em to 10em, smaller to larger; and even a swash such as a drop capital or an ornamental character such as an ampersand.
[ ] Focus on typographic color: style, weight, size, and spacing, before reversed type, foreground and background color. Let the type talk first, then enhance by layering on accessible color to better communicate an aesthetic or emotion for color blind, low vision, and sighted users alike.
Web Safe Fonts
Select from the safest, most widely supported system fonts on Mac and Win, of the web safe fonts.
Serif
[x] Georgia
Matthew Carter, Microsoft, 1993
Times New Roman
Stanley Morrison, The Times, 1931
Sans-serif
Arial
Robin Nicholas and Patricia Saunders, IBM, 1982
Arial Black
Robin Nicholas and Patricia Saunders, IBM, 1982
Tahoma
Matthew Carter, Microsoft, 1994
Trebuchet MS
Vincent Connare, Microsoft, 1996
Verdana
Matthew Carter, Microsoft, 1996
Monospace
Courier
Howard “Bud” Kettler, IBM, 1955
Courier New
Redrawn by Adrian Frutiger, IBM, 1961
Readings & Resources
[ ] → The Myth of web-safe fonts
CSS Font Stack (gte 90% support on both Mac & Win)
CSS Web Safe Fonts
On Typography
[ ] → A Five Minutes Guide to Better Typography
[ ] → How Typeface Influences the Way We Read and Think
[ ]→ Typefaces for Dyslexia
Type Specimens
[ ] → Type Specimens (Curated from around the web)
Daily Type Specimen
Channel Verdana
Alma Mono
Tofino
Courier Prime
Untitled Serif
The Inter UI font family
Lehigh: A typeface by the LostType Co-op
Moriston
Source Han Serif: An open source Pan-CJK typeface
Tilda: A script typeface Jessica Hische
Type Terminology
Type Terms
Trebuchet MS
The Brief Story of Trebuchet MS
Microsoft's In-Depth Story of Trebuchet MS
Matthew Carter
[ ] → Typographically Speaking: A Conversation with Matthew Carter video
[ ] → Matthew Carter: My Life in Typefaces video
Interview with Matthew Carter
Web Safe Colors & Contrast
[ ] → Web Safe Colors
[ ] → What is Color Contrast?
[ ] → Accessible Colors
[ ] → Color Safe
Colour Contrast Analyser
Color Accessibility Workflows
lopezvictoria
commented
7 years ago
Content First
Content precedes design. Design in the absence of content is not design, it’s decoration.
—Jeffrey Zeldman, designer, writer, and publisher The Web is 90% text, so let’s style it first.
—Jeremy Thomas, CSS guru and author of MarkSheet Choosing a typeface is not typography.
iA, digital design and product agency Brief
Design a modern day type specimen single-page website for a not so modern web safe font, make it “cool” again, and showcase that accessible type, color, and layout is not only cool, but a best practice for inclusive and responsible web design.
[ ] Select a web safe font; show off its styles and weights: italic, normal, and bold; transform its cases: upper, lower, and even small-caps; change its size: 1em to 10em, smaller to larger; and even a swash such as a drop capital or an ornamental character such as an ampersand.
[ ] Focus on typographic color: style, weight, size, and spacing, before reversed type, foreground and background color. Let the type talk first, then enhance by layering on accessible color to better communicate an aesthetic or emotion for color blind, low vision, and sighted users alike.
Web Safe Fonts
Select from the safest, most widely supported system fonts on Mac and Win, of the web safe fonts.
Serif
Arial Robin Nicholas and Patricia Saunders, IBM, 1982 Arial Black Robin Nicholas and Patricia Saunders, IBM, 1982 Tahoma Matthew Carter, Microsoft, 1994 Trebuchet MS Vincent Connare, Microsoft, 1996 Verdana Matthew Carter, Microsoft, 1996 Monospace
Courier Howard “Bud” Kettler, IBM, 1955 Courier New Redrawn by Adrian Frutiger, IBM, 1961 Readings & Resources
Note: Prefixed [ ] → links are required reading (or viewing). #readme
Web Safe Fonts
[ ] → The Myth of web-safe fonts CSS Font Stack (gte 90% support on both Mac & Win) CSS Web Safe Fonts On Typography
[ ] → A Five Minutes Guide to Better Typography
[ ] → How Typeface Influences the Way We Read and Think
[ ]→ Typefaces for Dyslexia Type Specimens
[ ] → Type Specimens (Curated from around the web) Daily Type Specimen Channel Verdana Alma Mono Tofino Courier Prime Untitled Serif The Inter UI font family Lehigh: A typeface by the LostType Co-op Moriston Source Han Serif: An open source Pan-CJK typeface Tilda: A script typeface Jessica Hische Type Terminology
Type Terms Trebuchet MS
The Brief Story of Trebuchet MS Microsoft's In-Depth Story of Trebuchet MS Matthew Carter
[ ] → Typographically Speaking: A Conversation with Matthew Carter video
[ ] → Matthew Carter: My Life in Typefaces video Interview with Matthew Carter Web Safe Colors & Contrast
[ ] → Web Safe Colors
[ ] → What is Color Contrast?
[ ] → Accessible Colors
[ ] → Color Safe Colour Contrast Analyser Color Accessibility Workflows