A web typography book for web designers & web developers
Better Web Typography for a Better Web is a book based on a top-rated online course explaining typography to people who build web sites—web designers and web developers. The author, Matej Latin, takes complex concepts such as vertical rhythm, modular scale and page composition, and explains them in an easy-to-understand way. The content of the book is accompanied by live code examples and the readers go through a process of designing and building an example website as they go through the book. This is a new typography book for a new medium, the rules haven’t changed much, everything else has.
This book is for you if you want to learn:
How to choose typefaces for your projects
How to combine typefaces like a proper type geek
How to set a typographically perfect paragraph
Why and how to use a modular scale
How to set up vertical rhythm for your website
How to shape pages and use responsive web typography
Learn by doing Design & build an example website
It’s good to learn the theory of what’s good typography but it’s even better to put that newly acquired knowledge to use straight away. That’s how I decided to write this book. Eleven out of thirteen chapters conclude with a part where the topics covered in that chapter get applied to the example website that gradually gets designed and built through the book.
Source code and live examples on CodePen
Sketch source files Coming soon
What do others say?
A must-read for any web designer/developer
As a designer who also works in front-end code, I've been waiting for book like this, which addresses both designers and developers. Often, there is still a huge gap in the collaboration between design and code. This book will help to improve this process and make a web with better typography.
Typography Basics for Web Developers
The author manages to introduce a lot of typography terms and concepts while keeping it simple for developers (like me) to understand, notably because he uses a lot of examples. He also shows how to apply most techniques in a web context, which makes me recommend this book to web developers who want to know more about typography.
Best book for web-typography
A must-read book for all designers, coders and amateurs of typography! You'll learn basic semantic of typefaces, how to pick them, and basically everything you need to make your website top notch. I wanted to do things properly to build my website, there is everything I needed in this book.
All the heart eyes 😍
Not only is this incredibly informative, but it is wonderfully written. It's more than just helping you choose better typefaces—but creating type that is clear as well as beautiful. Can't wait to order a copy for my shelf!
Frequently asked questions
I did the email course, should I still get the book?
I didn’t just take the content from the course and put it into an eBook format. I expanded it. The course was relatively short with around 13,000 words of content, the book is more than 40,000 words long and covers topics that aren’t addressed in the email course.
What payment methods are accepted?
You can pay for the book with any major credit card or through PayPal. If you come across any trouble make sure you get in touch.
Can you ship to my country and what are the shipping costs?
I inspect every copy of the book to make sure the quality is top-notch, pack it up myself and ship it to you, wherever in the world you are. The shipping is free and usually takes 5-7 working days.
- Macro Typography
- 1 Introduction to Web Typography
- 2 Anatomy of a Typeface
- 3 Choosing Typefaces
- 4 Equilateral Triangle of a Perfect paragraph
- 5 Combining Typefaces
- 6 Rhythm in Web Typography
- 7 Modular Scale
- 8 Page Composition
- 9 Responsive Web Typography
- Micro Typography
- 10 Ligatures
- 11 Small Caps and Figures
- 12 Punctuation
- 13 Dropcaps
Chapter 1Introduction to Web Typography
The book starts off by looking at what typography actually is, how famous typographers define it, what are its goals and how does all that apply to the web. This chapter explains why it’s important that everyone involved in a web design process need to learn about web typography—including web developers.
Chapter 2Anatomy of a Typeface
To learn how to use typography well, we first need to get to know its main tool—the typeface. This chapter looks at why some typefaces look heavier and bigger than others (despite being set at the same size), what are faux font styles and why they should be avoided, what’s the difference between display and text fonts, web and print fonts and why is x-height such an important typeface feature.
Chapter 3Choosing Typefaces
Choosing typefaces based on names is not good enough. Using a typeface for a website because of its popularity is a poor choice, but still far too often. The “Choosing typefaces” chapter introduces a way to properly choose typefaces that complement content well. At this stage, the “example website” is introduced as readers go through the process of choosing a typeface for an example project.
Chapter 4Equilateral Triangle of a Perfect Paragraph
Perfect balance between line-height, line length and font size is required for a typographically perfect paragraph. The theory, developed for the Better Web Type course is explained even further and is applied to the example website.
Chapter 5Combining Typefaces
Combining typefaces is the hardest and most time-consuming part of typography. It’s the part that is the hardest to master. The ”Combining Typefaces” chapter looks at all the different ways to combine typefaces and backs them with examples.
The chapter is wrapped up with a process of finding a perfect match typeface for the example project.
Chapter 6Rhythm in Web Typography
Vertical rhythm gained popularity in web design and this chapter looks at it and gives examples of how to do it well in Sketch as well as with Sass. Horizontal rhythm is the part that is commonly ignored and this chapter introduces it and puts it alongside the vertical rhythm as equally important.
Chapter 7Modular Scale
Typographic scale has been in use for centuries but the web presents new challenges. Digital revolution made it so easy for anyone to play around with font sizes. But just because we can, doesn’t mean that we should. A range of sizes needs to be established and all the font sizes should only be picked from that range.
This chapter shows a simple way of using Modular Scale with Sass and also in the Sketch app. It ends with applying the learned knowledge to the example website.
Chapter 8Page Composition
The web is loud but boring. Web typography is still mostly poor but slowly getting better. Many websites admired as websites with good typography rely on a centred, single-column layout. This chapter challenges that. The content should define the canvas, not the other way around. Just because the web is a new but challenging medium, it doesn’t mean that it can’t evolve past the medium that preceded it—the book.
Chapter 9Responsive Web Typography
One of the main challenges that the web brings is the responsive web typography. What is the recommended smallest size to use on mobile screens? What about the desktop? How and when should the switch between the two happen? Should I use pixels, EM or REM units? This chapter addresses questions like these.
Ligatures are extremely popular among typographers and type geeks but many web designers and web developers don’t even know that they exist. This chapter starts of by looking at the origin of ligatures, explores their role in typography and looks at how they can be used on the web.
Chapter 11Small Caps and Figures
Small caps can add another subtle touch towards improving web typography. But only if we do it right. This chapter looks at what are the real and what fake small caps, what is the difference how to properly use them on the web. It then explores different styles of figures—old style figures, lining figures, proportional figures and tabular figures.
Believe it or not, punctuation is a part of typography. And pretty much everyone gets it wrong—including you and me. It’s not really our fault, but that doesn’t mean that we shouldn’t learn what is typographically correct and correct our mistakes. This chapter looks at different dashes, quotation marks and spaces.
Dropcaps can be another way to add some style to our typography. There are many ways to use them on the web and this chapter looks at all those and concludes by trying to add the dropcaps to the example website.