Skip to main content

Operator Mono and why I want italics in my code editor

Posted in Design and Development

I’ve been thinking a fair bit about my coding environment lately. I even moved to VSCode again, briefly. Why? Well, I have a series of bite-sized videos on HTML fundamentals ready to record for my YouTube channel and I want to make sure they look great.

I know my videos won’t be all-singing, all-dancing right out of the gates—recording video like this is new to me and I’ll get better at it over time—but I always enjoy tutorials that pay attention to details like the typeface they use. Operator Mono has long been a favourite typeface of mine and would help my tutorials stand out – it has tonnes of character, and that’s before we even get to the italics!

Italics in code

Some text editor colour schemes (colour themes? syntax themes?) use italics for certain chunks of code, like comments, variables in JavaScript, HTML attribute names, and class selectors in CSS.

I was using Fira Mono for a long time and it doesn’t have an italic weight, just Regular, Medium and Bold. This means that colour schemes with italics use ‘Faux Italics’ when there isn’t a proper italic weight to use. Doesn’t look great.

Operator Mono not only has italic variants, but they’re cursive! The looping ls and fs, and fancy rs and ss highlight those key bits of code perfectly. So much so, in fact, that after only a couple of weeks, switching to another typeface without the fancy italics feels boring.

They also serve a practical purpose. It seems contradictory, but because the italics are so distinctive, those key words and phrases are both easily identifiable, should you need to pick them out quickly, and allow the eye to glance past them effortlessly, should you need to focus on other parts of the code. Code becomes that wee bit easier to read.

Getting them working in your text editor

It’s worth noting that for the italics to work in your text editor of choice, the colour scheme you use has to support italics. So it won’t work for every colour scheme.

After lot of searching and trial and error, I’ve found a great colour scheme: Monokai Pro. It’s a paid-for extension, which is unusual, but I think it’s worth the €9.95 outlay.

Not cheap

Speaking of spending money, at $200 Operator Mono itself isn’t cheap. It comes in 5 weights: Extra Light, Light, Book, Medium and Bold, each with an italic variant. So $20 per font, if you want to look at it that way.

But I’ve had my eye on it for a long time and, because I’m nearly ready to hit record on the YouTube tutorials I’ve been preparing, I finally decided to take the plunge.

Not only will the code in my screen-casts look eye-catching, but my day-to-day coding environment now feels a lot more lively!

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.