Ooh, Nice Font!

  • 0

Ooh, Nice Font!

Category : Coding

I’ve been studying React and drooling over the font Dan Abramov and Wes Bos are using in their demos. It’s regular monospaced for most of your code, but the comments are script. Wow.

You can get it here:
Operator Mono

But it’s $199 at the lowest price. I’m not a designer, so ~$200 is too expensive for me.

Use Open Source Fonts Instead

The way to get this ‘dual font’ effect, is to have a different glyph set for the italic version of each character. So, you’ll need a font family with one regular monopsaced font for the regular and bold styles, and a different font for the italics.

Here’s a guy who combines two fonts, but he’s not “combining” them in a way that will work with Sublime. That approach may work for Atom, but I need the fonts in a single file, that I can install as a system font in my OS. Then I’ll be able to enter it in my sublime-settings file like this:

 "font_face": "Ubuntu Flott",

What you’ll need

You’ll need two fonts and a font editing tool. I’m using Ubuntu Mono for the regular code font, and Flottflott, by Peter Wiegel, for the scripted font comments. To combine them, I downloaded FontForge, from a tip on Stack Overflow. Flottflott is not a fixed width font, but it will behave like one when used in this way.

You will also need a theme that shows all the comments in italics. Or better yet, go to http://tmtheme-editor.herokuapp.com and make your own theme, toggling italic style exacltly where you want it!

How to Do it

I extracted the UbuntuMono-R.ttf and the UbuntuMono-B.ttf from the Ubuntu font family download, and the Flottflott.ttf from the Flottflott download, and put these in a folder.

Open one of them in Font Forge, then open the other two from Font Forge’s file menu. You will only see the “Generate TTC” option in the File Menu when you have multiple fonts open in one Font Forge instance. Keep all three open.

Next, for all three font files, you need to open Element > Font Info and set

  • PS Names
    • Fontname
    • Family Name
    • Name For Humans
  • TTF Names
    • Preferred Family
    • Preffered Styles
    • Name For Humans

The family will have to be the same for all three font files, and the style will have to be the appropriate style (regular, italic, or bold).

Then, from the regular font, click Generate TTC in the File menu. Near the bottom of the Generate TTC dialog, you should see check marks next to the other two styles. You’re good to go. Save the .ttc file, and if you’re on Windows, right click the file, then click install to install it.

I named my font Ubuntu Flott, and included it in my sublime settings as shown above.

Adjustments

If it doesn’t look quite right, you can do some changes to the Flottflott glyphs. The first thing you’ll want to do is simplify all the glyphs. This just fixes most of the sizing issues.

  1. CTRL-A Select all the glyphs
  2. CTRL-SHIFT-M Simplify them

I found all the capital letters to be too wide, so I applied a 80% scale transform to each of them, on the x-axis only, with the origin set to “glyph origin”. This was easily accomplished by selecting all the glyphs (characters) I wanted to transform and clinking transform from the right click context menu.

I also applied a ‘move’ transform to shift some of the lower case letters to the right, because their tails were being clipped on the left. I also moved and scaled a lot of other glyphs individually, to get it just right.

What it looks like

Ubuntu Flott in Sublime

Screenshot of Ubuntu Flott in Sublime

That last comment line is supposed to look like:

[{section1: contentTemplateName2}, {section2: contentTemplateName2}, ...]

but the bracket glyphs in Flottflott are all the same.

I’m asking Peter Wiegel if I can share the Ubuntu Flott.ttc font family that I made, if he says yes, I’ll post it up here.


About Author

mcissel

I'm a full stack web developer / software engineer. I can code a Raspberry Pi or a Windows .NET app, but I'm truly at home on the web, in the cloud, the modern JavaScript "wild west". I've been making code look good since Firefox was called Netscape.

Leave a Reply