Browsers, devices, and fonts: a designer's guide to fonts and how they function on the web

212 Pages·2019·151.239 MB·English

by  Rozanc, Gary

Browsers,
Devices,
& Fonts
A designer’s
guide to
fonts and
how they
function on
the web.
Gary
Rozanc

Browsers, Devices, & Fonts
A Designer’s Guide to Fonts and
How They Function on the Web
Gary Rozanc
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2019 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: 20181031
International Standard Book Number-13: 978-1-138-61231-0 (Paperback)
International Standard Book Number-13: 978-1-138-61234-1 (Hardback)
This book contains information obtained from authentic and highly regarded sources. Rea-
sonable 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 conse-
quences 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, repro-
duced, 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 Cen-
ter, 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 trade-
marks, 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

Author Bio ���������������������������������������������������������������vii
01
Introduction ������������������������������������������������������������� 01
02
How the Web Works �������������������������������������������������� 07
03
Setting Up Your Toolbox �������������������������������������������� 21
What You Are Going to Need .....................................................................................................23
Using Your Device Lab ...................................................................................................................49
Using the Performance Test Server .......................................................................................50
Webpage Test .....................................................................................................................................52
04
Typography �������������������������������������������������������������� 55
Font Specimen Page .......................................................................................................................60
Typographic Hierarchy Page .....................................................................................................76
The Typographic Choices You Actually Need to Test ..................................................85
05
Finding Breakpoints for Text & Images �����������������������107
Preparing Images for the Web ...............................................................................................109
Faux Layouts ....................................................................................................................................122
Where Does This Fit into Your Design Process? .........................................................131
The Layout Choices You Actually Need to Evaluate and Test .............................134
06
Style Guides for Everyone �����������������������������������������169
Style Guides vs. Design Systems ..........................................................................................171
The Hand Off .....................................................................................................................................194

Index �����������������������������������������������������������������������198
V

Author Bio
Gary Rozanc researches the
best practices for teaching
interactive and user expe-
rience design, specifically
finding the ideal balance
of visual design, user
experience, and front-end
development skills for
the emerging interactive
designer. To support his
research, in May 2014, Gary’s proposal “Web Designer
Competencies Inventory and Recommendations for
Inclusion in Design Curricula” was awarded the AIGA
DEC Design Faculty Research Grant.
This research evolved into interviews with design
practitioners to determine, contextualize, and prioritize
these competencies, and is distributed via Gary’s award
winning podcast series Design Edu Today. Nationally
recognized by the AIGA Design Educators Commu-
nity, Design Incubation, and UCDA, Design Edu Today
contributes to discovering the ideal balance between
design disciplines that he brings back to the classroom.
Gary presents his research at international and
national peer-reviewed conferences including AIGA’s
bi-annual National Conference “Head, Heart, Hand” and
the “International Conference on Design Principles &
Practices.” Gary is an Assistant Professor in the Depart-
ment of Visual Arts at the University of Maryland, Balti-
more County, and received his BA with a concentration
in graphic design from Cleveland State University, and
his MFA in visual communications from the University
of Arizona.
VII

1