A post from Shady Characters

A spring clean for Shady Characters

As you may have noticed, things are a little different around here. Shady Characters is a little over five years old now, and the original design was starting to fray around the edges: it was not especially readable on mobile devices; PC and Mac users were presented with different fonts; and the underlying code had grown a little stale, leading to ugly citations and unpredictably-sized images.

This new design is my response to all that. Here’s what it entails.

Firstly, all users will now see text set in Sindre Bremnes’ excellent Satyr, with headings set in its “unfaithful companion” Faunus.* Sindre is one of the principals of Norwegian type design studio Monokrom (along with Frode Bo Helland, who helped me greatly in sorting out the minutiae of webfont usage), and he writes of Satyr:1

Curves are hard. Even harder, I think, is making curves and straight lines work well together. And hardest of all is making the transition from line to curve look good. So one day, after a long period of trying to draw type with as few curves as possible, John Downer-style,2 I tried to go the other way, eliminating not the curve but the line. […] But there’s more to Satyr than the lack of straight lines. Although the proportions are vaguely Venetian and the contrast obviously renaissance-influenced, the typeface still can’t be put in any of these coarse categories. The ‘e’ and the ‘a’, most typically, show reversed contrast — the vertical thins seem to change their mind halfway.

In other words, zoom in for a good look! Satyr in particular rewards close examination; Faunus, being designed for larger type, wears its heart on its sleeve.

Aside from the new typefaces, I’ve tweaked the overall design with a view to making things a little more cohesive. The site now scales smoothly from smartphone screens to desktop monitors: font sizes are chosen responsively, images resize and reposition themselves accordingly, and a few other elements rearrange themselves to suit the current screen size. The presentation of references to web pages, newspaper articles, and other problematic article types has been tidied up.

Lastly, I’ve introduced some keyboard shortcuts to make it easier to get around the site. Press ‘j’ to view the next post or ‘k’ to view the previous one. (On list pages, such as the home page, ‘j’ will take you to newer posts and ‘k’ to older posts.) ‘h’ will take you to the home page, ‘/’ to the search box, and ‘c’ to the comments, if available. Try it out, and let me know what you think!

So: here it is, the new version of Shady Characters! There are some other changes under the hood,† and not everything will work perfectly at first, of course, but I hope that this is a decent starting point. I encourage you to have a nose around the site to ferret out any visual or functional bugs. Please leave a comment here with your impressions, whether good, bad or indifferent, or drop me a line privately via the Contact page.

Here’s to the next five years!

1.
Bremnes, Sindre. “Designing Satyr”. monokrom.no. Accessed February 14, 2016.

 ↢

2.
“John Downer”. Typedia. Accessed February 14, 2016.

 ↢

*
Nina Stössinger assisted with spacing and kerning. ↢
†
Shady Characters continues to be powered by WordPress, but the new theme is derived from Automattic’s Underscores starter theme and, for the first time, I’ve automated the creation of the final stylesheet with Sass, Grunt and postcss. None of this should matter to you, the reader, except that it will make maintaining the site a little easier in future. ↢

24 comments on “A spring clean for Shady Characters”

  1. Comment posted by Matthew on

    Satyr is absolutely gorgeous. I love it!

    1. Comment posted by Keith Houston on

      It is, isn’t it? It’s distinctive without being overpowering, and it’s just lovely to pore over. Thanks for the comment!

  2. Comment posted by Peter on

    Loving it! I was a bit unsure at first, but after reading a couple of articles Satyr has really grown on me. It helps keep my eye engaged in the text rather than starting to gloss over and skim the text (the bane of on-screen reading). I am impressed – and with your web typography too!

    Do you know of anything similar but more contemporary, which wouldn’t look out of place on a business website?

    1. Comment posted by Keith Houston on

      Hi Peter — I’m glad you like the new-look site! I know what you mean about Satyr; it grabs you by the scruff of your neck at first, but before you know it, it’s the most natural font in the world. (As I’m typing this, honestly, it’s making me feel like a master letterpress printer.)

      As for modern alternatives, that’s a good question. I’m terrible at coming up with that sort of thing, but perhaps Typewolf’s list of popular serifs might be a place to start?

      Thanks for the comment!

  3. Comment posted by Trevor Peach on

    Oh, this is beautiful! But it looks like I am finally going to have to ditch Internet Explorer 9, which refuses to show it…

    1. Comment posted by Keith Houston on

      Hi Trevor — I’m glad you like the new site! Thanks for the comment.

      I’m afraid I was limited to IE 11 and Edge when it came to testing in Microsoft browsers, but I’d be happy to investigate the issues you’re having. What problems have you seen with the site?

  4. Comment posted by Korhomme on

    The ‘normal’ version of Satyr looks fine.

    I don’t like the italic version though; there seem to me to be rather erratically leaning verticals. I specially don’t like the shape of the g. Sorry.

    1. Comment posted by Keith Houston on

      Hi Korhomme — I’m sorry to hear that! I hope you like the rest of the site.

    2. Comment posted by Korhomme on

      Oh, I do! Personally, I’d tone down the red (for the links etc), it looks a bit bright – but then I do view through aged, agued, rheumy optics. But I do like how an underlined link changes colour to show that it’s active.

      I’m on a MacBook Pro (with a Retina Screen); I normally use Firefox. I Tried Chrome and Safari, both look similar, though the ‘typewriter’ letters seem a bit smaller. I didn’t find Satyr in a list of fonts; is it being substituted? – there’s no warning message.

    3. Comment posted by Keith Houston on

      Great! I’m glad to hear it, especially from a frequent visitor.

      It may well be that you’ll see some small variations in monospaced text depending upon operating system and/or browser. It would be tempting to use a (more predictable) webfont instead, although I use monospaced lettering fairly infrequently and I’m not sure it would warrant the extra page loading time.

      Anyway, if you have any particular issues, feel free to drop me a line via the Contact page or send me a screenshot via Twitter. Thanks again!

    4. Comment posted by Noël Maasdam on

      Hello, Keith — Your site looks amazing. I love your choice of fonts and the typography overall (Matthew Butterick would be so proud ;-)). Can you share how you did the hyphenation? Anyhow, I guess you put a lot of work in it and it shows. I wish you a lot of succes with it.

    5. Comment posted by Keith Houston on

      Hi Noël — thank you very much! I did spend a lot of time with Butterick’s Practical Typography (which reminds me, I must send some money Matthew’s way for his excellent website/book), though Robert Bringhurst’s Elements of Typographic Style was still rattling around my head too.

      Hyphenation is done in Javascript using Mathias Nater’s Hyphenator, which in turn implements Frank Liang’s very clever hyphenation algorithm. Sadly, it turns out that the text column is a little narrow to pull off fully justified text, but it’s still significantly better than without hyphenation.

      Thank you for the comment!

  5. Comment posted by Trevor Peach on

    Thank you for your prompt reply. Your web pages on IE9 are a veritable battlefield of punctuation marks (which is perhaps appropriate). I don’t imagine there is much you can do, and at all events there is no problem in Chrome. Thanks anyway!

    1. Comment posted by Keith Houston on

      Hi Trevor — hmm. That’s not so good! It turns out that Microsoft has made available various older versions of virtual machines, so I may have a play around to see if there’s anything straightforward I can do to improve things.

    2. Comment posted by Keith Houston on

      Hi Trevor — having just checked, the site looks pretty good in IE 9, although it falls apart in compatibility mode, as indicated by the little “broken page” in the address bar. Have you tried turning compatibility mode off?

  6. Comment posted by Ype on

    The interrobang sign is not shown though

    1. Comment posted by Keith Houston on

      Hi Ype — true, on some systems at least. There is a fix in the works, however. Thanks for the comment!

  7. Comment posted by Michael Anthony Scott on

    Change is always a good thing. However, what has NOT changed is the wonderful content on finely niched topics. I always smile when I get your email announcing a new column.

    Thanks and keep it up.

    1. Comment posted by Keith Houston on

      Hi Angus — I hadn’t! That’s fantastic, and what a neat idea. Thank you for posting the link — I’ll have to feature that here soon.

    2. Comment posted by Jamsheed on

      It’s a brilliant piece overall, but I particularly loved the Faulkner/McCarthy side-by-side comparison. Mind-blowing!

  9. Comment posted by Petar on

    Beautiful website, mister. Typographic excellence. Congratulations!

Leave a comment

Required fields are marked *. Your email address will not be published. If you prefer to contact me privately, please see the Contact page.

Leave a blank line for a new paragraph. You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>. Learn how your com­ment data is pro­cessed.