Fonts
-
Except for the color font. That’s a Patron exclusive. ↩︎
-
The print designer in me would like to acknowledge that I’d likely need to use two hits of white on dark paper to get this effect. Meaning that it would likely need to be a three-color job. I’m ignoring that inconvenient truth. ↩︎
-
Or, you know, not having a “light mode” version… ↩︎
-
I did choose to buy a domain name. ↩︎
-
The last time I built a site by hand, tables were an acceptable construction method. ↩︎
Return to Fontstruct
About 16 years ago, I started playing around with Fontstruct, an online tool for crafting modular typefaces. I’ve released 48 designs on Fontstruct and some of those have served as prototypes for designs that I finish in Glyphs, my favorite type design app. I tend to work in Fontstruct intensively for a while, and then disappear for a year or more. But I love the tool and contribute as a “Patron.”
Lately, I’ve been on quite the streak.
SbB Papaya. I was watching F1 and McLaren uses some modular numerals on their cars. Based on those numbers, I built an entire design. I wasn’t sure if the look was going to extend through the whole character set, but the design actually works pretty well. And as a bonus, the Fontstruct team selected it as a top pick.
SbB Powercore. I’ve had some drawings in my sketchbook of a unicase design that I like a lot, but haven’t gotten around to building. I wanted to see how the letterforms would work together so I built a quick pixel-font prototype.
SbB Astrometric. I took the basic letterform structure of Powercore and tried different approach. I thought this would look vaguely sci-fi when I started to build it, but as I built out the character set, it had a somewhat older feel. Not sure why. I’m really happy with it and this is one of those fonts that I’ll likely rebuild and polish in Glyphs. I think the design would work well as a variable font design.
SbB Theorem. I built this a few years ago, and forgot about it. So I dusted it off and added a few additional characters that I skipped over earlier.
SbB Greenlight. All the cool kids are building color fonts on Fontstruct. It’s a feature that’s available for Patrons. I’d played with it once before to add some color to my Dingbots and Monsters design, but I hadn’t tried to build a color typeface. I built SbB Greenlight to experiment with the process of building a color design. I’m still not 100% sure why we need color fonts, but it’s a fun process and a pretty accessible tool for anyone that’s worked with design software like Illustrator or Photoshop that use layers to organize art.
You can download and use any of these1 if you set up a free Fontstruct account. I don’t know if I’ll keep up the pace, but I’m really enjoying building typefaces right now and I’m inspired by the other designers in the Fontstruct community.
Bob Wertz is a type designer, Ph.D. student and researcher living in Columbia, South Carolina. He’s been blogging since 2008.
I missed that Lego released a refined visual identity a couple of weeks ago that includes a new typeface, Lego Typewell, based on brick proportions. I really like it. The best detail I’ve found on the typeface is on this review from BP&O.
SbB Fonts: My new two-color type design site hosted on Micro.Blog
I decided a while back that I wanted to separate my typeface designs onto their own site. They’ve always lived alongside my blog and other creative projects, but they needed a home of their own, especially since I plan to expand the offerings in the near future. I’ve been noodling around with options, but today, I’m finally ready to release SbBFonts.com out into the world with a design inspired by two-color printing.
The Inspiration
When I became a designer in the mid-1990s, the web was just becoming a thing, and printed documents were the primary job of a designer. Two-color projects used only two spot ink colors — say green and black — for the entire job. (You also had a “third” color with the paper, which was usually just white.) Four-color printing or full-color printing was reserved for only the most important pieces with the largest budgets. For young designers in a pre-web world, two-color work paid the bills. Two-color printing presented challenges, but the process had a particular look. Designers who knew what they were doing could use duotones for images or print on colored paper to get a different look.
Two-color printing isn’t dead. Screen printing and letterpress still use spot colors, but full color printing has gotten cheaper and as a society, we don’t print nearly as many marketing materials as we used to. The craft of designing has moved past the lowly two-color press run.
I guess that’s why when I started to design a home for my typeface designs, I knew I wanted the site to resemble a two-color print job. Much of the inspiration for my type designs comes from my nostalgia for old tech. Two-color printing seemed like the perfect inspiration.
The Execution
The first question was what two “ink” colors to use? Since I wanted to use a dark background, I chose white and the bright green since I use that color for all of my Sketchbook B projects. I picked two dark greens to be backgrounds — essentially a dark mode and a darker mode.1 Accommodating the two background colors meant that I also needed to use transparency on all of my example graphics, including my fake “duotones” and my animated GIFs. You can see the example below of one of the images I used placed over white, dark green and darker green backgrounds. I’m happy with the result, even if there are far easier ways to accomplish this look.2
This site is hosted as a “single page” on Micro.Blog. This might be the worst named feature on Micro.Blog since you can absolutely have more than one page. It’s simply a static Hugo site that doesn’t include a blog. I built everything on the Tiny theme by Matt Langford — the same version that I use for bobwertz.com. This feature is included in my Micro.Blog subscription, so my additional cost is essentially nothing.3
To get the look I wanted, I had to write a bunch of HTML and CSS. My old site was on Squarespace, so it has been a while since I worked so closely with markup. I spent a good bit of time digging through reference guides to make sure I was doing everything correctly. But honestly, if you look under the hood, it’s probably a mess. Just a warning.4
I still have a little refinement left, but I’m happy with where the site is. I need to finish proofreading and rework some of the copy. I’m thinking about future development… I’ve got a plan on how to change the home page when I add a few more typefaces. Right now, I think the five fonts currently presented in this way is about the maximum.
Head over to SbB Fonts and let me know what you think.
Bob Wertz is a creative director, type designer, Ph.D. student and researcher living in Columbia, South Carolina.
I love pixel fonts, so I was absolutely delighted with this presentation from Marcin Wichary. Enjoy!
Here’s the other one I’m finishing up: SbB Directorate. Inspired by scifi bureaucracy and named after the government in Buck Rogers. Weight, width and slant axes.
I’ve been working on a couple of variable typeface designs lately. This one is SbB Departure Mono, based on a old Fontstruct design of mine. Two axes: Weight and Slant.
Working on a typeface design tonight and I’m really grateful for the comprehensive documentation available for Glyphs 3. Good user manuals are a lost art, and sometimes, you just need a reference guide to look something up.
15 years of Fontstruct
I realized this morning that I’ve been using Fontstruct for 15 years. Fontstruct is an online tool for building modular typefaces. My first typeface design — Big Thursday — debuted on May 26, 2009. Since then, I’ve publicly released 49 fonts on Fontstruct and 19 have been selected as “Staff Picks.”
The original version didn’t have a lot of flexibility,1 but over time developer Rob Meek has added new brick types, construction methods, kerning, support for color fonts and other features to Fontstruct to make it more powerful. My work tends to be a little brutalist, but if you want to understand the flexibility of the tool, check out the gallery to see what amazing creations people can craft with this online tool.
I don’t use the most complicated features, but I sometimes use Fontstruct to prototype an idea for a new typeface. One of Fontstruct’s best integrations is that I can download a file that I can open and refine in Glyphs.2 I recently created a design, moved it to Glyphs and built a variable font out of it.
Balancing work, family, grad school and other obligations, I don’t have a ton of time to spend in Fontstruct. But when they rolled out the Patron level of support for 5 euro a month, I subscribed immediately. I’m happy to support independent tools that are constantly improving.
I pulled together a sample of some of the designs I’ve created over the years on Fontstruct. Feel free to head over to my page and download anything you like. Or better yet, sign up for an account and start experimenting.
Bob Wertz is a creative director, type designer, Ph.D. student and researcher living in Columbia, South Carolina.
Spent my morning working on some typeface designs in Glyphs. I really enjoy working with fonts, and I have several designs that I’ve started and not finished. I need to prioritize creative time – not just writing, but also sketching and type design.
Finally got around to adding a fonts page to my Micro.Blog site.