Craft Awesome Web Typography


A web typography book for web designers and web developers.

4.5 stars
4.5 (64 reviews)

Read by professionals at

Google, IBM, Skyscanner, Salesforce

This is not a book


This is not just a book—it’s a course in a book format. Digital extras, example exercises, the source code and the Sketch/Figma files that are included make this book perfect for diving into the magnificent world of web typography.

  • 30+

    Live code examples

  • 6

    Printable cheat sheets*

  • Sketch & Figma

    Example website Sketch & Figma files*

  • Codepen

    Example website source code

* available as extras

  • Beautiful typography should never be underestimated, it tells a story, it evokes excitement, and seems so simple to create. It isn’t, but it will be once you have studied this must-read edition.

    —Steve Jenkins Editor, Web Designer Magazine
    Steve Jenkins
  • Matej addresses designers and developers equally—but not only has he written an informative book with useful content, it’s also written in a nice and lovely-to-read way.

    —Marc Thiele Founder/organiser of beyond tellerrand
    Marc Thiele
  • Seriously detailed and, more importantly, fodder for any discussion with clients to convince them why the fonts you chose were the right ones for the project.

    —Paul Jarvis Designer & author of Company of One
    Paul Jarvis
Better Web Type Book Basic Edition

Basic

eBook Only

PDF, epub (iBooks) & mobi (Kindle) files + source code and live examples.

Better Web Type Book Premium Edition

Premium

eBook + Extras

PDF & eBook files + 6 printable cheat sheets, source code, Sketch and Figma files, and a bonus chapter.

All major payment methods accepted

Paypal, Mastercard, Visa, Amex

All versions come with super-friendly support from the author.

What will you learn from this book?

 

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

Better Web Type book-sample Download a sample chapter

Designers and developers love it


29,000+ designers and developers already started to learn about better web typography.

Better Web Type was featured in:

Smashing Magazine, CSS Tricks, Net Magazine, Codrops
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

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.

Alyssa Karnes

Alyssa Karnes
@alyssankarnes

Design & build an example website


Each chapter concludes with examples that gradually design and build the example website.

  1. 01
    Email
    Learn the theory

    The what and the whys.

  2. 02
    Email
    Use it in practice

    See how.

  3. 03
    Email
    See it in action

    Live examples and source code.

Example website

Bonus

Six Better Web Type Cheat Sheets

Available as an extra add-on

Get six cool printable web typography cheat sheets that will help you recognize font styles, use typographically correct punctuation, font weights, font styles, combine fonts and more.

Web typography cheat sheets

About the author


Hey, I’m Matej. I’m a designer from Slovenia but currently live in Edinburgh, Scotland and work as a Senior UX designer at GitLab. My journey towards being a designer began 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. I never studied design so typography was one of the many things that I had to explore by myself. And once I started exploring, I couldn’t stop. The gray area between design and development attracted me the most, so I created things like Gutenberg—The Meaningful Web Typography Starter Kit and now Better Web Type. I decided to create a web typography course because there’s little content online that would be practical, concise and aimed at both—designers and developers.

@matejlatin | matejlatin.co.uk

Matej Latin
 
Better Web Type book cover

Better Web Typography for a Better Web

by Matej Latin

From $29.95 $19.95

Get your copy

FAQs


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 in the email course.

I’m not a native English speaker. Will I have problems understanding the book?

I’m not a native English speaker either so my writing always uses the simplest language that anyone can understand. You can download a sample chapter to see if it’s ok. Besides, I’m always happy to help if you have trouble understanding any part of the book. Just send me an email.

Do you have a money-back guarantee?

I do—a 30-day money back policy. If, for some reason, you’re not 100% happy with the book, I'll gladly refund your order. Just make sure you get in touch in less than 30 days after the purchase.

Do you offer a student discount?

Yes, if you’re a student write me an email and I’ll send you a discount for the eBook.

Is a printed version of the book available?

No, not through this website but you can get a printed copy on Amazon and Book Depository. It doesn’t come with the digital extras through.

Table of Contents


  • 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 (Sample)
  • 7 Modular Scale
  • 8 Page Composition
  • 9 Responsive Web Typography
  • 10 Ligatures
  • 11 Small Caps and Figures
  • 12 Punctuation
  • 13 Dropcaps (Bonus chapter)