Designing With Type: My 5-Step Loop

Functionally, websites are mostly linked pages of text arranged in decorated boxes. This means, as a designer, about 90% of my creative output hinges on my effective use of typography. 

Making text look good is more than half my job. I’ve been doing this for years, and it STILL scares me. It’s like a Michelin-starred chef being scared of butter. But thanks to my love of typography, and years of experience stumbling through the design darkness, I’ve found a way to put together type-centric websites that don’t get me fired. I don’t consider my way to be gospel, and I won’t sermonize about it from the mount in a turtleneck and horn-rimmed glasses. Rather, I’ll simply share how I approach a still-unfamiliar discipline and produce work that I, at the very least, am happy with. 

I’d call it my Five Steps of Type Design, but the process is so iterative and revisions are so constant, I prefer to think of it as a loop repeated over the course of a project rather than a checklist. In my opinion, 99% of good design is built upon real-life human relationships that grow and change over time. Therefore, this is an iterative process to be tailored to each client and evolved organically.

I recently had a chance to use this system with a client of ours, Lowercarbon Capital. Lowercarbon is a venture capital fund founded by billionaire and ex–Shark Tank judge Chris Sacca. Its mission is to enable tech startups that fight climate change.

As an offshoot of Chris’s flagship fund, Lowercase Capital, Lowercarbon asked us to expand their existing branding to complement a cutting-edge, tech-focused climate initiative. The challenge quickly became clear: Lowercase’s existing branding was effective, but for conveying a very different tone for a very different company. 

A big part of this challenge was typography: Lowercase’s charm, for me, is that it’s this incredibly successful fund that’s generated billions of dollars of value, but its branding is warm and friendly with a distinctly homespun, turn-of-the-century American attitude. It’s disarming, inviting, and lets you know that this enterprise is run by real people with a sense of humor and wit.

Lowercarbon, in many ways, is an evolution of this ethos. But whereas Lowercase funded many different types of companies, Lowercarbon would be laser-targeted to a very climate-conscious, tech-savvy slice of the venture capital pie. We needed to bring an attitude that was contemporary, modern, and eco-friendly but felt congruent and respectful when seen alongside Lowercase.

We quickly realized we would need to achieve these goals largely through type. Lowercarbon’s portfolio was full of fresh startups that weren’t interested in paying thousands of dollars for flashy imagery and branding. We were looking at a website that would employ typography to establish a clear mood, evolve the client’s existing branding, and attractively showcase a growing portfolio of budding talent.

Enter the type loop!

Step 1: Understand your client’s needs and clarify goals

A shallow client relationship produces shallow design decisions. Typefaces are so saturated with meaning, intent, and association, you really can’t afford to wing it on ignorance. You want to be able to write out the adjectives and goals associated with your project and explain how your type choices address and further both. 

We immediately made it a priority to understand Lowercarbon’s context, how they wanted to be perceived, and the kinds of user actions they wanted to drive. Building on these leads, we used style tiles to explore three distinct directions we could potentially expand Lowercarbon’s branding.

Style #1: Lowercarbon Textbook — a quirky academic treatment that made liberal use of heavier font weights.

Style #2: Lowercarbon Terminal — a monospace-heavy “dark mode” inspired by ’80s computer dashboards and IBM Selectric typewriters.

Style #3: Lowercarbon Tables — a crisp, structured approach that abstracted and cleaned up the ethos of type-dense turn-of-the-century advertising posters.

Our findings were invaluable, and Lowercarbon Tables quickly rose to the top of the pack for its generous use of white space and “clean” layout. But Textbook’s bold headlines struck a chord, and we cherry-picked Terminal’s endearingly nerdy typewriter monospace for its attitude and style. Now we had explicit adjectives to work within: clean, crisp, structured, and light but with an undertone of charming, professional nerdiness. It was time to pick the actual fonts.

Step 2: Sort your type toolbox

OK, this is the hard part. This is where you have to take those goals you established in Step 1 and actually create a tentative roster of fonts that not only respect your goals but also play together effortlessly. There’s no gentle way to do this. You have to stress-test the hell out of all your font candidates and mercilessly prune your options until you’re convinced you have a (reasonably) airtight justification for all of them and how each will be used.

This is one area where I initially defer to the experts. Typewolf.com is a fantastic resource for font exploration and pairing, and I recommend that you check it out if you’re at all interested in doing a type deep dive. Other guides I turn to include Dribbble, Awwwards, Pinterest, and Bethany Heck’s Font Review Journal. There’s no shortage of font recommendations and references out there. Explore how expert designers have solved these problems in the past, and see if you can build upon, subvert, and recontextualize their solutions.

When you’ve chosen a few fonts, stress-test them. How do they perform as small body copy? What about enormous headlines? Are they attractive when set in brand colors, or do they feel uncomfortable and harsh? Try pushing the font size, weight, color, tracking, and leading in both directions until they “break,” then see if they play well together in their “good” ranges. This will quickly define limits and produce happy accidents. Have fun with it!

And after all that, even if your typefaces are structurally sound, you still have to consider whether they strike the right tone and context for your overall project. Case in point: Franklin Gothic works just as well with Clarendon as Trade Gothic, but Franklin has much stronger historical roots with a very humanist construction, while Trade is more precise, technical, and contemporary. Trade Gothic won in large part because Lowercarbon was going for a technical, contemporary evolution of their brand, and Franklin was a little too rough around the edges to meet that goal. 

Measure twice, cut once. This is an important step, and you’ll be setting expectations and opinions when people see the results. Once the client sees your choices, they quickly begin to set in stone.

Step 3: Assign a clear role for every typeface and font

Now that you have an ensemble of typefaces that you’re 80% sure won’t be drastically altered over the course of the project (find some wood and knock on it), you need to pick a job for each typeface — and stick to it.

By “job,” I mean you need to assign a clear function, purpose, and “role” for each font. Think like a play director. You can’t ask one actor to do two parts at the same time. Which font will be your bold, attention-getting headliner? What will be the unsung body-copy workhorse that ties everything together? What will add pizazz and personality when you need a little spice, without overpowering the layout? Here’s how this worked on the Lowercarbon project.

At this point, we had four fonts: Clarendon Wide, Trade Gothic, Adobe Garamond Pro, and Roboto Mono. Garamond and Clarendon were Lowercase brand mainstays. Trade and Roboto were the new kids in town. 

Garamond: The Reliable Veteran

Garamond was Lowercase’s existing choice for body copy, and it excelled in that role on Lowercarbon — very readable, gentle on the eyes, and hits the 77–100 character-per-line sweet spot at relatively large font sizes. Perfect! Besides not fixing something that ain’t broke, copying Garamond’s role across sister sites helps maintain brand connection between the two and make Lowercarbon feel familiar.

Clarendon Wide: The Modest Showboat

Clarendon is a slab serif from 1845, commonly used on wanted posters from the Old West. With its thin strokes and surprisingly delicate serifs, it quickly breaks down at smaller sizes on a standard retina screen. Per the name, its wide-open forms make it unaccommodating for body headlines, and at smaller sizes it surprisingly “blurs” with the Garamond body copy. But when you set it at a large size and turn the weight down, those horsey and anachronistic forms become shockingly clean, crisp, and respectful on a retina screen. Even though Clarendon is already used for headlines on Lowercase, setting it this large on Lowercarbon gives it a distinct flavor. It’s like it’s saying, Yeah, I might be a little folksy, but I clean up real well.

As a counterpoint, Garamond at large sizes draws way too much attention to its handmade, humanist roots. Suddenly you realize this is basically a 16th-century typeface, and things get downright medieval. No Garamond headlines! If the entire site were Clarendon and Garamond, it would be really hard to sell the viewer on the idea that this is supposed to be a cutting-edge VC tech fund.

Trade Gothic: The Humble Diplomat

Time to get futuristic. Polite, structured, and highly optimized for screens, yet injected with lots of little quirks (the quietly varied stroke widths, angled apertures, and two-story lowercase a stand out to me, in particular), Trade Gothic is the perfect bridge between old and new. It looks confident but not overpowering when set in bold, and technical and clean in regular all-caps. And when you give it a little negative tracking, it catches a bit of Clarendon’s old-timey charm. Without Trade’s flexibility and accommodation in our toolkit, I don’t think this design would have worked as is.

Roboto Mono: The Reserved Nerd

And finally, we round it all out. Roboto was a perfect accent font for this project. Surprisingly dense for a monospace, its narrower forms mimic Trade’s, while generous usage of serifs echoes the typewriter feel we wanted and sneakily rhymes with Clarendon’s slab-serif panache. I like to think of this kind of font as a spice: You want to add only a pinch of it at the end of the cooking process.

Assigning these personalities to fonts can seem esoteric, but the exercise actually makes it easier to roll with the punches if you have to adjust course mid-project. For example, if Lowercarbon had felt that Roboto Mono was too sterile and wanted to use, say, Courier for its obvious typewriter forms, the fact that we assigned Roboto Mono as our “spicy annotations and tablature” font means Courier would have less of a risk of confusing the layout if we swapped it in.

The name of the game is having a clear intent and an almost fanatical consistency. Stick to your guns! Even if you only have a single typeface to work with, breaking it into different size, weight, tracking, caps, and italic combinations will give you more than enough material for a simple palette. And when you use this palette, your consistency and thoughtfulness will let the viewer know that, yeah, a human actually designed this, and they took the time to arrange it with care.

Step 4: Dive into arrangement and layout

Now that we have our fonts, and we know how we want to use them, we actually use them. To be clear, you should have been testing these fonts with brand colors, likely column sizes, existing visual accents, etc., but now you really need to dive in and figure out how they’ll work in practice. 

Maybe you realize that Clarendon needs to be reduced in size by 8px or so. Maybe you find out that Garamond in regular italic works really well as a subtle subheader. Maybe you find that Trade Gothic feels a little too timid next to photography, so you bump the font size up a couple of pixels and remind yourself to give it more padding and spacing. You shouldn’t be rewriting the playbook at this point, but you will be codifying your type choices into clear, CSS-ready systems. Your unique contribution as a designer will be to codify abstract client interests and feelings into functional systems that a developer can understand and implement.

Step 5: Keep the entire loop in mind and run through it repeatedly

You might think Step 5 is the end, but if you’re doing this right, you’re maybe 20% done at best. Now that you have stated your goals, picked your fonts, assigned your roles, and begun establishing real-world rules and arrangements, you’re in a fantastic place to, well, actually build the website.

This can be frustrating. It can feel like we spent all this work prepping at base camp and the actual mountain is staring us in the face. But preparation will make or break even the most exciting of projects. The final 10% of a design is always the hardest for me. It’s when the client has last-minute requests, new photography starts coming in, copy changes start testing your layout, and you discover weird functional edge cases that require unique type treatments. 

If you’ve been able to take the time to understand, plan, and prepare a system, then I promise that system will make any 11th-hour heartaches a million times less stressful. And until you reach that hour, you’ll want to be looping through this system as many times as possible, and keeping every step and consideration in mind as you go.

A few final tips

Determining typography is hard, and the harder you try to bend it to your will, the more it will flummox you. Instead, think of it as as perpetual work-in-progress: 

• Try not to get overwhelmed. You will murder lots of darlings and shelve lots of exciting ideas as your design becomes a reality. Every step of the process will clarify previous steps, and vice versa.
• Get to 80% certainty and start building. This hurts, but it will produce a richer and more considered design system than feeling constrained by a “perfect” system out of the gate.
• Try not to lose the character and charm of your early goals and choices. This is huge. Push back against the natural pressures of layout and functionality, especially when you’re down to the wire and everyone just wants this thing to ship. The client didn’t hire you to be a robot.

Just because type is scary doesn’t mean you can’t enjoy it. Lowercarbon came to us because they wanted a distinctive design that gives them the tools to tell an urgent story in their own distinctive voice. And because of their generosity and trust, we were able to meet those goals with a design that’s largely driven by type.

It’s a cool feeling to be able to look back at the system we built, and see how all of the conversations, iterations, passes, and loops culminated in a design that feels distinctly Lowercarbon in a way that you couldn’t achieve with a premade template.

And now it’s on to the next one. No two projects are alike, and no two clients want the same things or work the same way. But if you can take the time to plan, clarify your intent, and stay flexible as you navigate the weird, wild, incredibly complex world of type, I promise you’ll have way more fun doing it.

Patrick Delaney (he/him) is a Product Designer at Postlight. Want to talk about your design challenge? Drop him a note: hello@postlight.com.

Work for Postlight! Love making exceptional digital products? We’re hiring engineers, PMs, designers, and strategists. Let’s grow together. See openings.