Typography is the most important ingredient of every website design.
The truth is that almost every website is 95% nothing more than pure typography. So, if you know how to choose and mix the right fonts, apply interesting styling techniques and create a typographic hierarchy, your entire website design will be great just from that.
With this online mini-course you'll be able to start putting your knowledge into practice right away and immediately improve your design work where it matters the most.
I reveal all of the rules that I use in my own work to set a more meaningful and readable type on websites. Don’t know where to start? Begin with the typography first and you can design everything else around it.
Here’s what’s included:
41 written lessons with detailed illustrations.
- 1. Intro
- 1.1. Why does typography matter?
- 1.2. Typeface vs. Font and Web Font
- 1.3. Where can you get fonts?
- 1.4. Typography on the web
- 1.5. Icon fonts
- 1.6. Summary
- 2. Typography Basics
- 2.1. Anatomy
- 2.2. Sizes and spacing
- 2.3. Weights, widths, and styles
- 2.4. Classifications
- 2.5. Type families
- 2.6. Summary
- 3. Choosing and Matching Typefaces
- 3.1. Narrowing down the search
- 3.2. Looking for inspiration
- 3.3. Choosing a type for body text
- 3.4. Choosing a type for headings
- 3.5. Designing with one typeface
- 3.6. Pairing typefaces
- 3.7. Testing and judging your choices
- 3.8. Common mistakes
- 3.9. Summary
- 4. Styling and Formatting
- 4.1. Alignment
- 4.2. Size
- 4.3. Color
- 4.4. Style
- 4.5. Spacing
- 4.6. Punctuation and special characters
- 4.7. Drop cap (initial)
- 4.8. OpenType features
- 4.9. Summary
- 5. Improving Readability
- 5.1. How we read
- 5.2. Perfect paragraph proportions
- 5.3. Vertical rhythm
- 5.4. Contrasts
- 5.5. Content congestion
- 5.6. Responsiveness
- 5.7. Summary
- 6. Putting It All Together
- 6.1. Defining a hierarchy
- 6.2. Typographic system
- 6.3. Sample project
- 6.4. Summary
6 printable cheat sheets for everyday use summarizing everything you learn (PDF).
Exercises with instructions in order to practice your skills (Sketch, Figma, Adobe XD).
Templates to use in your own projects (Sketch, Figma, Adobe XD).
Sample typography projects to learn from (Sketch, Figma, Adobe XD, HTML/CSS).
Video tutorials demonstrating how to design a sample project in Sketch*.
* Although the video tutorials utilize Sketch, you can easily recreate the steps in Figma or Adobe XD because the interface is very similar.
Start learning design today.
Register for the Web Typography CourseSee Pricing
What people are saying
Here's what developers, designers, and clients say about my work and previous products:
As a seasoned design professional and teacher, I can say that Rafal is one of the best design communicators I’ve had the pleasure of knowing. His advice is practical, actionable and accessible to anyone no matter where they are in their professional design journey.
Rafal makes learning about typography feel like a vacation. Easy to understand, well made graphics further taking the points home and you just understand. Well working templates makes my further designwork a breeze.
Simply stated: Rafal is one of the web industry’s leading designers. His keen eye, talent and professionalism are unmatched. He is the perfect resource for any entrepreneur or business owner looking for someone to visually translate their vision into a web experience that is both easy to use and elegant. I highly recommend him.
Working on projects Rafal Tomal designs is amazing not just because of how cool the design is but because he takes the time to make a developer life easier. This equals faster development time and he has more control over how the design gets implemented.
Looks awesome and makes me want to punch you in the face.
I bought Rafal Tomal’s eBook, it was an eye opener for a non-designer like me, worth 20x what I paid for it!
In a world saturated with ‘me too’ ebooks and poorly put together info products, Rafal’s book was the real deal. It gave me a clearer understanding of both the philosophy and the process behind great design. More than that though, I now have the confidence to explore more and experiment myself and for that I am very grateful. Go Rafal!
@RafalTomal I think your content is brilliant! In fact, I make my developer train on your content. Thank you for putting together this free series. It has been of amazing help to small organizations like us.— Kalpana Arun (@kalpanaarun_SOS) October 4, 2018
Can't wait to see the class! I bought your web design ebook a while ago, and I still learn something new when I refer back to it.— Amy Kotas (@AmyKotas) September 6, 2018
I’m Rafal Tomal, a UI/UX consultant, designer and web developer. I run my own design studio here at RafalTomal.com focusing on personal brand design, designing for conversion, and UI/UX of web apps.
Previously, I was the VP of Design at Rainmaker Digital, the company behind brands like Copyblogger, StudioPress, and Rainmaker Platform.
I’ve been designing websites for over 13 years and worked on projects for many successful entrepreneurs and bloggers, including: Brian Clark, Chris Brogan, Darren Rowse, Michael Stelzner, Neil Patel, Scott Gerber, Bryan Eisenberg, Rob Walling, and many others.
Throughout the years, I’ve created my own designing process that has made me more creative and efficient, as well as help me get quicker approvals from clients on my design concepts. My web development background also helped me to understand how to better work with developers and hand off project files that are easy to work with.
Sign up for the
Web Typography Course
- Access to the entire Web Typography online content.
- 41 written lessons with detailed illustrations.
- 6 printable cheat sheets for everyday use summarizing everything you learn (PDF).
- Exercises with instructions in order to practice your skills (Sketch, Figma, Adobe XD).
- Templates to use in your own projects (Sketch, Figma, Adobe XD).
- Sample typography project to learn from (Sketch, Figma, Adobe XD, HTML/CSS).
- Video tutorials that show the process of designing a sample project in Sketch.
- Lifetime access and updates.
- 14-day money back guarantee. Take some time to look around. If you decide it’s not for you, I’ll issue a full money back refund, no questions asked.
Frequently Asked Questions
1. How does the money back guarantee work?
If you’re not fully satisfied, I’m not satisfied. Use my contact page to send me an email and I’ll issue a full refund up to 14 days from the purchase date. It’s that simple.
2. What payment options do you accept?
I accept all major credit cards.
3. What’s the format of the lessons?
In my own experience, I found it difficult to learn design by listening to audio or watching video only. I couldn’t find the information quickly so it took me more time to go through the lessons. That’s why I decided that my course will be mostly in a written format with images, examples, animated GIFs that you can easily review, spend time with, and quickly go back to in order to find the information you need.
Some lessons will also come with attachments like project files, templates, and video tutorials for the practical parts where I share my screen and walk you through the steps.
Let me know if you would like lessons to be available in other formats and I may be able to add them in the future!
4. What design software do I need to use?
Most files are in the following formats: Sketch, Figma, Adobe XD. However, the techniques and design theories I teach are universal and can be used independently from the software. Your skills are more important than tools!
All of my original video tutorials are in Sketch, but you should be able to easily recreate my steps using Figma or Adobe XD because both have a very similar interface (learn more from my free lessons about design tools).
5. Will I learn how to code websites as well?
While I do provide some snippets of code, please note that you'll need some HTML/CSS knowledge in order for it to make sense. Overall, this is not a course on how to code.
6. Can I use your attached files and resources in my own work for clients?
Absolutely! That’s the point. You can use them as is or copy them and make your own branded templates. Please make sure to remove “Design Class” and my name from the files that you deliver to your clients.
However, there is one caveat: you can’t redistribute these files for free or as a stand-alone product for other designers. We want these files to be exclusive to the Design Class members only.
7. What types of communication are available for students?
You can ask your question in the comments section under each lesson. You can also always email me if you need any help and I’ll try to get back to you as soon as I can.
Start learning design today.
Sign up for the Web Typography CourseSee Pricing