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

257 Pages·2016·35.815 MB·English

by  Stephen Boss, Jason Cranford Teague

THE
NEW WEB TYPOGRAPHY
CREATE A VISUAL HIERARCHY WITH RESPONSIVE WEB DESIGN

THE
THE
NEW WEB TYPOGRAPHY
NEW WEB TYPOGRAPHY
CREATE A VISUAL HIERARCHY WITH RESPONSIVE WEB DESIGN
A WEB PROFESSIONAL’S HANDBOOK TO CREATING VISUAL HIERARCHY
STEPHEN BOSS
JASON CRANFORD TEAGUE
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2017 by Taylor & Francis Group, LLC
CRC Press is an imprint of Taylor & Francis Group, an Informa business
No claim to original U.S. Government works
Printed on acid-free paper
Version Date: 20160519
International Standard Book Number-13: 978-1-138-78139-9 (Paperback)
This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable data and
information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and
publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission
to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any
future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic,
mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or
retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, please access www.copyright.com (http://www.copyright.com/) or contact
the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit organization that provides
licenses and registration for a variety of users. For organizations that have been granted a photocopy license by the CCC, a separate system of payment
has been arranged.
Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation
without intent to infringe.
Visit the Taylor & Francis Web site at
http://www.taylorandfrancis.com
and the CRC Press Web site at
http://www.crcpress.com
TABLE OF CONTENTS
Introduction What Is Good Typography VII
1 Overview 1
Choosing the Right Typeface 4
Building a Fluid Font Stack 6
2 Type Basics 11
What is a Glyph? 14
What is a Font? 16
What is Web Typography? 17
Bitmap vs. Vector 19
Understanding Type on the Web 25
Anatomy of a Character 32
Typeface Variations 38
Types of type: Display or Body 41
Classifying Type for the Web 42
Type Styles 49
Character and Text Encoding On the Web 52
OpenType 55
3 Finding Fonts 59
Solutions for Fonts on the Web 62
Adding Fonts: the Font Stack 65
Web-Safe Fonts 67
Webfonts 70
Firefox and the Cross-Domain Conundrum 77
Installing Webfonts on Your Computer 78
End User License Agreements and You 79
Webfont Service Bureaus 84
4 Choose Fonts 91
Types of Type 94
What Your Font Must Have 100
Factors to Consider 105
Combining Type 110
Checklist for Choosing Type 113
Interview with Nicole Arnett Phillips 114
5 Style 119
Consistency in Styles 122
Styling Weight 131
Styling Italic and Oblique Fonts 133
Styling Color 135
Type Effects 138
Styling Text with Borders and Bacgrounds 140
Style Checklist 142
6 Scale 145
Understanding Relative and Absolute Type Units 148
Type Size and Line Height 153
Horizontal Type Space 156
Text Alignment 161
7 Space 167
Vertical Type Space 170
8 Iconography 179
When to Use Icons 182
Choosing Icons 183
Responsive Icons 185
Using Webfont Icons 187
Styling Webfont Icons 190
Finding Webfont Icons or Make Your Own 191
Icon Tags? 192
9 Hierarchy 195
Do Not Design by Default 198
From Box to Grid 202
Body Copy 208
Navigation and Controls 211
Guiding the Reader’s Eye 212
Balancing Readability and Retention 213
Contrasting Type 214
Typography at Hand 215
Visual Hierarchy 217
Layout Grids 217
Afterword 221
Appendices 225
Appendix A 227
Appendix B 229
Appendix C 234
Index 237
INTRODUCTION
… When it is a good design, the
reader has to feel comfortable
because the letter is both banal
and beautiful.
Adrian Frutiger
You are a typographer. If you type anything on a computer, you have
committed an act of typography. You have set letterforms that will aid
in the communication of a written message. You may not get ink on
your thumbs, or have to stress out about kerning, leading, and tracking,
but you have set type. Everyone is a typographer now, but how good
is up to you.
Typography is the practice of arranging type within a design. This includes not only the
selection of a typeface, but also the size, spacing, color, and styles of type. Typography
also deals with the design of type on the page and its interaction with other elements
such as photos, illustrations, and interface. The treatment of the text can be every bit as
important to the message as the actual words themselves.
abcdefghijklmnopqrstuvwxyz
EMBAUHAUS