Free alternative to Operator Mono Italic Theme for VSCode

[mikaelbr]

Update: Solved by @kencrocken

Mashed two fonts together to get an Open Source variant of Operator Mono - https://github.com/kencrocken/FiraCodeiScript.

---

Project description

Operator Mono + Italic keywords in Atom has become a fairly popular combination, but for many the Operator Mono is quite expensive. But luckily, there are open and free alternatives we can use, but as of yet there aren't any ways to do this in Visual Studio Code (as far as I know. Hopefully, if there are, anyone let me know). We can fix this, though.

By combining the guide An alternative to Operator Mono font by Matthew McFarland and something like the Oceanic Next Italic theme it could work seamlessly (I hope).

Relevant Technology

Visual Studio Code, Atom, Syntax highlighting, tmTheme.

Who is this for

People who want to create and publish their own editor theme as free alternative and get a cool syntax highlight in the process. Should be fairly straight forward to copy/fork existing code and just use free font alternatives.

[TimoStaudinger]

I have been working on a Theme based on One Dark with italic highlights instead of Oceanic Next, as I like the colors better. I use it with Operator Mono in Atom, and it works perfectly so far.

Adapting it to use a combination of Fira Code and flottflott shouldn't be more complicated than to hard-code flottflott into the stylesheet and set Fira Code as Font Family in the settings.

The only issue I see is that flottflott is not a monospace font. So far, I wasn't able to find a nice monospace cursive font that could adequately replace Operator Mono's italics.

[mikaelbr]

Cool. Couldn't you have both Operator Mono and Fira Code in the font-family? Making it Operator Mono for those who have that but for those who don't it fallbacks gracefully.

.regularStyleHere {
  font-family: "Operator Mono", "Fira Code", <UserSpecified>, Courier, monospace;
}
.italicStyleHere {
  font-family: "Operator Mono", "flottflott", <UserSpecified>, Courier, monospace;
}

[TimoStaudinger]

Yes, of course. Thing is, according to the Atom guys it is best practice not to specify the font family in the stylesheet at all.

The simple reason for this is that Atom allows you to specify the font family in the Settings:

By overriding this setting in the stylesheet, you basically break this option. Unfortunately, it is currently not possible to specify different different font families in the settings for italic/regular code without editing the user's style sheet.

I'm not sure how much of this also applies to VS Code.

---

I was considering to create a font mashup between Fira Code and a nice cursive monospace font, i.e. adding cursive italics to Fira Code and bundling it as a single TTF file. Both Fira Code and flottflott are licensed under the OFL, which would likely allow that. But then again, flottflott is not monospace, which kind of sucks for programming...

[mikaelbr]

That's why I added <UserSpecified> to the font-family property so it wouldn't entierly break the behaviour. But it would change the precedence and might be surprising for some, but it can be clearly stated as a part of the README (and it's kind of the point of the theme).

I'm trying to find any other monospace signature style fonts now, but no luck for now.

[TimoStaudinger]

Not sure if it is possible to reference the user specified font family from the LESS style sheet. Do you have any references on how this could work?

[mikaelbr]

No, probably not. But depending on whether or not it should be supported it might be possible to make it as a plugin instead. But maybe that's too much?

[rozzzly]

_{( psssst... there totally isn't a torrent out there which can easily be found via google )}

[mikaelbr]

@rozzzly I think this initiative which is all about Open Source, and respecting each others intellectual rights, shouldn't encourage pirating or breaking of licenses.

[mikaelbr]

@TimoSta I marked this as joined. Would be cool if you keep us updated if you make an open source alternative with a free font and link to it here.

[TimoStaudinger]

Will do. I'm currently experimenting with monospacing a non-mono script font. It's surprisingly hard to make it not look terrible.

[mikaelbr]

Interesting! One step better than a open source theme: an open source alternative to the font it self!

[mikewheaton]

I find Flottflott very difficult to read, and with it not being monospaced I'm surprised to see it recommended for use in code. What a mess.

You'd think there would be monospaced script/cursive fonts out there, as apparently they used to make them for typewriters. I haven't had any luck finding one. The only free monospace font I've found with a decent italic (curved characters, not just slanted) is Ubuntu Mono:

Not as much character as Operator Mono, but I find it more readable. Here it is in VS Code alongside Fira Code, which provides ligatures:

For anyone who wants to give this a try, I've used the Custom CSS and JS extension for VS Code with this CSS:

.comment,
.attribute-name,
.this,
.decorator,
.key:not(.punctuation),
.property-name {
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-size: 1.2em; // Lines up perfectly with Fira Code
}

[mikaelbr]

Agreed. I did some research earlier also, and couldn't really find a monospaced italic font similar to that of Operator Mono. I've been using Fira Code without a special font for italic views and It looks fine, I think.

Example:

[mikewheaton]

I'm going to try the italic for a while and see if it helps with readability, or is just noise. 😄

[fajaryanw]

@mikewheaton after follow your guide with Custom CSS and JS extension

I got this in VS Code: Warn Your Code installation appears to be corrupt. Please reinstall.

The italic font still use Fira Code. this is no change apperance to Ubuntu Mono. any ideas?

[mikewheaton]

@fajaryanw: I've seen that warning too, although it went away after a while. So far everything is working just fine so I suspect it's a false alarm.

If you go to user settings, do you have this setting? (updated to your path, of course)

If so, the next thing you can try is to bring up the command palette and run "Update Custom CSS and JS". That should refresh the styles.

If it's still not working, try going to "Toggle Developer Tools" in the menu and inspect the elements to see if the CSS styles are possibly being overridden by another theme or something.

[fajaryanw]

@mikewheaton : Oh yeah ! I only missed one slash / to fix this all.

Thanks a lot :)

[m5lil]

My terminal Thank you :+1:

[fajaryanw]

@mikewheaton : after update VS Code version 1.9.0, the custom doesn't work anymore. The font still use Fira Code. no change apperance to Ubuntu Mono Italic. Do you experience the same thing ?

[mikewheaton]

@fajaryanw: Yes, it looks like the Custom CSS and JS loader extension is not working anymore. I've opened an issue here: https://github.com/be5invis/vscode-custom-css/issues/8

[robmcguinness]

Custom CSS and JS loader does appear to work with the CSS below. Maybe the CSS class names changed between releases? I dismissed the corrupt code warning as well.

/* keywords */
.vs-dark .mtk15 {
  font-family: 'Operator Mono';
  font-size: 1.02em;
  font-style: italic;
}

/* attributes */
.vs-dark .mtk5 {
  font-family: 'Operator Mono';
  font-size: 1.02em;
  font-style: italic;
}

[khyamay]

can confirm @robmcguinness is right, it is working albeit with warning for corrupted code

[nemoDreamer]

I use a combination of Fira Code and "Space Mono":

It took some wiggling w/ letter-spacing to get both mono-spacings to match up.

[robinpokorny]

@nemoDreamer That looks really nice, good combination. Could you share the setting?

[nemoDreamer]

With pleasure, @robinpokorny!

It's for Atom, not VSCode, but should be adaptable: https://gist.github.com/nemoDreamer/f40be00da6707ee9f3b171144690f94f

(There's also "a Fantasque Sans Mono Italic" variation in there, if you toggle the comments, but I ended up going with something more subtle.)

[klippx]

Hello all,

Maybe people here would be interested in my project: https://github.com/klippx/operator-mono-atom

Feel free to visit and check out the screenshots.

Chiming in on the FlottFlott discussion, I agree it is a huge deal that it is not monospaced and personally I use it turned off. I have been looking for a good replacement for FlottFlott for a long time, and I will definately check out Ubuntu Mono as suggested by @mikewheaton

Edit: Checked it out and I think it is a bit too similar looking to Fira Code itself:

Still looking for a good replacement for the FlottFlott... 🐰

[Moulick]

Anyone has an updated config on how to use Fira Code with Operator Mono in VScode?

[AllyMurray]

I would also be interested to know if anyone currently has this working. I tried but couldn't get it to work.

[jonesmac]

So I added the Flott Font as the italic variant in the Fira Code font family. The result isn't perfect, but it works nicely with the Oceanic Next Italic theme.

You can hack it yourself like I did by using font forge and a helpful tutorial to up the default scaling and playing with the weight at larger scales.

Here's the italic variant I added and used in the screenshot - FireCode-Italic

[kiliman]

If you already have the Operator Mono font, I created a project that will add custom ligatures to it, including italic ligatures.

https://github.com/kiliman/operator-mono-lig

[barryblando]

@kiliman Nice. Thanks. 👍

[kencrocken]

As an alternative to the Operator Mono font, I found Script12 BT. In VSCode, as of right now, I use a theme designed for use with Operator Mono or something that uses Italics (I am currently using the One Dark Italic theme); then, with the Custom JS and CSS plugin, I have:

/* Set italics and comments to the script font */
.mtki, .mtk5 {
    font-family: "Script12 BT";
    font-size: 1em;
    font-style: normal;
}

My base font is set to FiraCode; works out well ...

[nemoDreamer]

Awesome find, @kencrocken !! That's very close to OperatorMono! ❤️

[kencrocken]

@nemoDreamer Thanks. Once I get some time I think I will do what @jonesmac recommended and add Script12 as FiraCode's italic face ...

[agolomoodysaada]

@kencrocken can we do a version with Dancing Script font? Only thing is, I don't think it's monospaced 😢

[kencrocken]

I mashed up Fira Code and Script12 - adding Script12 as the italic typeface of Fira Code. I adjusted the size and y-axis a bit to get things to line up ... appears workable to my eye.

I use VSCode ... I installed the new font family on my system, then set the font in the editor to Fira Code iScript. The above screen cap is from VSCode, using the One Dark Italic theme.

You can see you do lose the ligatures with italics, see the comments in the html ... I can live with that.

https://github.com/kencrocken/FiraCodeiScript

[klippx]

Nice try @kencrocken. But... I tried your font, and the fact that it is not monospaced is a huge deal breaker. I will stick with same setup as @nemoDreamer suggested consisting of Fira Code + Space Mono

[kencrocken]

@klippx Sorry it didn't work. But, for the record, the fonts I used are monospaced

[klippx]

@kencrocken the problem I had was that it is not monospaced in the sense that each character occupies the same pixel width space as Fira Code does:

Fira Code

Fira Code iScript

Fira Code + Space Mono

But after messing around a bit with font size, I got this result:

Thanks for posting, it looks quite promising now.

[kencrocken]

@klippx That's a good point ... while both fonts are monospaced, the character width of Fira Code and Script12 are not the same. Thanks for the heads up ... I ran into this also, I like to align my code and it gets little funky since the font widths aren't the same ...

[klippx]

@kencrocken I am running Script12 BT + Fira Code now to have more control over each individual font, but try this CSS for the parts which are italic - it might work for you as well but you need to fine tune font-size when you use your bundled version of Fira Code iScript:

My base font: Fira Code

  .syntax--variable.syntax--language.syntax--this,
  .syntax--html > .syntax--attribute-name,
  .syntax--JSXAttrs > .syntax--attribute-name,
  .syntax--storage.syntax--type.syntax--js:not(.syntax--function):not(.syntax--arrow),
  .syntax--constant.syntax--language.syntax--undefined.syntax--js,
  .syntax--keyword.syntax--control.syntax--flow.syntax--js,
  .syntax--comment {
    vertical-align: baseline;
    font-family: 'Script12 BT';
    font-size: 120%;
    height: inherit;
    line-height: 100%;
  }

Side by side comparison:

Let me know if this helped!

[klippx]

I updated my repo https://github.com/klippx/operator-mono-atom with Script12 BT

Shout out to @kencrocken in the readme ❤️

[sygint]

Instead of font-size, you might try letter-spacing, then you can keep the fonts the same size :) hope that helps!

On Tue, Sep 26, 2017, 5:39 AM Mathias Klippinge notifications@github.com wrote:

@kencrocken https://github.com/kencrocken the problem I had was that it is not monospaced in the sense that each character occupies the same pixel width space as Fira Code does:

Fira Code [image: screen shot 2017-09-26 at 14 32 10] https://user-images.githubusercontent.com/2785359/30860482-8637f580-a2c7-11e7-91e3-7ab824999f09.png

Fira Code iScript [image: screen shot 2017-09-26 at 14 31 43] https://user-images.githubusercontent.com/2785359/30860501-92ba6afe-a2c7-11e7-8b0a-2bed98b89e7d.png

Fira Code + Space Mono

[image: screen shot 2017-09-26 at 14 34 15] https://user-images.githubusercontent.com/2785359/30860564-d25aab88-a2c7-11e7-97f4-ce67483c4f5a.png

But after messing around a bit with font size, I got this result: [image: screen shot 2017-09-26 at 14 37 31] https://user-images.githubusercontent.com/2785359/30860707-5752ab9c-a2c8-11e7-9c66-80fd94eaaa7a.png

Thanks for posting, it looks quite promising now.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-332184969, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1QuRoCdBScwtpThj-aSVl8fu2dfP0Tks5smPCGgaJpZM4KYfiQ .

[klippx]

@gnarmedia Hmm, how do you mean? I tried to comment font-size and control it via letter-spacing, and found that letter-spacing around ~1.44px made it look kind of OK, but not really. It was hard to control and the Script12 BT font was in general too small so it kind of needs a height boost as well not only letter-spacing.

Maybe I am not doing it right, but I couldn't make it work in a satisfying manner.

[nemoDreamer]

@klippx : I've been rocking @kencrocken 's Script12 BT suggestion with letter-spacing: .1em, and it matches up to FiraCode width perfectly now. (sadly, that of course gets rid of the ligatures and connections in the cursive script...)

I do like your font-size suggestion, as that'll keep the cursive stuck together as it should be, and will make it a bit more visible, since it's "x" height is smaller than that of FiraCode.

Tip: the way I got to .1em was by creating 2 long lines of identical characters, but tht would split between fonts differently:

const bogus = {
  abfdefghijklmnopqrstuvwxyzABFDEFGHIJKLMNOPQRSTUVWXYZabfdefghijklmnopqrstuvwxyz: 'ABFDEFGHIJKLMNOPQRSTUVWXYZ',
  abfdefghijklmnopqrstuvwxyz: 'ABFDEFGHIJKLMNOPQRSTUVWXYZabfdefghijklmnopqrstuvwxyzABFDEFGHIJKLMNOPQRSTUVWXYZ',
}

My current Atom setup: (I keep the other fonts around in case I get "cursive fatigue" 😜 )

.syntax--punctuation.syntax--whitespace.syntax--comment.syntax--leading,
.syntax--source {
    font-family: FiraCode-Retina; // https://github.com/tonsky/FiraCode
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
    line-height: 1;
    font-size: 1em;
}

.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
    -webkit-font-feature-settings: 'liga' off, 'calt' off;
}

.syntax--source.syntax--js.syntax--jsx > .keyword.control.flow.jsx, .syntax--comment, .syntax--type .syntax--function,
.syntax--constant.syntax--other.syntax--object.syntax--key,
.syntax--entity.syntax--other.syntax--attribute-name.syntax--jsx,
.syntax--keyword.syntax--control.syntax--flow,
.syntax--keyword.syntax--control.syntax--module,
.syntax--storage.syntax--modifier {
    // --- font variations:
    // Space Mono:
    // https://fonts.google.com/specimen/Space+Mono
    // font-family: SpaceMonoNerdFontCM-Italic;
    // letter-spacing: -0.01em; // make "Space Mono" match "Fira Code" char width
    // --- or
    // Fantasque Sans Mono:
    // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/FantasqueSansMono/Italic
    // font-family: FantasqueSansMonoNerdFontCM-Italic;
    // letter-spacing: 0.0825em; // make "Fantasque Sans Mono" match "Fira Code" char width
    // --- or
    // Script12 BT:
    font-family: "Script12 BT";
    letter-spacing: .1em; // make "Script12 BT" match "Fira Code" char width
    // ---
}

[nemoDreamer]

@klippx , if using font-size, you'll need to adjust your line-height to compensate, then you won't have to use "baseline" and "height" to fix anything.

The formula is 100 / <font-size> * 100:

Or, if using non-percentage line-heights:

font-family: "Script12 BT";
@font-size: 120%; 
font-size: @font-size;
line-height: (100 / @font-size);

I find the size of the cursive a bit overbearing now... Maybe a combination of font-size and letter-spacing...?

Aaaanyway... Back to work! 😆

[sygint]

Well, it can totally be a combination of the two: font-size to get the letters the right size/height and then letter-spacing to get the spacing right.

On Thu, Sep 28, 2017, 12:06 AM Mathias Klippinge notifications@github.com wrote:

@gnarmedia https://github.com/gnarmedia Hmm, how do you mean? I tried to comment font-size and control it via letter-spacing, and found that letter-spacing around ~1.44px made it look kind of OK, but not really. It was hard to control and the Script12 BT font was in general too small so it kind of needs a height boost as well not only letter-spacing.

Maybe I am not doing it right, but I couldn't make it work in a satisfying manner.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-332747532, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1Quf6LHRSs0sfu3kl7E6wS1bmztvj4ks5sm0VegaJpZM4KYfiQ .

[nemoDreamer]

Yup, @gnarmedia, this combo works:

font-family: "Script12 BT";
@font-size: 110%;
font-size: @font-size;
line-height: (100 / @font-size);
letter-spacing: .0455em;

But in the end, I went back to good ol' letter-spacing: .1em;... The different "x" heights somehow felt more "natural".

[talon-himself]

@nemoDreamer would you be able to provide the settings for VSCode?

[nemoDreamer]

@t-hughes I don't have VSCode (this thread/issue mixed up answers for lots of editors, I guess), but I think you should be able to adapt my Atom stylesheet.less to fit @mikewheaton 's pasted format in https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-272638529 ?

NOTE: if VCode stylesheet doesn't support less / sass / CSS variables, just resolve the math for your font-size percentage.

Or, since I think it's nicer without the font-size bump up:

.comment,
.attribute-name,
.this,
.decorator,
.key:not(.punctuation),
.property-name {
  font-family: "Script12 BT";
  letter-spacing: .1em;
}