Typography Improvements

[pastelsky]

This is a proposal to change our font stack for better readability.
Had been thinking of this myself and a comment from the recent hacker news discussion made me go forward with this PR.

dismantlethesun 1 day ago [-]
Wow. This documentation is so much better than what was previously available. Thank you from the bottom of my heart.
The one thing I will point out is that from a UX perspective the font you are using "Cabin", is naturally smaller and more compact than more common sans fonts (e.g. Open Sans, Century Gothic).
Because of this, even though your site is font-size 16, everything appears smaller than it would normally be.

By smaller, I think the author meant letter spacing, which is a problem with Cabin.

Changes

• Simplified font stack to use Source Sans for body and Source Code Profor code.
• Requests for fonts are now non-blocking.
• Reduced size of Geomanist font by 50% (19KB vs. 42KB) using font subsetting.
• Don't unnecessarily bundle both WOFF and WOFF2 as base64. On hold until Using file-loader to load fonts doesn't work in production build. #443 is taken care of.
• Reduction in time to paint and load time, especially on slower networks.

According to me this has better readability especially when there are large paragraphs of text.

[SpaceK33z]

Thanks, this font as body font is way easier to read. I'm not sure on using it for the headings. @jhnns said that he would still like to use Geomanist as heading font (#291 (comment)).

[pastelsky]

Will update headings to use Geomanist.

[jhnns]

That looks gorgeous. Thx @pastelsky!

I'm not completely happy with the font colors (especially the contrast) and vertical rhythm, but it's definitely an improvement.

I'd love to pull this in, but what's wrong with the tests?

[pastelsky]

@jhnns glad you liked it. We can discuss the contrast and rhythm issues if you'd like to. As for the tests, it seems that the lint check for the hyperlink to the font files are failing. Although it seems yo be working just fine in development. How do I simulate a production build locally?

[SpaceK33z]

@pastelsky, the font files seem to be really failing, I'm getting 404's on my local production build. You can make a production build with npm run build-test.

[skipjack]

I had hacked this before with the url-loader to inline the fonts. For some reason, antwar is able to copy certain imported assets over while excluding others -- thus causing the errors. If you want to use the file-loader, which I agree would be the better solution, I would talk to @bebraw. (I know he still has some plans for updating antwar's asset management although I'm sure for when)

[SpaceK33z]

@pastelsky, perhaps an idea to revert the change in webpack.config.js for now, and make an issue to look into it later?

[pastelsky]

Reverted those changes for now and have created a separate issue ( #443 ) since it requires some more exploration.

[SpaceK33z]

All right, nice work again @pastelsky :).

[bebraw]

@skipjack I'm currently redoing the asset pipeline. The problem is that it emits the assets below ./antwar/build on the initial pass. I'll change it to emit to /build directly. That will fix the problem. Still a little bit to go but I hope to have the fix out there in a few days.

I also sorted out the CSS situation (single CSS file instead of multiple) already but I need to fix asset handling to make this nice.

[skipjack]

@bebraw sounds good! As we finish up the major parts of the design/interface it would be nice to clean up some of the temporary hacks we added so implementing new features and fixing bugs is easier. Speaking of which, I'm working on some cleanup and fixes that I should be opening PRs for soon.

Unfortunately I'm super busy this month but I'll still be helping out whenever I can. It's awesome that @pastelsky and @NejcZdovc have been picking up a lot. By the new year I should be able to dive into things again.

[bebraw]

@skipjack Ok, cool. Any thoughts on pushing bits like navigation to a component of its own? Those are useful bits beyond this project.