Close

Better Web Typography for a Better Web

by

Pages232 pages Live code examples 30+ live code examples Sketch tips Sketch tips

Find out more

Get a sample of the book

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:

  • Choosing typeface

    How to choose typefaces for your projects

  • Combining typefaces

    How to combine typefaces like a proper type geek

  • Typographically perfect paragraph

    How to set a typographically perfect paragraph

  • Modular scale

    Why and how to use a modular scale

  • Vertical rhythm

    How to set up vertical rhythm for your website

  • Page composition

    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.

CodepenSource code and live examples on CodePen

Sketch appSketch source files Coming soon

Content-first example website

What do others say?

5-star rating

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.

Arne Schog

Arne Schog
@arneschog

5-star rating

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.

Arne Schog

Matteo Delabre
@matteodelabre

5-star rating

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.

Arne Schog

Dimitri Naczaj
@dimnc_

5-star rating

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!

Arne Schog

Alyssa Karnes
@alyssankarnes

Better Web Typography for a Better Web—Deluxe Edition

Deluxe Hardcover Edition

PersonalizedYour name in the book Hardcover Top-quality hardcover print Goodies Goodies

A limited edition of the book is available for proper type geeks who want to be displayed inside the book as the supporters of the Better Web Type project. This is a high-quality print with a dust jacket, extra full-page illustrations and comes with two different goodies packs (including a T-shirt and a memory game). The first 20 copies are unique: hand-numbered and with a personal message.

Find out more

About the author

Matej at a CSS meetup.

Hey, I’m Matej. I’m a UX/UI designer. I live in London, UK, where I work as a Lead UX/UI designer at Auto Trader—UK’s largest online marketplace for anything automotive. My journey towards being a designer started when I was 13. I joined an after-school class called Web Design where I learned the basics of HTML and handcrafted my first website in Microsoft Notepad.

I’m from Slovenia but my passion for simple, clean and usable design took me to a journey through Germany, Luxembourg and finally UK. It was a specific project I was working on while in Luxembourg, that made me fall in love with typography. Looking back, I now realize how clueless I was—I thought typography was about fonts alone. Once I started exploring, I couldn’t stop. The grey area between design and code attracted me the most, so I created things like Gutenberg—The Meaningful Web Typography Starter Kit and now Better Web Type.

My work has been featured in:

Smashing Magazine, CSS Tricks, Net Magazine, Codrops

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.

Content Overview

  • 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.

Chapter 10Ligatures

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.

Chapter 12Punctuation

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.

Chapter 13Dropcaps

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.

Your cart

Total
USD