Design changes and typographic improvements 21. February 2016
While reading the excellent Practical Typography (thanks to Fefe for the recommendation), I noticed that while my LaTeX documents all are (of course) quite well formatted, my website is a mess. In particular, the line length was terribly long and the font smaller than it needed to be. By increasing the font size, a switch to a serif font was feasible, because the details (serifs) now had more space. And lazy (and budget-less) as I am, I decided to give the free font “recommended” by the book, Charter, a try. I liked it, and complemented it with Source Code Pro as the monospace font for source code.
I intermittently considered a multi-column layout. The bad browser support for controling column breaks, orphan control and elements spanning multiple columns – particularly in my beloved Firefox – was a first setback. But the final nail in that idea’s coffin arose from the content on my page. While on the home page, each section fits nicely on a screen in a two-column layout and thus only the eyes have to move, in longer blog posts endless scrolling would occur from the bottom to the top when the first column has been read. This is of course mainly caused by the blog posts being unstructured, but I think design has to follow content, not the other way round.
The change was completed by serious improvements of typography throughout all posts and pages, like the correct usage of double quotes of the correct language, curved apostrophes, non-breakable spaces, nicer code formatting, images being set
<aside> if enough space is available and a better structured list of reports. Some internal changes made my Gemfile a bit shorter, because in two cases I used stuff that wasn’t the default even though the default works just as well.
On my to-do list, there are still some thoughts left, not only since I read the book:
What icon could resemble the blog in the navigation? I like the icon-only navigation, but having “Blog” written out there nags me every time.
Update: Thanks to Tim, who pointed me to a blog icon by H.R. Sinclair, this is no longer a problem.
- Should I get rid of the permanent header, even on big screens, and replace it with the version already active on smaller screens? Probably.
Again because of the bad browser support (though not Firefox this time!), should I switch to programmatically inserting soft hyphens everywhere while building the website instead of letting the browser handle hyphenation? There seems to be no Jekyll plugin yet, but writing one shouldn’t be too hard.
Update: Having seen how the front page looks in the stock Android browser (based on Webkit, thus no hyphenation), I really need to do this soon!
I’m happy to hear feedback on any of these thoughts or the design change as a whole. After all, this is just my perception of “nice”, and it would be good to know if other people perceive this the same way.
Update: Turns out that X actually still delivers a Charter system font – as a bitmap font, resulting in a horrible look on Linux without the proper Charter OTF files installed. Thus, the system font is no longer preferred (or used at all) and the 20 KB of WOFF always have to be downloaded.