The document is a presentation on beautiful web typography. It discusses various topics related to typography at the letter, text, and page levels. It addresses assumptions about web typography and options for setting fonts, including installed fonts, sIFR, Cufon, webfonts using EOT/EOT Lite, and services like Typekit. Concerns raised include non-standard solutions, proprietary requirements, and browser support issues. The goal is to educate about best practices for web typography.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard.
Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.
2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.
My web typography presentation at Web Directions South 2010, Sydney: Setting standards-friendly web type. The talk focused on the options currently available for setting type on the web with a strong focus on webfonts (part one) and a supplementary section on then styling the selected type (lots of micro-typography; part two). Enjoy. (:
Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard.
Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.
2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.
My web typography presentation at Web Directions South 2010, Sydney: Setting standards-friendly web type. The talk focused on the options currently available for setting type on the web with a strong focus on webfonts (part one) and a supplementary section on then styling the selected type (lots of micro-typography; part two). Enjoy. (:
Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
A very brief look at where certain aspects of typography on the web are today — specifically, methods for replacing OS defaults with other typefaces.
The slides are guides used for a quick (15-20 minute) talk at Refresh Lauderdale, rather than informational, with the exception of the references section at the end, which includes many great resources for typography in general, as well as for setting type on the web in all forms.
Chad Sellers of Useful Fruit Software presenting at Baltimore Cocoa on the Cocoa Text System. Video available at http://baltimorecocoa.com/post/1167471671/cocoa-text-system-video-slides
CSS3 is the latest standard for CSS.
CSS3 is completely new web technology and widely used by web designers,
This presentation teaches you about the new features in CSS3!
A very brief look at where certain aspects of typography on the web are today — specifically, methods for replacing OS defaults with other typefaces.
The slides are guides used for a quick (15-20 minute) talk at Refresh Lauderdale, rather than informational, with the exception of the references section at the end, which includes many great resources for typography in general, as well as for setting type on the web in all forms.
Chad Sellers of Useful Fruit Software presenting at Baltimore Cocoa on the Cocoa Text System. Video available at http://baltimorecocoa.com/post/1167471671/cocoa-text-system-video-slides
CSS3 is the latest standard for CSS.
CSS3 is completely new web technology and widely used by web designers,
This presentation teaches you about the new features in CSS3!
Christy Gurga (theMechanism) presents different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy covers advanced techniques that are applicable for front-end developers of any level.
You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headings and polish your typography with extra detail.
Solving the Challenges of Asian Web Fonts by Bill DavisMonotype
Solving the Challenges of Asian Web Fonts
Monotype’s Bill Davis was honored to give a presentation at the ATypI Hong Kong 2012 Conference titled “Solving the Challenges of Asian Web Fonts.” When he looked at the top 1000 websites, he found that 10 to 15 percent are already using Web fonts. But for East Asian languages and scripts, only a handful has started to deploy Web fonts. His AtypI presentation, provided here as a slideshare, examines the two primary challenges for developers of Asian websites: 1) Website design issues and 2) Asian Web font file sizes.
His experience with the broad range of language and script support available in Fonts.com Web Fonts service has allowed him to gain insights into early adoption of non-Latin and Asian Web fonts by Web designers and developers.
This slideshare reviews some of the main benefits of Web fonts, no matter the language or geographic market for your audience, are:
• Establish typographic consistency
• Improve user experience
• Eliminate the use of text as graphics, improve workflow
• Enhance SEO, accessibility
To learn more about Web fonts, check out Bill Davis’ Fonts.com blog at http://blog.fonts.com/contributors/bill-davis
For more information on Fonts.com Web Font Services, check out http://www.fonts.com/web-fonts
Web fonts offer great flexibility for brands and designers to use a wider range of fonts online.
Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.
This is an internal company presentation given at web design training seminar. It was about web typography and understanding the way type works within the web world.
Affordable Stationery Printing Services in Jaipur | Navpack n PrintNavpack & Print
Looking for professional printing services in Jaipur? Navpack n Print offers high-quality and affordable stationery printing for all your business needs. Stand out with custom stationery designs and fast turnaround times. Contact us today for a quote!
"𝑩𝑬𝑮𝑼𝑵 𝑾𝑰𝑻𝑯 𝑻𝑱 𝑰𝑺 𝑯𝑨𝑳𝑭 𝑫𝑶𝑵𝑬"
𝐓𝐉 𝐂𝐨𝐦𝐬 (𝐓𝐉 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬) is a professional event agency that includes experts in the event-organizing market in Vietnam, Korea, and ASEAN countries. We provide unlimited types of events from Music concerts, Fan meetings, and Culture festivals to Corporate events, Internal company events, Golf tournaments, MICE events, and Exhibitions.
𝐓𝐉 𝐂𝐨𝐦𝐬 provides unlimited package services including such as Event organizing, Event planning, Event production, Manpower, PR marketing, Design 2D/3D, VIP protocols, Interpreter agency, etc.
Sports events - Golf competitions/billiards competitions/company sports events: dynamic and challenging
⭐ 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐝 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬:
➢ 2024 BAEKHYUN [Lonsdaleite] IN HO CHI MINH
➢ SUPER JUNIOR-L.S.S. THE SHOW : Th3ee Guys in HO CHI MINH
➢FreenBecky 1st Fan Meeting in Vietnam
➢CHILDREN ART EXHIBITION 2024: BEYOND BARRIERS
➢ WOW K-Music Festival 2023
➢ Winner [CROSS] Tour in HCM
➢ Super Show 9 in HCM with Super Junior
➢ HCMC - Gyeongsangbuk-do Culture and Tourism Festival
➢ Korean Vietnam Partnership - Fair with LG
➢ Korean President visits Samsung Electronics R&D Center
➢ Vietnam Food Expo with Lotte Wellfood
"𝐄𝐯𝐞𝐫𝐲 𝐞𝐯𝐞𝐧𝐭 𝐢𝐬 𝐚 𝐬𝐭𝐨𝐫𝐲, 𝐚 𝐬𝐩𝐞𝐜𝐢𝐚𝐥 𝐣𝐨𝐮𝐫𝐧𝐞𝐲. 𝐖𝐞 𝐚𝐥𝐰𝐚𝐲𝐬 𝐛𝐞𝐥𝐢𝐞𝐯𝐞 𝐭𝐡𝐚𝐭 𝐬𝐡𝐨𝐫𝐭𝐥𝐲 𝐲𝐨𝐮 𝐰𝐢𝐥𝐥 𝐛𝐞 𝐚 𝐩𝐚𝐫𝐭 𝐨𝐟 𝐨𝐮𝐫 𝐬𝐭𝐨𝐫𝐢𝐞𝐬."
LA HUG - Video Testimonials with Chynna Morgan - June 2024Lital Barkan
Have you ever heard that user-generated content or video testimonials can take your brand to the next level? We will explore how you can effectively use video testimonials to leverage and boost your sales, content strategy, and increase your CRM data.🤯
We will dig deeper into:
1. How to capture video testimonials that convert from your audience 🎥
2. How to leverage your testimonials to boost your sales 💲
3. How you can capture more CRM data to understand your audience better through video testimonials. 📊
Building Your Employer Brand with Social MediaLuanWise
Presented at The Global HR Summit, 6th June 2024
In this keynote, Luan Wise will provide invaluable insights to elevate your employer brand on social media platforms including LinkedIn, Facebook, Instagram, X (formerly Twitter) and TikTok. You'll learn how compelling content can authentically showcase your company culture, values, and employee experiences to support your talent acquisition and retention objectives. Additionally, you'll understand the power of employee advocacy to amplify reach and engagement – helping to position your organization as an employer of choice in today's competitive talent landscape.
Digital Transformation and IT Strategy Toolkit and TemplatesAurelien Domont, MBA
This Digital Transformation and IT Strategy Toolkit was created by ex-McKinsey, Deloitte and BCG Management Consultants, after more than 5,000 hours of work. It is considered the world's best & most comprehensive Digital Transformation and IT Strategy Toolkit. It includes all the Frameworks, Best Practices & Templates required to successfully undertake the Digital Transformation of your organization and define a robust IT Strategy.
Editable Toolkit to help you reuse our content: 700 Powerpoint slides | 35 Excel sheets | 84 minutes of Video training
This PowerPoint presentation is only a small preview of our Toolkits. For more details, visit www.domontconsulting.com
Discover the innovative and creative projects that highlight my journey throu...dylandmeas
Discover the innovative and creative projects that highlight my journey through Full Sail University. Below, you’ll find a collection of my work showcasing my skills and expertise in digital marketing, event planning, and media production.
Recruiting in the Digital Age: A Social Media MasterclassLuanWise
In this masterclass, presented at the Global HR Summit on 5th June 2024, Luan Wise explored the essential features of social media platforms that support talent acquisition, including LinkedIn, Facebook, Instagram, X (formerly Twitter) and TikTok.
Cracking the Workplace Discipline Code Main.pptxWorkforce Group
Cultivating and maintaining discipline within teams is a critical differentiator for successful organisations.
Forward-thinking leaders and business managers understand the impact that discipline has on organisational success. A disciplined workforce operates with clarity, focus, and a shared understanding of expectations, ultimately driving better results, optimising productivity, and facilitating seamless collaboration.
Although discipline is not a one-size-fits-all approach, it can help create a work environment that encourages personal growth and accountability rather than solely relying on punitive measures.
In this deck, you will learn the significance of workplace discipline for organisational success. You’ll also learn
• Four (4) workplace discipline methods you should consider
• The best and most practical approach to implementing workplace discipline.
• Three (3) key tips to maintain a disciplined workplace.
12. Beautiful Web Typography
ty•pog•ra•phy | tīˈpägrəfē | •n
Typography is the art of creating and setting type
with the purpose of honoring the text it sets.
25. Beautiful Web Typography
Assumptions?
It sucks? It’s boring?
1. Limited to sans-serif only for readability?
26. Beautiful Web Typography
Assumptions?
It sucks? It’s boring?
1. Limited to sans-serif only for readability?
2. Only ‘web-safe’ fonts?
27. Beautiful Web Typography
Assumptions?
It sucks? It’s boring?
1. Limited to sans-serif only for readability?
2. Only ‘web-safe’ fonts?
3. Limited control—resort to Flash and other non-
standard technologies?
37. Beautiful Web Typography
0. Reset
All the browsers have their own default styling for
various (x)HTML elements. This makes it a pain for
cross-browser consistency.
38. Beautiful Web Typography
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in
put,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:
normal;font-weight:normal;}
ul,ol {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
Googling “CSS reset stylesheets” should land you
with numerous examples. This one above is from
the Yahoo! UI library.
55. Beautiful Web Typography
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
56. Beautiful Web Typography
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
1. one sets the body, the other the headings;
57. Beautiful Web Typography
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
1. one sets the body, the other the headings;
2. one sets primary content, the other UI controls.
58. Beautiful Web Typography
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sans serif face together. E.g.:
1. one sets the body, the other the headings;
2. one sets primary content, the other UI controls.
We do this with the font-family property.
65. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
66. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
67. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
4. webfonts: EOT /EOT Lite via @font-face
68. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
4. webfonts: EOT /EOT Lite via @font-face
5. webfonts: OT /TTF via @font-face
69. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
4. webfonts: EOT /EOT Lite via @font-face
5. webfonts: OT /TTF via @font-face
6. Typekit, Fontdeck, Kernest, et al.
70. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
4. webfonts: EOT /EOT Lite via @font-face
5. webfonts: OT /TTF via @font-face
6. Typekit, Fontdeck, Kernest, et al.
7. OpenType permissions extension?
71. Beautiful Web Typography
Options for setting fonts:
1. Installed fonts (mostly web-safe)
2. sIFR or other JS and Flash replacement
3. Cufón et al. (http://tinyurl.com/git-cufon)
4. webfonts: EOT /EOT Lite via @font-face
5. webfonts: OT /TTF via @font-face
6. Typekit, Fontdeck, Kernest, et al.
7. OpenType permissions extension?
8. .webfont proposal?
73. Beautiful Web Typography
. Installed or web-safe fonts
Simply call upon them directly in your font stack
declarations, e.g.:
74. Beautiful Web Typography
. Installed or web-safe fonts
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville,
Times,
'Times New Roman',
serif;
75. Beautiful Web Typography
. Installed or web-safe fonts
Simply call upon them directly in your font stack
declarations, e.g.:
font-family: Baskerville,
Times,
'Times New Roman',
serif;
font-family: 'Helvetica Neue',
Helvetica,
'Arial',
sans-serif;
80. Beautiful Web Typography
Font stacks:
• desired
• fallback
• generic (e.g. serif, sans-serif, monospace)
81. Beautiful Web Typography
. s et al.
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
82. Beautiful Web Typography
. s et al.
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Not a feasible solution long-term:
83. Beautiful Web Typography
. s et al.
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Not a feasible solution long-term:
1. does subsetting;
84. Beautiful Web Typography
. s et al.
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Not a feasible solution long-term:
1. does subsetting;
2. non-standard solution—relies on both Flash and JS ;
85. Beautiful Web Typography
. s et al.
Flash text replacement that in unison with JS
replaces type using type from a Flash file.
Not a feasible solution long-term:
1. does subsetting;
2. non-standard solution—relies on both Flash and JS ;
3. high page load time—not feasible for body copy.
86. Beautiful Web Typography
. Cufón & other implementations
These were the first JS -only implementations.
Cufón converts font paths to VML paths stored in
JSON , then rendering the font paths using JS .
87. Beautiful Web Typography
. Cufón & other implementations
These were the first JS -only implementations.
Cufón converts font paths to VML paths stored in
JSON , then rendering the font paths using JS .
Various thoughts and concerns:
88. Beautiful Web Typography
. Cufón & other implementations
These were the first JS -only implementations.
Cufón converts font paths to VML paths stored in
JSON , then rendering the font paths using JS .
Various thoughts and concerns:
1. not accessible but works in most browsers;
89. Beautiful Web Typography
. Cufón & other implementations
These were the first JS -only implementations.
Cufón converts font paths to VML paths stored in
JSON , then rendering the font paths using JS .
Various thoughts and concerns:
1. not accessible but works in most browsers;
2. type foundries are/were skeptical—not a ‘service’;
limited palette of typefaces;
90. Beautiful Web Typography
. Cufón & other implementations
These were the first JS -only implementations.
Cufón converts font paths to VML paths stored in
JSON , then rendering the font paths using JS .
Various thoughts and concerns:
1. not accessible but works in most browsers;
2. type foundries are/were skeptical—not a ‘service’;
limited palette of typefaces;
3. converter is often proprietary;
91. Beautiful Web Typography
. webfonts: / Lite
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF . Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
92. Beautiful Web Typography
. webfonts: / Lite
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF . Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Not feasible as-is currently:
93. Beautiful Web Typography
. webfonts: / Lite
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF . Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Not feasible as-is currently:
1. non-standard, proprietary solution;
94. Beautiful Web Typography
. webfonts: / Lite
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF . Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Not feasible as-is currently:
1. non-standard, proprietary solution;
2. requires a proprietary converter (WEFT ) to use;
95. Beautiful Web Typography
. webfonts: / Lite
Developed by Microsoft, Embedded OpenType
subsets, compresses, and encrypts OT and TTF . Can
be restricted a list of trusted roots. Uses webfonts.
Described as ‘DRM icing on an OpenType cake’.
Not feasible as-is currently:
1. non-standard, proprietary solution;
2. requires a proprietary converter (WEFT ) to use;
3. proposal rejected by W 3C & only supported by IE .
96. Beautiful Web Typography
. webfonts: /
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT /TTF file
which is downloaded and used to render the type.
97. Beautiful Web Typography
. webfonts: /
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT /TTF file
which is downloaded and used to render the type.
Feasible but:
98. Beautiful Web Typography
. webfonts: /
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT /TTF file
which is downloaded and used to render the type.
Feasible but:
1. OT /TTF files can easily be downloaded;
99. Beautiful Web Typography
. webfonts: /
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT /TTF file
which is downloaded and used to render the type.
Feasible but:
1. OT /TTF files can easily be downloaded;
2. supported in Safari 3.1+, Firefox 3.5+ (planned for
Opera 10 and Chrome 2.0 beta);
100. Beautiful Web Typography
. webfonts: /
Also uses webfonts CSS @font-face and links
directly via the src: declaration to an OT /TTF file
which is downloaded and used to render the type.
Feasible but:
1. OT /TTF files can easily be downloaded;
2. supported in Safari 3.1+, Firefox 3.5+ (planned for
Opera 10 and Chrome 2.0 beta);
3. subsetting or compression comes down to author.
101.
102.
103.
104. Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Generally foundry initiatives that are JS -based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
105. Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Generally foundry initiatives that are JS -based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Thoughts:
106. Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Generally foundry initiatives that are JS -based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Thoughts:
1. deemed ‘the solution’ (though still in-the-works);
107. Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Generally foundry initiatives that are JS -based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Thoughts:
1. deemed ‘the solution’ (though still in-the-works);
2. standards-based, good browser support, and easy;
108. Beautiful Web Typography
. Typekit, Fontdeck, Kernetst, et al.
Generally foundry initiatives that are JS -based
(though not exclusively) and hosted, paid
subscription models: select, pay, inject; done.
Thoughts:
1. deemed ‘the solution’ (though still in-the-works);
2. standards-based, good browser support, and easy;
3. subsetting and/or compression service-side.
113. Beautiful Web Typography
. OpenType permissions extension?
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
114. Beautiful Web Typography
. OpenType permissions extension?
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Thoughts:
115. Beautiful Web Typography
. OpenType permissions extension?
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Thoughts:
1. simple: no change in the OT format, no wrapper;
116. Beautiful Web Typography
. OpenType permissions extension?
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Thoughts:
1. simple: no change in the OT format, no wrapper;
2. standards-based, but no compression;
117. Beautiful Web Typography
. OpenType permissions extension?
Proposed by David Burlow from Font Bureau as a
simple permissions table extension for OpenType
with a perm tag.
Thoughts:
1. simple: no change in the OT format, no wrapper;
2. standards-based, but no compression;
3. reverse-engineer-able (just edit the XML );
118. Beautiful Web Typography
. .webfont proposal
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT , compressing the font and an
accompanying meta-data XML file. Uses webfonts.
119. Beautiful Web Typography
. .webfont proposal
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT , compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Considerations:
120. Beautiful Web Typography
. .webfont proposal
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT , compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Considerations:
1. compact, simple, elegant, easily standards-based;
121. Beautiful Web Typography
. .webfont proposal
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT , compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Considerations:
1. compact, simple, elegant, easily standards-based;
2. reverse-engineer-able; CORS in discussion;
122. Beautiful Web Typography
. .webfont proposal
Proposed by Tal Leming & Erik van Blokland as an
alternative to EOT , compressing the font and an
accompanying meta-data XML file. Uses webfonts.
Considerations:
1. compact, simple, elegant, easily standards-based;
2. reverse-engineer-able; CORS in discussion;
3. …but (surprisingly) gaining huge support from
type designers and foundries alike.
123. Beautiful Web Typography
<fontdata> name, file name, format
<creationdate> creation data stamp of font file
<vendor> vendor info; attr.: name, URL
<designer> designer info; attr.: name, URL , role
<license> license; attr.: URL , ID
<licenseename> name for the licensee of the font
<description> description for the font
<copyright> copyright for the font
<trademark> trademark for the font
<privatedata> additional arbitrary, private info.
127. Beautiful Web Typography
Meanwhile:
Webfonts aren’t the holy grail of web
typography problems…
“Typography is not picking a ‘cool’ font.”
– Jeff Cro
131. Beautiful Web Typography
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
132. Beautiful Web Typography
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
• font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
133. Beautiful Web Typography
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
• font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
• font-style controls… style. Accepts the descrip-
tive values (normal, italic, and oblique).
134. Beautiful Web Typography
Use a combination of families, styles, weights and
to breath some fresh air into your web type.
• font-weight controls weight and accepts
numerical and descriptive (e.g. normal) values.
• font-style controls… style. Accepts the descrip-
tive values (normal, italic, and oblique).
• font-variant controls case and accepts the
values normal and small-caps.
160. Beautiful Web Typography
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
161. Beautiful Web Typography
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
E.g. setting acronyms or numerical tabular data.
163. Beautiful Web Typography
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
164. Beautiful Web Typography
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et.
Vestibulum elit pellentesque; habitant orci tristique senectus et
4,962 malesuada fames ac turpis egestas HTML sit lectus.
165. Beautiful Web Typography
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow of the text:
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et.
Vestibulum elit pellentesque; habitant orci tristique senectus et
4,962 malesuada fames ac turpis egestas HTML sit lectus.
Lorem ipsum dolor sit amet, NASA consectetur adipiscing et.
Vestibulum elit pellentesque; habitant orci tristique senectus et
, malesuada fames ac turpis egestas HTML sit lectus.
167. Beautiful Web Typography
• letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
168. Beautiful Web Typography
• letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
Sadly no property for controlling figure variants—
hopes set for CSS 3. For now use Georgia which
(only) features hanging or ‘old-style’ figures.
170. Beautiful Web Typography
• font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
171. Beautiful Web Typography
• font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
Size font sizes relatively using ems or %.
172. Beautiful Web Typography
• font-size controls… font sizes. Takes numerical
and descriptive values. Most user agents
(browsers) set default value at 16px.
Size font sizes relatively using ems or %.
An em is a relative unit best to be thought of as a
box. It is relative to the point size of a specific
font (i.e. 1 em in a 12 point typeface is 12 point).
174. Beautiful Web Typography
Why?
• Some UA s don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
175. Beautiful Web Typography
Why?
• Some UA s don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
• JS -based text resize widgets ≠ text accessibility.
176. Beautiful Web Typography
Why?
• Some UA s don’t support font-resizing (Ctrl + +/-) or
page scaling when measurements are defined in
absolute terms.
• JS -based text resize widgets ≠ text accessibility.
• Many devices and many user agents—be careful in
making assumptions.
179. Beautiful Web Typography
Key: remember font sizes are inherited:
parents → children.
To calculate, find what one pixel is in ems and
then multiply by the desired font size (in pixels):
180. Beautiful Web Typography
Key: remember font sizes are inherited:
parents → children.
To calculate, find what one pixel is in ems and
then multiply by the desired font size (in pixels):
1 ÷ parent font-size × required pixel value
= em value
182. Beautiful Web Typography
.% trick
Simplify your calculations. Consider:
p { font-size: 80%; }
blockquote { font-size: 80%; }
183. Beautiful Web Typography
.% trick
Simplify your calculations. Consider:
p { font-size: 80%; }
blockquote { font-size: 80%; }
80% of 16px is 12.8px, so p and blockquote
elements will be that size, but what happens
when we put a p element inside a blockquote
element? The parent (blockquote) is 12.8px so the
p will be rendered at 80% of that: 10.42px.
184. Beautiful Web Typography
.% trick (cont’d)
In 2004 Richard Rutter wrote an article outlining a
trick he used to make these calculations simpler:
185. Beautiful Web Typography
.% trick (cont’d)
In 2004 Richard Rutter wrote an article outlining a
trick he used to make these calculations simpler:
• browsers have common default size of 16px; thus:
186. Beautiful Web Typography
.% trick (cont’d)
In 2004 Richard Rutter wrote an article outlining a
trick he used to make these calculations simpler:
• browsers have common default size of 16px; thus:
• set body to 62.5% and reset all to 10px; thus:
187. Beautiful Web Typography
.% trick (cont’d)
In 2004 Richard Rutter wrote an article outlining a
trick he used to make these calculations simpler:
• browsers have common default size of 16px; thus:
• set body to 62.5% and reset all to 10px; thus:
• from here calculations are simpler for direct
descendants of the body, e.g. 12px = 1.2em; 8px =
0.8em. Further nested elements are (still) relative.
189. Beautiful Web Typography
To find an element’s font size in absolute terms
(e.g. pixels) you can use the Firefox Web Develop
Extension, Information → Display Element
Information.
191. Beautiful Web Typography
Stick it to a scale
Don’t just arbitrarily set type; use a scale:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.
the “classic scale”
9, 10, 11,
another scale
24,12, 13, 14, 18, 36, 48, 64, 72, 96.
8, 13, 21, 34, 55,
scale based on the Fibonacci sequence
89.
193. Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
194. Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
…consectetuer adipiscing elit…
…adipiscing elit…
195. Beautiful Web Typography
At small sizes font-decoration: underline;
can render descender glyphs (g, j, p, q, y) difficult
to read: use border-bottom: 1px solid;
…consectetuer adipiscing elit…
…adipiscing elit…
…consectetuer adipiscing elit…
…adipiscing elit…
207. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
208. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
209. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
• Smartypants (PHP , Perl, & Movable Type);
210. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
• Smartypants (PHP , Perl, & Movable Type);
• Typogrify (Python/Django);
211. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
• Smartypants (PHP , Perl, & Movable Type);
• Typogrify (Python/Django);
• wp-typogrify (WordPress);
212. Beautiful Web Typography
Smartypants et al.
‘Doing something repetitive? Likely you’re doing it wrong.’
Smartypants et al. are scripts that translate plain
ASCII characters into “smart” typographic (x)HTML
entities (not just for punctuation).
• Smartypants (PHP , Perl, & Movable Type);
• Typogrify (Python/Django);
• wp-typogrify (WordPress);
• Markdown et al., …
219. Beautiful Web Typography
Marking paragraphs
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
220. Beautiful Web Typography
Marking paragraphs
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
…or a combination thereof.
221. Beautiful Web Typography
Marking paragraphs
Don’t be afraid to mark new paragraphs with
indents, outdents, a plain white-line, a pilcrow (¶)
or other ornament, versal and/or headers…
…or a combination thereof.
See: http://tinyurl.com/para-typography.
222. Beautiful Web Typography
Measures
The measure is the length of a single line. It is
important to select a good measure for running
text. Do this with the width property.
223. Beautiful Web Typography
Measures
The measure is the length of a single line. It is
important to select a good measure for running
text. Do this with the width property.
Ideally these should be relative to the font size,
such that the type scales proportionately to the
measure; use ems or percentages.
225. Beautiful Web Typography
Measures (cont’d)
Web type generally benefits from smaller
measures than those in print. A good ballpark is
10–15 words/75–100 characters per line for body
copy, single column.
226. Beautiful Web Typography
Measures (cont’d)
Web type generally benefits from smaller
measures than those in print. A good ballpark is
10–15 words/75–100 characters per line for body
copy, single column.
Generally use flush-left (text-align: left;) for
running text, particularly when set in a narrow
measure. Justification can work at ample
measures and better with serif typefaces.
228. Beautiful Web Typography
Leading (line-height)
Don’t forget to set an ample leading for running
text! Done using the line-height property and
you can use a unit-less number (e.g. 1.5 which
acts as a multiplier of the font size);
229. Beautiful Web Typography
Leading (line-height)
Don’t forget to set an ample leading for running
text! Done using the line-height property and
you can use a unit-less number (e.g. 1.5 which
acts as a multiplier of the font size);
Leading spans from baseline to baseline… and I
need some more text to illustrate the point. :)
230. Beautiful Web Typography
Hanging punctuation
Traditionally punctuation marks, bullets, lists,
hyphens, and brackets all hang in the margin.
231. Beautiful Web Typography
Hanging punctuation
Traditionally punctuation marks, bullets, lists,
hyphens, and brackets all hang in the margin.
“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio.
Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie et
imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam
(at turpis non massa rhoncus sodales.)”
232. Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
233. Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
Possible for opening punctuation marks using
background-image or a negative text-indent.
CSS 3
will hopefully support hanging punctuation
with a proposed hanging-punctuation property.
234. Beautiful Web Typography
Hanging punctuation (cont’d)
Simply with lists by setting their margins to zero.
Possible for opening punctuation marks using
background-image or a negative text-indent.
CSS 3
will hopefully support hanging punctuation
with a proposed hanging-punctuation property.
See: http://tinyurl.com/w3c-hanging-punct.
235. Beautiful Web Typography
Web: text = UI
Distinguish content elements from application
controls (e.g. a user’s username and description
from a logout link or text-field title).
236. Beautiful Web Typography
Web: text = UI
Distinguish content elements from application
controls (e.g. a user’s username and description
from a logout link or text-field title).
Often done with colour (e.g. setting controls
gray), size (making them smaller) and typefaces.
241. Beautiful Web Typography
Page (grid).
Grids bring order to your page and help specify
where things should go.
242. Beautiful Web Typography
Page (grid).
Grids bring order to your page and help specify
where things should go.
Remember to put in apt “gutters” (margins
between columns) to separate your columns.
243. Beautiful Web Typography
Page (grid).
Grids bring order to your page and help specify
where things should go.
Remember to put in apt “gutters” (margins
between columns) to separate your columns.
Ruler guides help enormously: use the Web
Developer extension for Firefox or ruler
background images (also see the YUI library).