My first online course: Principles of Web Typography

I just published my first online course, Principles of Web Typography, on Skillshare. I’ve been working on this since early June, and it’s really exciting to finally be at this point. With the launch of it, I want to talk about a few things I learned along the way.

Creating content

When starting this course, I seriously underestimated how long it would take to record content. To record just the intro and conclusion on camera, it took about 2 hours. Doing the voiceover on lessons was about 8 hours, and the screencasts were another 8. The accompanying research took maybe 6 hours.

For the next course I create, I am definitely going to keep the length in check. An hour and twenty minutes is absurdly long and probably going to have lower engagement than a 30-45min course. I have a lot to learn about camera presence and hopefully that will be the biggest improvement in my courses going forward.

Typography

I did a ton of research on typography going into this. There is so much content out there but it is so hard to find comprehensive sources. Here are a couple notes I put together from things I learned.

ch unit

The ch unit is one I did not use much before, one ch is equal to the width of the character 0 in the current font, at its parent elements size. Using ch to control line length is something that has been a gamechanger for how I write CSS.

Previously I went about setting line lengths by trying to approximate character counts using rem or em units. One character in width is roughly ~1/4 to 1/3 of an em, so adjust accordingly and try to use that to get a rough line length. Using ch is such an improvement over this, despite that not all characters are the same width (hello monospace) setting a measure of 70ch will almost always result in a line being at or about this length.

Up your font size

12px is absolutely miniscule, 16px is sufferable, 18px is getting there, 20px should be the new standard. My own website (that you are on now) is due for a revamp with an increased font size, and when I do it will be 20px. My code editors have all been upped to 20px as well and I feel like my eyes are less strained while coding as a result. This brings us to…

Stop caring about precision font size, and embrace responsive sizing

This is one of the lessons in the course, moving toward responsive font sizing. Responsive font sizes use viewport width (vw) units, mixed with a base font size to scale font up and down with the screen width. A wider screen receives a larger font, and a smaller screen receives a font close to the base size. The CSS for this looks like this:

body {
    font-size: calc(1em + 0.3vw)
}

This calc function takes the base font size (1em) and mixes it with 1/3 of a viewport width unit. The resulting font size maybe something like 22.048483px.

But what is this crazy number?? We can’t have font sizes that are not whole numbers!

A scared and confused developer

There are some arguments to be made about sub-pixel browser rendering and how it can distort characters. But for the most case, this just doesn’t really matter. The characters will render and be readable, and the benefit of having a scale-able responsive font greatly outweighs the negatives. This is also going into my future website revamp.

Wrap Up

Ok that’s my brain dump on what I learned while creating this course. Again I invite everyone to check it out at the link below. The course is under Skillshare premium, so if you can’t afford it just shoot me a message and I will get you a free link to use.

Principles of Web Typography