index

Close Menu

Type Scales

I work on a dynamic type scale for the website that’s automatically responsive and 100% awesome.

March 11 2020, by Karl Oscar Weber,


Hi Friends! I'm back! Typography is 95% of web design. The impact and implications of a good type system, the right fonts, and the right colors cannot be overstated. I've never really been all that good at it, but this time I really wanted to do my best and make something that would stand out. Firstly I should share the design that I made for kow.fm v15.

This is the homepage design for kow.fm.

The homepage design doubles as an about page and an index. I realized the primary goal of kow.fm had changed to share educational content, tutorials, books, guides, tips, that sort of thing. It's more than just a journal, but also the nature of my writing has begun to shift too. So this is what I've got. I really like the colors and the simplicity of the typeface.

The post page design with a header image for kow.fm.

This is a post template page with a header image. A big barrier in the past for my writing, was that I had aspirations to include some homemade art with every post. But I never had time to do the Art, or it was just really junky, so the post never made it out. I wanted a design that could work equally well with or without a main post image. So that's what this is.

Post page template with no image for kow.fm.

I also mocked it up without an image and the above image is that. I like it. You can even peek the little aside box that I designed. Kow.fm will also host a course and a book, so the design for those pages needs to just be different. It can't follow the above blog patterns.

The lesson page design for a swift foundations blog lesson.

This is what the lesson pagef looks like, just like the blog design it works equally well with or without a header image. This design is mocked up with a header video. Offering video content. I know that I want to offer premium materials for a subscription to like... pay for things, and stuff. I also want the design to make finding and learning as much about swift as effortless as possible, so I added that endless Menubar on the side.

I haven't mocked up any upgrade or subscription screens yet though. I figured I could start with the free content first and then build the premium gate stuff when I have something to sell.

Dynamic type scales

Yeah so this website has a new dynamic type scale system. It's a really great concept that a couple of fellows at have been working on over at Clearleft; James Gilyead and Trys Mudford. They published this site about their idea and I freaking love it. https://utopia.fyi.

Before this I was highly skeptical of type scales in general. Designers generally just make that shit up anyway, have wild sizes for random ass pieces of a design. Titles are tiny, but only a little tiny, headings are almost the same size, except for h1s, which are huge for some reason. Not even to mention that margins, paddings, and line-heights are all different and special, for whatever reason. So yeah, I'm a bit jaded. The whole design system movement has made in depth, systemized designs much more common and easier to work with, but there is still a lot of confusing bloat to deal with when fitting fonts to different screens. This Utopia thing makes a lot of sense. Dynamically change the type size based on the screen width without media query janky breakpoints.

What is a type scale? It's a relationship between type sizes. When things change in size in a predictable manner, it looks predictable and pleasing to the eye. So a type scale will have those steps change by the same ratio at each step. Let's say your type scale is 1.25 and your initial type size is 16px, each step will be 25% larger or smaller then it's adjacent step. Example:

An example of a 1.25 typescale with type at different sizes.

I used to think this was a bit silly, but now I'm like... DAMN! That looks nice.

Now type scales should be tailored to their context. The mobile web will have a more reserved typescale versus the desktop web. On Desktop you've got a lot of real estate to work with. Big expansive screens, We want to take advantage of that. So the type scale should be bigger on that larger screen. This is what the large typescale looks like next to the smaller one.

Comparison of two different type scales.

As you can see, if you can see, we have two, proportional type scales side by side. They look pretty nice. I like them. You may notice that they don't use perfect pixel sizes, that's fine. Nothing is pixel perfect. Who cares. For kow.fm v15 I wanted to take the concept of a dynamic typescale and expand it to also use dynamic sizes for margins and padding. So I did. The Margins and padding are all dynamic based on screen width.

The type scale is dynamic. That means that the CSS is interpolating between two different sizes based on screen size. You can use a handy tool to calculate your own type scale. It works super well, only uses CSS Variables, and is super well supported.

Using the type scale in CSS is super easy. This is what the styles look like for the h2 and p tags in content areas:

.content {

  & > h2 {
    font-family: 'GreycliffCF', Arial;
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.25em;
    margin-bottom: 0.5em;
    margin-top: 2em;
  }
  
  & > p {
    font-family: 'GreycliffCF', Arial;
    font-weight: 500;
    font-size: var(--step-0);
    line-height: 1.5em;
    margin-bottom: 1.5em;
  }
  
}

I've also added some nice typefaces and a simple layout so that text and content isn't as wide as can be.

I'm very satisfied with using the dynamic type scaling for kow.fm. So satisfied that I'm porting the whole thing to another project and doing even more crazy ambitious cool stuff.

What's next?

I'll be refining the typography, and some more type details and colors on the site next. Later I'll tacker header and footer stuff.