Typography is one of the most overlooked aspects of modern web design. I myself have real issues when I design to make the fypeface look just right. Simply switching from the theme demo font to the font I myself want to use makes things look so different and are in need of adjustments.
Enter the Web Typography Class by Rafal Tomal to solve all your issues.
A brief look into the designwork of myself
I design by chosing a font first. I go to google fonts (since I am poor and can´t afford any monthly subscriptions) and check out fonts. Seeing fonts there is good for comparing fonts with eachother and it´s easy enough to find a font, or two to use in your next project.
I then make a mockup image in Sketch and use the fonts chosen above. Applying the font to my own design usually changes the font. A LOT. Why you ask? Because I keep all the settings in Sketch to “auto” and just adjust the font size.
“It doesn´t matter” I´ve thought to myself. I will fix it later when I´m writing the CSS. Issues follow and I end up chosing another font or simply going back to Open Sans (yay for previous favorite font being easy to use!) and call it a day.
spoiler, Open Sans is a great font but when you see it almost everywhere it´s starting to become boring and you start to drift away looking for a replacement font.
Changes be happening
As I always want to become a better designer in every aspect I opted in and bought the Typography Class. And yikes. After reading it trough it feels as if I can start designing so much better. Learning about the golden ration, about what to look for in a font, how to make it good line height and letter spacing so it flows well on the web?
This comes from someone not liking the idea of compressing font letters together since previously I´ve thought the normal letter spacing the font originally comes with is fine. Not anymore. Now I am going to try and work my magic on the font I chose to see what letter and line spacing is the best one to use. Makes for a better design mockup and for clients it is important to get a good value mockup so they don´t start asking when the design is live “why are the blocks of text so far from eachother?” as I´ve had happened to me.
What do you get?
Sorry for the sales pitch but for the price of 129US you get
- 41 Lessons about typography. Covering everything from the basis to more focus on web design and examples via both text and detailed illustrations.
- 6 printable cheat sheets in PDF format so you can always read about the wonders of the typygraphy world.
- Exercises with instructions in 3 different formats (Sketch, Figma and Adobe XD).
- Templates to use for your own projects. Even these are in 3 formats (Sketch, Figma and Adobe XD).
- Included typography projects to learn from. In both mockup and coded versions (Sketch, Figma, Adobe XD and the used HTML/CSS code).
- Video tutorials demonstrating how to put your newly aquired skills to the workflow of designing a project in Sketch.
All for the cost of 129US.
But Henrik, typography info can be found free on the internet, why should I buy this course?
A very good question indeed. Searching the web will net you a lot. I mean A LOT of information about typography, about the golden ration, what typeface to use for headers/body. How to think when chosing a font and everything.
What puts Rafal´s class over the free information found on the internet is the way he writes. On the net about the golden ration you can find “oh it should be around this and that value”. Nothing is said about how to best get to this golden ratio value on your text row lengths. What even is the golden ratio?
Rafal takes time to expertly describe and explain all of this and makes it easy to understand why you should be looking for the golden ratio and even helps you with links to websites where you can experiment so you yourself can find the golden ratio,
Now I´ve talked mainly about the golden ratio, but this explanation is pushed to everything in the class. The differences between serif and sans-serif fonts, what those small pesky little details in the letters you so work with in design are called. As this image below shows for example.
As I´ve spent a lot of time doing research on design trends. Obviously I´ve been looking into typography information. Yet this course with these kind of illustrations and the way Rafal writes and explains everything is pure gold.
So yes, buying this course is worth it for the text.
129US, a lot of money. Worth it?
The cost might seem steep. But I can remedy it with two things.
The included templates are a work of art. If you would search on google for this kind of detail and workflow images for Sketch? It´s easy to have to pay 30-40US per template. Here you get six templates, all of which are done with expert care and love and easy to use. As well as If you count, you get six for Sketc, six for Figma and six for Adobe XD, so in reality it is 18 templates.
Mix this information with the way the classes are written. How well the website itself is used to display all the ins and outs of web typography? It´s just a work of art.
Brian Gardner, of Authentik.com said
Looks awesome and makes me want to punch you in the face.
I agree with what Brian says there. Just by looking at the design of the site is making me want to punch Rafal in the face. Out of joy for him making something so beautiful. Well written, a lot of time and care has been put down into every little detail about everything and it shows.
Secondly, Rafal has also been kind enough to let me tell you who are reading this if you are interested in the Typography Class but 129US is too step for you?
I have a discount code for you. Use “20off” and it will remove 20US from the price.
Finishing up
Being completely honest. Yes the price tag if we look at just the text information being written, how we should strive after the golden ratio, what fonts to use on a header/body of the website? This info can be found for free online. What makes it so much worth though are by buying the Typography Class by Rafal Tomal you get so much more than just a dry “aim for the golden ratio. Use sans-serf fonts for headers”. Here you get explanation of what each term is and how it impacts your design work.
I don´t regret buying the Design class: Web Typography one bit. Having read trough all 41 chapters (they went by so fast!) and now I feel more inclined to make great design choices when it comes to typography online. Writting text is hard but Rafal goes about it in a very educative way and I don´t feel lost at all even with English not being my first language.
And the value of the amount of templates and cheat spreads you get is way more than 129US.
So, if you are interested. Head over to Design Class: Web Typography and enjoy the information. If you end up buying it? Don´t remember to add “20off” as a discount code to get 20US taken off the price.