On Web Typography

A Book Apart #11

by Jason Santa Maria

Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this book, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.

This book will be released Summer 2012.

Genres: Design, Website Design, Nonfiction, Web, Technology, Reference, Programming

142 pages, Paperback

First published August 5, 2014

About the author

Jason Santa Maria is the founder and principal of Mighty, a Brooklyn-based design studio. He is creative director of Typekit, a faculty member in the MFA Interaction Design program at SVA, former vice president of AIGA/NY, co-founder of A Book Apart, founder of Typedia, a shared encyclopedia of typefaces online, and creative director for A List Apart, a magazine for people who make websites. He’s worked for clients such as AIGA, Microsoft, Housing Works, Miramax Films, The New York Stock Exchange, PBS, The United Nations, and WordPress focusing on designing websites that maintain a balance of beauty and usability. He discusses design on his award-winning website.

Reviews

[Bill · Rating 3 out of 5]

Spends a tad too long on fundamentals. I felt a little over my head when I reached the diagram of the anatomy of type. Thankfully, the latter half of the book takes a far more practical approach and seemed very useful for web designers to know. I feel smarter and now notice the type around me more. The author's passion for the subject definitely comes through.

I found this interactive type attribute demo useful for learning how changing the different attributes affects the type: http://www.metaflop.com/modulator

[Caroline · Rating 4 out of 5]

a fun, quick primer that’s good for typography beginners! this articulated a lot of things for me that i’ve thought but haven’t been able to articulate, and also taught me that that’s the most useful thing—being able to communicate clearly why a piece of typography is or isn’t fulfilling what you need from it.

[Gregory · Rating 5 out of 5]

On Web Typography is an excellent typography primer, and not just as it pertains to the web. In a refreshing, somewhat classical approach, Jason steps through foundational points of legibility, style, size relationships, font pairings, analysis of type choices based on knowledge of the type's design process and purpose, and more. For those who are used to working on the web but need an introduction to type and design principles, it's essential. For designers, it's a lovable refresher, though I gleaned plenty of new insights as well. The application for web typography gets practical in his discussion of hosted and service-provided type options, sizing type and testing for readability with responsive design, and more. Jason is one of my favorite designers to read, not only because he's got a great eye and knows his field well, but because he's witty and easy to read. Grab it up.

[Paméla · Rating 4 out of 5]

Sous ses aspects strictement business, une véritable déclaration d'amour à l'art invisible et une invitation à privilégier le crystal plutôt que l'or massif alors que l'on doit composer son message, dans la cohue et la vulgarité graphique du web.

[Lasse Larsen · Rating 3 out of 5]

This is not a bad book. It says nothing wrong. It just breezes very quickly over a lot of topics, that could easily be explored more deeply.
The intro is great, but after that it’s just a very minimal compendium of things you ought to know as a designer.

[Anthony]

This is a test!

[Scott Pearson · Rating 4 out of 5]

Typography, or the science of fonts, has always been an important vehicle to communicate ideas. Printing presses used typography to achieve mass communication. In the age of Internet instantaneity, nothing has changed much as good fonts continue to be central means to convey concepts with the masses.

Unfortunately, many users still default to a few common fonts like Helvetica/Arial or Times New Roman. In this book, Santa Maria seeks to free designers – and also general users – to be more stylish by adopting different font combinations. He teaches the basics of font design, including how to break down varying mechanisms that make a font unique. Then he shares how these can be used to select font combinations in web communications.

The last chapter – on putting these in a coded web design – is a bit more dated than the rest (since this book came out in 2014). However, most of the book still describes the state of the art, with copious examples and graphics. Most helpfully, a list of resources attached in an appendix allows readers to get started quickly.

Audiences include not only web designers and developers but anyone who uses computers to communicate. In our age, who honestly doesn’t this describe? Typography is just another tool to use to stand out from the crowd. Santa Maria points the way through applications of timeless design principles adapted for the newest technologies.

[Ivy DeWitt · Rating 5 out of 5]

'On Web Typography' is a relatively short read - I finished in about a weekend - but that does not mean it's any less packed full of useful, relevant, and engaging content. The book begins with a relatively straightforward yet interesting overview of how the mind words when reading content, which is great for drawing you into the content of the book. From there, it moves into a more comprehensive overview of type, and serves as a good primer on the important aspects of typography including classifications, basic terminology, size, etc.

The book moves away from the theoretical and foundational about 2/3 of the way through, and gives helpful tips on evaluating typefaces in a project and deciding on 'type' within the real world. As someone who is a beginner to the world of front-end development and design, this was a really helpful section.

Overall, I was very surprised how much information is packed into this book. It's not an all-inclusive reference to typography, but for those who want to be able to 'talk type' it's a great reference. I can't say that an experienced designer would enjoy it, but as a beginner I appreciated the wealth of useful tips and the additional resources at the end.

[Arnold Saputra · Rating 3 out of 5]

Buku ini lebih banyaaaak ngasih tau mengenai sejarah dan teori tipografi. Kurag menjelaskan teknis dan cara terbaik menampilkan tipografi di website atau di media digital. Tadinya ekspektasi Aku, buku ini akan membahas hal-hal teknis mengenai web tipografi dan ternyata enggak terlalu. Giliran menghadirkan teks ke web, banyak hal ke skip dan malah ngomongin prinsip2 tipografi.

[Jared Hanstra · Rating 4 out of 5]

Started slow, but had some useful knowledge of typeface pairing, typographic systems, and technical aspects of typography.

[Amy · Rating 4 out of 5]

It's a decent overview, but it doesn't offer solutions. I would have liked practical help with making responsive typography work... and now all the permalinks don't work. What gives A Book Apart?

[Jim · Rating 5 out of 5]

Casual and informative. Enjoyed the humorous style.

[angela · Rating 4 out of 5]

a bit basic, would rec for beginners. visual website examples are a bit dated imo (but this was also published in 2012, so)

[Jeremy Lee · Rating 4 out of 5]

Look at that subtle off-white colouring, the tasteful thickness of it, oh my god it even has a watermark.

[Margaret · Rating 3 out of 5]

A good little book. I learnt some things that will help me build better websites from now on.

[Steve · Rating 4 out of 5]

This is the book I wanted years ago. It tells you how to pick out fonts, pair fonts, and make your information readable and legible to your users.

[farissaifuddin · Rating 3 out of 5]

Good refresher for someone who's already familiar with typography.

[Marco Sansalone]

Lot of interesting info. Good for refreshing knowledge about the fonts topic.

[Jess · Rating 5 out of 5]

This book will leave you with a foundational knowledge of typography—not just typography for the web. I didn’t go to school for graphic design. Before reading this book, I knew the bare minimum about typography. Now I have a great foundation to build from.

Anyone who works with the web will find this book accessible. The book covers the principles of typography that are relevant to both web and print. The book explains typography in the context of responsive design. It shows you what the rules are, and it even touches upon when and why to break them. It explains how readers consume content and the effect typography has on their experience.

If you work with the web—whether you're a writer, developer, UX designer, or even a graphic designer, you have something to learn from this book.

[Rachel (Kalanadi) · Rating 5 out of 5]

Overall, fantastic and well worth the wait. I am eager to take what I've learned and use it in some website projects! Anyone who's been interested in typography and read a little about it will be familiar with the basics that Santa Maria covers, but this compact book also includes plenty of more advanced tips, including a discussion of typography for responsive website layouts.

I learned a lot about typography and the importance of contrast, repetition, alignment, and proximity (and color) from "The Non-Designer's Design Book" by Robin Williams back in college. While reading "On Web Typography", I can't help but think that it would be a great companion piece to Williams' book, especially for desktop publishing courses that now incorporate more digital design and web design.

[Meghan Schofield · Rating 4 out of 5]

This book is a fantastic overview of many, if not most of the important concepts for well designed typography. The author does a good job of making a case for why each concept is useful, while looping in how and why these rules should be applied on the web as well.

As a practitioner with 10+ years of experience I didn't learn anything new, but I still enjoyed reading several of the arguments set forth (long live the grid!). so, I was hoping for a deeper dive into the technical side of web typography and some more nuances which lie within the non-print medium.

However, I'd highly recommend this for new designers or designers that haven't taken traditional typography classes. It's a large collection of typography knowledge in one slim volume.

[sara · Rating 4 out of 5]

I don't give five stars to work-related books but, if I did, On Web Typography would get 'em. This book is mercifully brief. I read it in a couple of hours, shorter than many blog posts I've come across. This isn't to say it's lacking anything, however. There's a pleasantly dense number of practical soundbytes to highlight and revisit. I came away from this much more prepared to critique my existing work and lay the foundation for new, better work. Definitely worth the money.

[Raigo Lilleberg · Rating 5 out of 5]

Jason gives short overview of typography generally and good amount of guidance and tips, getting it right - mostly in the context of web. Also good list of resource list, for next steps.

Main takeaways (that can be used for everything in life), were the importance of context, balance, and communication. Also that big things are made of small things, so therefor connected, and typographic harmony mostly contains combination of size, hierarchy, spacing, layout, color and tone.

[Amy · Rating 5 out of 5]

I’ll struggle with typography for awhile, but this book assured me there are methods to use when approaching typography on a website. I’m walking away with a few ideas for my own sites, and so many resources in hand to still explore.

Like everything else in web design and development, practice is key. You can know a lot of stuff in theory, but putting it to use in several projects is the only way something sticks with you.

[Usman Bashir · Rating 5 out of 5]

Absolutely fantastic! I loved it! It's a clear and brilliant primer on typography, and not just web typography. It doesn't matter if you're a designer or a developer, as long as you produce content and communicate with your readers, this is a must read. Especially, if you haven't taken a traditional typography classes.

[Laura · Rating 5 out of 5]

This book made me understand web typography (and typography in general) to a far greater degree than I realized was possible. The first few chapters alone in which Maria breaks down the visual elements of a character alone were enough to blow my mind. As someone who wants to improve as a designer, this book was a great addition to my shelf, both for its own content and the recommended resources.

[Joshua · Rating 5 out of 5]

Jason is a wonderful teacher, and this is a brilliant, and brilliantly concise introduction to doing typography well on the web.

It's worth it for the references alone, but getting an inside look into the process that drive one of the web's most consistently great visual designers is worth its weight in gold.

Highly recommended.

[Eystein · Rating 4 out of 5]

This took me much to long to read, unfortunately. Luckily I took lots if notes and can use it to look up things further down the track.

It's an excellent overview of typography for the web, every web designer should be aware of this information as part of their repertoire.

[Les Reynolds · Rating 5 out of 5]

Great overview on the theory and practice of typography on the web in the era of responsive layouts. Heartily recommend this book to any designer or developer. I only wish there had been more examples or case studies.

[Robert Crespo · Rating 4 out of 5]

Loved it! Jason Santa Maria provides some key insights into the how and why of good typography on the web. As a web developer, I am always looking for good resources to improve my skills and "On Web Typography" succeeded.