Kosmos Community

Webfonts, and sharing design between different Web apps/services

(Not quite sure where to open this; we probably need a category for topics about overall corporateoperative design and -identity.)

CSS

As you may have seen, we have recently merged a PR introducing Tailwind CSS in Akkounts. The idea was to experiment with a framework that allows us to more rapidly design and prototype UI across different Kosmos apps and websites (and most importantly Hyperchannel in the end, of course).

Tailwind supports plugins/themes natively, and can be used with any app framework, both server and client-side ones. So it will be possible to share styles between projects via npm modules basically.

Fonts

However, another over-arching visual design problem I was thinking about and looking at is the topic of typography/fonts. We currently have a big old mess of inconsistent fonts across all our apps, caused by existing open-source apps coming with their own styles, of course. But also in our own apps we’ve been using various different fonts and font combinations.

The font that we used the most so far, and what I compared against some other options (mostly system fonts and the Inter family), is Open Sans. In my opinion, after playing around with it, I think it’s still the best option to use everywhere, as Inter just looks so clinical to me and system fonts would be so vastly different across clients and thus destroy familiarity/identity across devices and apps.

Solution

My current idea/proposal would be to have one central, well-maintained stylesheet and asset hosting domain, which one could simply @import in any repo’s code, similar to what Google Fonts and Inter do:

@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }

The CSS would contain the required set of font weights, styles, character sets, etc… And the font files could then be delivered to user agents using cache-forever headers, as they don’t really change. So if you’ve visited one site, you already have the fonts cached for all other sites/apps. Also, the CSS file could be cached for much longer than other assets, which may change more frequently, of course.

And if we do decide to switch to another font or set of fonts for everything, it would be much easier to change the central stylesheet once, and then only change some font-family definitions in the various other repos.

@Core What do you think?

1 Like

Looks great, and I like that idea.