Designing with a new typeface

I’ve adopted IBM Plex, a new font for my website and personal branding. It’s an open-source font available for anyone to use without a paid license.

Here are a few instances in which I’m using this typeface.

Logo

I’ve completely redesigned my logo around this typeface, taking advantage of light and heavy weightings, and the generous use of letter spacing (the web equivalent of tracking) to create a distinctive, cinematic-like appearance.

Below is an animated version of the logo, created as the opening title to appear in my forthcoming videos.

Blog

Web designers frequently select two fonts for presentation of blog posts and articles – one for headings and the other for the main body text. The intention is to offer a balance of contrast and complementary styling between the two.

Personally, I prefer to stick to a single font and adjust typeface styling properties to create distinction. In my blog, I simply use a normal weighting for body text and headings, with the latter tightened up just a bit in the letter spacing.

To be honest, I’m good but not completely satisfied with IBM Plex for reading articles. For the blog, I’ve considered shifting to the default operating system font (simple, easy-to-read typeface that will also load super-fast).

Business card

This is actually a work in progress. It’s a screenshot of the layout from Adobe InDesign.

Business card design for Perry Sun, a work in progress

Bonus: code presentations

The IBM Plex typeface collection includes a monospaced font variant that’s especially nice for displaying code. I’ve previously covered the rationale and styling for presenting code on the web.

div.sidebar {
    background-color: var(--blogTextColor);
    border-radius: 3px;
    color: var(--sidebarTextColor);
    padding: var(--sidebarPadding);
    margin-bottom: var(--paragraphSpacing);
}