Design actual website to show off all these fonts.

[chriscoyier]

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.

[landjonathan]

Hey,
I'd love to get on board, especially with this part of the project. I can contribute to both design and dev.
Figma would probably be my choice, just for the sake of collaboration. How do you want to start?

[chriscoyier]

I don't have a strong vision for what the final website looks like. This whole thing is based on the loose vision that it would be a cool microsite idea to have a showcase for a hand-picked collection of nice coding fonts. It started out as just a blog post idea (which it could still work as), but doing this as a microsite on GitHub opens up the idea of collaboration (look, it's working!) and staying up to date with pull requests.

If you have a cool vision of what a site that shows off coding fonts could look like (keeping it rather minimal), I'd say go for it and we can talk about it.

I'm kinda gonna be the overlord here as it's something I want to publish on CSS-Tricks, so I might be picky about the direction ultimately. I don't know how best to do that in open source, so I'd say let's just press forward and see what happens.

[landjonathan]

Cool.
My thinking is that the structure should be simple. Navigation should be by font, probably a list on the left. Each font page should just display the screenshot and the metadata.
One important constraint here is that screenshots should always have the identical size and place — switching from page to page should allow users to easily compare fonts. So that probably means the metadata has to come after the screenshot, and we'll want to avoid too much compositional cleverness. Though maybe CSS grid can allow us some freedom here. If I think of anything crazy I'll make sure to validate it in a pen. I'll start a Figma doc and share it with you, and we'll take if from there. Do you know of any way to hook up Figma with GitHub? It would be nice to keep everything in one place.

Regarding size, it occurs to me that maybe we can save the screenshots as SVG? Something like what https://carbon.now.sh does. I like the idea of the vector data staying vector. My main concern though is file size — the transition from page to page should ideally be immediate, to allow easy comparison. From what I've seen on carbon, the SVG created is terribly bloated, e.g. the stock example is 1.4MB and includes all kinds of foreignObject wizardry and a ton of inline styles. I'm hoping we can avoid that, but that'll require more research.
Either way, we should probably consider pre-caching the images with a service worker, just to be on the safe side.

[landjonathan]

Here's a quick first sketch of what I had in mind:

Obviously stuff is still missing, but you get the idea. I'm in favor for keeping things rather clean, making sure the screenshots have the focus. The visual style itself is totally up for debate, I just went with my gut here. But I do think the basic layout has a strong hierarchy and puts focus in the right places. I'd love to be able to bring in some of the playfulness that the Serverless mini-site has, but it'll have to be subtle.

Do you think it'll be possible to have all the screenshots be the same size, regardless of font or language? Like I said, ideally I want zero jank on navigation.

Also, do you think it's important to support light/dark mode for the whole website? If so, we need to find a good pattern for controlling the website theme and the code theme independently, in a way that'll be obvious to users. Sounds like a fun challenge, but I'm not sure how much value it actually holds.

[chriscoyier]

Looks like a fantastic start to me.

Do you think it'll be possible to have all the screenshots be the same size, regardless of font or language? Like I said, ideally I want zero jank on navigation.

That's handled by the fact that all three languages have the exact same number of lines.

Also, do you think it's important to support light/dark mode for the whole website?

I don't feel particularly strongly about that. Just showing the fonts on light/dark is probably enough.

Regarding size, it occurs to me that maybe we can save the screenshots as SVG?

A few worries there:

• Is it OK to post the vectors of the non-open source fonts?
• The SVGs of all the characters, if outlined, would probably be pretty darn big
• Not sure how to automate SVG production (I doubt Puppeteer can do it?)

we should probably consider pre-caching the images with a service worker, just to be on the safe side.

I down for fanciness. But I'd also think there is a ton we can do normally with image performance. We can host them in a place that will serve them in the best format and use responsive images syntax and all that.

[landjonathan]

Looks like a fantastic start to me.
Great! Let's get this show on the road.

I think the next step should be figuring out what additional templates we'll need. I'm guessing a home page with a description of the project? Anything else? If it's just these two, I can move forward with fleshing out the design details.

Typography-wise, I'm currently using Inter. However, if CSS-Tricks' Hoefler & Co. license will cover the mini-site, I love to try Ringside.

That's handled by the fact that all three languages have the exact same number of lines.

My thinking also, just wanted to make sure.
Since ligatures are indeed a big deal for some of us, should we maybe include screenshots with and without for fonts where it's optional? Either way, I think the JS samples should include a few more of them (=>, +=, !==).

I down for fanciness.

In addition to image formats etc., I'm wondering if there's value in some form of client-side navigation. Doesn't need to be super fancy. Maybe just placing all the examples on one page and navigating with checkboxes, or hashes and :target? Since we're pre-caching the images it shouldn't be an additional perf hit. I know it a very roundabout way of doing things, but I really feel it'll be crucial to the comparison experience to avoid the flash-of-white-browser-background between examples. Maybe caching the CSS in the worker will just solve this? The thing is, I really like the idea of building a super-simple, straight-up 11ty site. But I'm still a bit concerned. Maybe I'm just over-optimizing. Something to think about, anyway.

[chriscoyier]

I think the next step should be figuring out what additional templates we'll need. I'm guessing a home page with a description of the project?

I don't even know if we need that. Maybe the entire thing is just that one page you mocked up.

CSS-Tricks' Hoefler & Co. license will cover the mini-site, I love to try Ringside.

I'm down with that. I'll make sure the project is set up to have access to Ringside. Let me know if there are others you want access to in there and what weights.

[landjonathan]

Maybe the entire thing is just that one page you mocked up.

Cool. I'll do some more details, and then I can start building the 11ty template etc.

Let me know if there are others you want access to in there and what weights.

Is it possible to open up all weights during dev? I want to try both Ringside Regular and Ringside Narrow. I don't see a way to test the fonts in Figma, so we'll need to experiment in the browser. Do Hoefler still do webfonts by sending you a bundle of CSS files? It's been a few years since I worked with them.

[chriscoyier]

I added all weights of Ringside, like...

It's pretty easy to adjust what we're using in dev (but you'll have to let me know what you want) and then we can trim down to what we use when it goes live.

In dev, the stylesheet linked up handles it all. In production, yes, we'll have to put the bundle of CSS files they give us into the repo (I'm pretty sure).

[landjonathan]

Started working, added PR #10. Just a POC right now.

[chriscoyier]

Looks great to me. I like the cleaner URLs. I like that each font has a unique real URL. Perhaps the homepage could just render like the first one in the list or something.

We can leave this ticket open to talk design as it takes shape, but ultimately probably close it for more specific actionable stuff.

[landjonathan]

Perhaps the homepage could just render like the first one in the list or something.

I'm thinking of adding a javascript redirect from the homepage to the first font on the list. It would probably be better to do this on the server, but I can't think of an elegant way to tell the server what the first font is. Now that I think about it, I'm not sure how 11ty orders the collection. Maybe this should be explicit?

[chriscoyier]

Put on on Netlify at https://coding-fonts.netlify.app/ so that PR's have previews.

[chriscoyier]

I figure we can close this for now since the website is coming along nicely!

I have it mapped to a production subdomain as well https://coding-fonts.css-tricks.com/