Web typography is confusing. Do you know the best practices?

When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

…if you can remember how to use it

If you’re like me you’ve played around with the Flexbox Froggy and forgotten most of it shortly after. When the perfect flexbox situation arises I go straight to the CSS Tricks Complete Flexbox Guide to try to decipher what the properties mean. I have yet to meet a developer that doesn’t open up that guide when trying to wrangle a complex flexbox layout. At Pivotal we started to use flexbox for content and layout but most of it was written off-the-cuff for single instances. …

The 8-point grid is a powerful system for creating consistent and visually appealing user interfaces (UIs). This post is about how to establish vertical rhythm and set typography in an 8pt grid system. To get caught up, check out The Intro to 8-Point Grid Systems and get tricky with 8-Point Grid: Borders and Layouts.

What is vertical rhythm and why is it so important?

Rhythm is achieved when the elements of your design are organized into repeatable patterns. This allows your final design to look deliberate, professional, and consistent.

Advice I wish I had received earlier in my career.

I moved to San Francisco in 2013 as a junior designer with only a few years of experience and a desire to dive into the deep end of design. While I have experienced a lot over the past 4 years — and I still have even more to learn as a designer and a professional — I decided to take note of some of the biggest lessons that I wish I could have told my younger self when I first moved to SF.

Find mentors for everything

The ultimate mentor to teach you everything you need for a successful career is pretty rare. When…

In my first post about The Intro to 8-Point Grid System I laid out the key reasons to convert your workflow. This is a deep dive into some of the tricky questions I’ve had to answer while moving our design system at Pivotal Cloud Foundry towards the 8pt system.

How do I count borders in the 8pt grid system?

This question will come up with a wide variety of UI elements but let’s use buttons as an example. You’ve got an auto width button meaning the content determines its width and you’ve decided to add an 8px padding on the left and right of it. Your current brand style calls…

The push for SVG icons over font icons has caught serious momentum in the web community. With an SVG icon system you can better meet accessibility standards, render higher quality visuals, and add/remove/modify icons in the library with ease. At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.

Why should I care about how SVGs are styled?

If you’ve ever used font icon systems like Font Awesome you know how easy it is to add to a project and…

As a designer you’ve probably heard the term grid whether you’re designing a website, a magazine, or a mobile app. We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids to describe how strictly we adhere to them. I took interest in the 8pt grid system after hearing Bryn Jackson avidly talk about it. I decided to find out what, if any, benefits an 8pt system could give my designs.

What’s the problem? I’ve gotten this far without using the 8pt system.

I’ve used design systems like Bootstrap or Foundation to jumpstart…

Elliot Dahl

San Francisco based artist and designer. http://elliotdahl.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store