css-tricks / coding-fonts Goto Github PK
View Code? Open in Web Editor NEWhttps://coding-fonts.css-tricks.com/
License: MIT License
https://coding-fonts.css-tricks.com/
License: MIT License
👋
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?
The process of adding a font is in the README:
https://github.com/chriscoyier/coding-fonts#adding-a-font
The list so far...
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.
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.
There is a whole big list of fonts (see current README). Each font has a variety of metadata:
Then of course the screenshots of the samples.
Seems like a job for Markdown files with Frontmatter and Eleventy to me.
You may update the info on the website.
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?
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.
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.
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!
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.
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 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)
@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
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.
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. 🙂
https://github.com/PrismJS/prism-themes is a source
Maybe they should look nicely related to each other? Like Material Light / Material Dark?
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.
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.
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.
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?
paragraph tag turns to pink on select. ✨
https://github.com/chriscoyier/coding-fonts/blob/9b4ad157e0c64edc65b7fedb40dd21b22265d496/src/assets/styles/style.css#L30
Many preview images (such as Consolas, FiraFlott, Hack and more) on the website are broken. Hope they will get fixed.
It's on Google Fonts now https://fonts.google.com/specimen/JetBrains+Mono
So we could rip out our self-hosted files.
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?
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.
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.
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?
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/
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
And add to devDependencies, just so everyone on same playing field.
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/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.