• Hasklig
• FiraFlott
• Iosevka
• JuliaMono

Not sure if it's a font-feature-settings thing or if we just need to re-make the WOFFs properly or what.

Since the acquisition, this URL redirects to css-tricks.com.

Would you consider rehosting elsewhere?

https://github.com/intel/intel-one-mono

While the Google Fonts-listed version of ‹Courier Prime› typeface is the most popular one, there is actually another official version that is optimized for coding called ‹Courier Prime Code› (screenshot shown below) so perhaps you might want to list that one instead on your microsite. 🙂

I wonder if we could add like a "Special" page in addition to HTML, CSS, and JavaScript.

Based on some feedback:

find some way to show zeros vs. O’s, l’s 1's, =>. To me these are some of the key things I want my font to distinguish.

So this bit of code could have that, and other special typographic situations that are worth highlighting.

This could be the place to draw attention to having or not-having ligatures as well.

11ty goes by the .md file's creation date, which feels a bit arbitrary here. Do we want to enforce alphabetical order? Or maybe arbitrary is fine?

https://github.com/PrismJS/prism-themes is a source

Maybe they should look nicely related to each other? Like Material Light / Material Dark?

You may update the info on the website.

There is a whole big list of fonts (see current README). Each font has a variety of metadata:

• Name
• Designer(s)
• URL to some kind of homepage for it
• Some kind of description maybe?

Then of course the screenshots of the samples.

Seems like a job for Markdown files with Frontmatter and Eleventy to me.

It seems Cloudinary takes a bit to process new screenshots. It took about 7 minutes after merging Cartograph for the URL https://res.cloudinary.com/css-tricks/image/fetch/w_1600,q_auto,f_auto/https://coding-fonts.css-tricks.com/screenshots/cartograph-cf/css-light.png to stop returning a 404.
The simple https://coding-fonts.css-tricks.com/screenshots/cartograph-cf/css-light.png was fine.

This makes me think there should be a fallback for Cloudinary erroring out. Since we already host the originals as part of the site, it makes sense to add a bit of robustness.

Can srcset do this natively? Maybe we need to complicate the onerror listener?

I'm seeing TTFB upwards of 7 seconds. Then all 6 images load at once.

Seems fine on initial load. Could this be a Cloudinary thing? Very weird.

When you first load the page, if you switch from HTML to CSS/JS, the red thing gets mispositioned like this:

Also, if I switch to another font and then back, it fixes itself.

I'm viewing the site from my Windows desktop from Brave Browser (Chromium).
The images appear slightly blurry.

When the following CSS is applied, the image quality is greatly improved.

.screenshot img {
    image-rendering: -webkit-optimize-contrast;
}

In Google Chrome, Microsoft Edge, and Brave Browser (all Chromium), applying that CSS greatly improved the quality of the image. In Firefox, the image displayed at a high-quality without any image-rendering changes needed.

On my screen (browser window: 1864x981px), the app is flickering because the content fits the window perfectly (no scrollbar) only when there is no animation running:

This should be easy to solve by forcing the scrollbar to appear by applying overflow-y: scroll

This is a highly regarded, although very expensive, coding font; it comes with italics, and the more expensive packages have variants with ligatures: https://fsd.it/shop/fonts/pragmatapro/

Images do not load in the Brave mobile browser. When I toggle the shield (regardless of current state) it works.

The font size being larger than what I typically use in IDEs, it makes it harder for me to project what in practice would be most comfortable. I tried using the browser zoom but it doesn't behave as expected on Firefox.

A simple control to change the font size would be great :)

Other than that nice job with the website!

If you visit the site on an iPad, the image quality is much lower. It looks very low-res and pixelated. If I visit on my Mac, it looks normal. I haven’t tested on other machines.

I assume this has something to do with the way Cloudinary is serving different sizes and formats to different browsers?

I attached a screenshot. You can see how the image text looks compared to the actual text on the page.

@chriscoyier I'd like to add the above fonts to your project. Take a look at them. If you agree, I will create a PR

The font size is IMO a bit too small, to be readable at all.

https://coding-fonts.css-tricks.com/fonts/opendyslexic-mono/?language=js

• Font Name: Dank Mono
• Designer: Phil Pluckthun
• URL: https://dank.sh
• Cost: Paid font (£24)

Screenshot attached here

At the moment I'm thinking it would be published at something like coding-fonts.css-tricks.com (much like our serverless site).

This task doesn't need to be coding, it could be a design mock in Figma or whatever.

Any words from folks on things they'd want to see before this goes live?

Working on adding the last few fonts from the main list.

First, thanks for this great cheatsheet.

I think it will be a great addition to include 0 (zero) character inside the HTML tab (maybe inside header tags) while I'm aware there is one in the Characters tab. I saw in the past that some fonts difficult to distinct between 0 (zero) with O (capital O).

Thank you.

paragraph tag turns to pink on select. ✨
https://github.com/chriscoyier/coding-fonts/blob/9b4ad157e0c64edc65b7fedb40dd21b22265d496/src/assets/styles/style.css#L30

And add to devDependencies, just so everyone on same playing field.

The process of adding a font is in the README:
https://github.com/chriscoyier/coding-fonts#adding-a-font

The list so far...

• Fira Code – https://github.com/tonsky/FiraCode
• FiraFlott - https://github.com/kosimst/FiraFlott
• Operator Mono – https://www.typography.com/fonts/operator/overview
• Iosevka – https://github.com/be5invis/Iosevka
• SF Mono – https://developer.apple.com/fonts/
• Cascadia Code – https://github.com/microsoft/cascadia-code
• Ubuntu Mono - https://design.ubuntu.com/font/
• Hasklig - https://github.com/i-tu/Hasklig
• Source Code Pro – https://fonts.google.com/specimen/Source+Code+Pro
• Anonymous Pro - https://www.marksimonson.com/fonts/view/anonymous-pro
• Fantasque - https://github.com/belluzj/fantasque-sans
• Jetbrains Mono - https://www.jetbrains.com/lp/mono/
• Roboto Mono - https://fonts.google.com/specimen/Roboto+Mono
• Sudo - https://github.com/jenskutilek/sudo-font
• Victor Mono - https://rubjo.github.io/victor-mono/
• Monoid - https://github.com/larsenwork/monoid
• IBM Plex Mono - https://fonts.google.com/specimen/IBM+Plex+Mono
• Menlo - https://en.wikipedia.org/wiki/Menlo_(typeface)
• Hack – https://sourcefoundry.org/hack/
• Cousine - https://fonts.google.com/specimen/Cousine
• Consolas - https://docs.microsoft.com/en-us/typography/font-list/consolas
• PT Mono - https://fonts.google.com/specimen/PT+Mono
• Droid Sans Mono - https://www.fonts.com/font/ascender/droid-sans-mono?QueryFontType=Web&src=GoogleWebFonts
• Liberation Mono - https://www.fontsquirrel.com/fonts/liberation-mono
• EnvyCode Mono - https://www.fontsquirrel.com/fonts/envy-code-r
• Inconsolata - https://fonts.google.com/specimen/Inconsolata
• Input – https://input.fontbureau.com/
• DejaVu – https://dejavu-fonts.github.io/
• Gintronic – https://bboxtype.com/typefaces/Gintronic/#!layout=specimen
• Recursive Mono – https://www.recursive.design/
• APL386 Unicode - https://abrudz.github.io/APL386/
• MonaLisa – https://monolisa.dev/
• Aglet Mono – https://xyztype.com/fonts/aglet_mono
• PragmataPro – https://fsd.it/shop/fonts/pragmatapro/
• Bitstream Vera Sans Mono - https://www.fontsquirrel.com/fonts/bitstream-vera-sans-mono
• SF Mono - https://developer.apple.com/fonts/
• Courier Prime - https://fonts.google.com/specimen/Courier+Prime

We need to figure out how best to serve the images.
Netlify LFS looks nice, but would only cover sizes, not formats (which we could also do manually during build). Also, it would require every contributor to install git-lfs, which could be a barrier.
I'm guessing hosted solutions would require a build step to send new images.
Maybe we need to try this newfangled edge-handler fanciness?

It's on Google Fonts now https://fonts.google.com/specimen/JetBrains+Mono

So we could rip out our self-hosted files.

Recursive is screnshotted with cursive on but upright. This is from your webpage's recursive section, look at the r and l:

This is not the default way which mono is written using recursive, which is this:

The screenshotted variant on your page is actually this:

If you look at recursive's webpage their intent is that the cursive font is only used for italics, for example here:

https://www.recursive.design/process/

I usually use the string L|l1iI0Oo when checking out fonts.

The idea is there at the bottom of the character's tab, but separating the 1/l/O/0 doesn't provide a great comparison when "the whole point" is to see if you can tell the difference between those characters - ie, if the characters are 'well designed', the differences should be apparent/easy-to-spot. Since it is all done with screen shots, not the easiest\quickest PR, and this is basically a question of the core design of that tab, but perhaps food for thought? (Also, of course, regardless of format, I'd like to see my letter-I, |, and i comparisons along the 1s and ls)

addendum: (If not obvious, my suggested test string is capL, pipe-symbol, lowerL, 1, lowerI, capI, 0, capO, lowerO)

👋

I have a particular interest in this project as it feels like I get the urge to "change up my dev font" every few months and I'm never quite satisfied.

I'd love to contribute by collecting some of the screenshots and/or the micro site. Are you open to contributions? Would you consider doing so for Hacktober?

Issue

When using the take_screenshots.js file, lines 7-10 read the .md files in the fonts directory and store their names in whatever case the name of the file is in, i.e. if the file is Menlo.md, it's read as Menlo. This is then passed in the URL when navigating to the code sample page with Puppeteer where it proceeds to not render the sample in the specified font if the font isn't in all lowercase. I've attached some screenshots below that show this.

Solutions

One solution is to is to rename all the font directories so that they're all in lowercase and continue to maintain this style moving forward.

Another solution is to simply add a toLowerCase() method call when declaring the allFonts variable. This has the benefit of not concerning itself with the case of the font files themselves. Example below.

const allFonts = fs
  .readdirSync('./src/fonts')
  .filter((file) => file.endsWith('.md'))
  .map((file) => file.replace('.md', '').toLowerCase());

Personally I think the second solution is better though I'll leave it up to you. Let me know which solution is more preferable and I'll make a pull request.

Like

• https://forestry.io/
• https://www.netlifycms.org/
• https://www.stackbit.com/
• https://tinacms.org/

I would create a PR for Comic Neue, but it is highly debatable as a coding font. I just need to hear an "OK" before I do anything 😃 I've used it for more than a year. As the font is related to Comic Sans, people have on several occasions questioned my sanity.

We need a little bit more insanity in this world.

Here is a screenshot. I used the bold version, as it works best for coding.

Suggestion: if you are going to go with screenshots for the font samples, double the resolution (or come up with some other trick), so they can stay sharp on high-dpi displays.

I haven’t tried all of the fonts, but the fonts which most interested me have the normal width underscore. Originally, of course, this character was used to produce a single underline, while in coding, it’s used as a special character.

Source Code Pro is unusual in that it has a shorter underline character. This way it is easy to read the SQL pattern

LIKE 'a____'

and count the number of underscores without fiddling with the cursor.

Would it be possible to include a similar string with the other tricky characters?

Thanks for featuring Victor Mono! 🙂👍🏻

I couldn't help but noticing that true italics (one single instance in the single comment in the JavaScript screenshot?) aren't used. I think not using italics at all would be better than faux italics.

Many preview images (such as Consolas, FiraFlott, Hack and more) on the website are broken. Hope they will get fixed.