The New Web Typography: Create a Visual Hierarchy with Responsive Web Design

✍ Scribed by Stephen Boss, Jason Cranford Teague

• Publisher: CRC Press
• Year: 2016
• Tongue: English
• Leaves: 257
• Category: Library

✦ Synopsis

With a vast selection of typefaces now available, there is no excuse for using boring typography in web design. The New Web Typography: Create a Visual Hierarchy with Responsive Web Design shows you how to implement web-safe fonts to create visually appealing and multi-browser-friendly websites while encouraging you to develop designs that express your own unique typographic voice.

This book discusses general principles for choosing typefaces for on-screen display and tips for creating a visual hierarchy that works on monitors, tablets, and smartphones. It shares some of the authors’ personal experiences to illustrate situations where one font would be more effective than another in giving readers an optimized experience that includes quick download times and an overall aesthetically pleasing presentation.

Since good typography is good web design, font selection is a critical aspect of web design. The New Web Typography is more than a simple overview of web typography. It provides practical advice and examples that help you make good decisions in choosing fonts for web design.

✦ Table of Contents

Cover......Page 1
Half Title......Page 2
Title Page......Page 4
Copyright Page......Page 5
Table of Contents......Page 6
Introduction What Is Good Typography......Page 8
1: Overview......Page 14
Choosing the Right Typeface......Page 17
Building a Fluid Font Stack......Page 19
2: Type Basics......Page 24
What is a Glyph?......Page 27
What is a Font?......Page 29
What is Web Typography?......Page 30
Bitmap vs. Vector......Page 32
Understanding Type on the Web......Page 38
Anatomy of a Character......Page 45
Typeface Variations......Page 51
Types of type: Display or Body......Page 54
Classifying Type for the Web......Page 55
Type Styles......Page 62
Character and Text Encoding On the Web......Page 65
OpenType......Page 68
3: Finding Fonts......Page 72
Solutions for Fonts on the Web......Page 75
Adding Fonts: the Font Stack......Page 78
Web-Safe Fonts......Page 80
Webfonts......Page 83
Firefox and the Cross-Domain Conundrum......Page 90
Installing Webfonts on Your Computer......Page 91
End User License Agreements and You......Page 92
Webfont Service Bureaus......Page 97
4: Choose Fonts......Page 104
Types of Type......Page 107
What Your Font Must Have......Page 113
Factors to Consider......Page 118
Combining Type......Page 123
Checklist for Choosing Type......Page 126
Interview with Nicole Arnett Phillips......Page 127
5: Style......Page 132
Consistency in Styles......Page 135
Styling Weight......Page 144
Styling Italic and Oblique Fonts......Page 146
Styling Color......Page 148
Type Effects......Page 151
Styling Text with Borders and Bacgrounds......Page 153
Style Checklist......Page 155
6: Scale......Page 158
Understanding Relative and Absolute Type Units......Page 161
Type Size and Line Height......Page 166
Horizontal Type Space......Page 169
Text Alignment......Page 174
7: Space......Page 180
Vertical Type Space......Page 183
8: Iconography......Page 192
When to Use Icons......Page 195
Choosing Icons......Page 196
Responsive Icons......Page 198
Using Webfont Icons......Page 200
Styling Webfont Icons......Page 203
Finding Webfont Icons or Make Your Own......Page 204
Icon Tags?......Page 205
9: Hierarchy......Page 208
Do Not Design by Default......Page 211
From Box to Grid......Page 215
Body Copy......Page 221
Navigation and Controls......Page 224
Guiding the Reader’s Eye......Page 225
Balancing Readability and Retention......Page 226
Contrasting Type......Page 227
Typography at Hand......Page 228
Layout Grids......Page 230
Afterword......Page 234
Appendices......Page 238
Appendix A......Page 240
Appendix B......Page 242
Appendix C......Page 247
Index......Page 250