This week’s assignment was to create a webpage which demonstrated a basic grasp of wordprocessing, css, and webfonts. I knew that which fonts I chose would depend on the text I used, so that was where I started.

I thought about using an essay from my MSc programme, but it’s a bit long and I didn’t want to deal with reformatting all the footnotes to get them out of .doc encoding. Besides, I knew I wouldn’t have time to hunt down unrestricted images to use with it. My thoughts then turned to public domain texts, and immediately went to Sherlock Holmes.¹ I also thought about using one of Lady Mary Wortley Montagu’s letters, or a bit of Margaret Bayard Smith’s memoirs, but I’m not as familiar with them and it would have been harder to find a section which would provide a block quotation and good pull quote.

I thus chose to use A Scandal in Bohemia as my text. I’m familiar with it, it begins with a note from the Prince which I could use as a blockquote and includes in the beginning a classic Holmes line “You see, but you do not observe” which works very well as a pull quote. What follows are my thoughts on the design of the page, A Scandal In Bohemian Webfonts.

Scandal was published in 1891, which gave me a lovely range of fonts to use. To narrow my search, I found an image of a bound edition of the Strand Magazine from 1894, and set about trying to find a font which either resembled or evoked that cover for my h1/header.   I looked at the League of Movable Type, FontSquirrel, MyFonts, and the Lost Type Co-op. I found myself coming back to the work of the Greater Albion Typefounders, which has a lovely line of fonts, many of which are rooted in old railway signage. I chose their Birmingham New Street because I liked the look of the S and the R was similar to the R in “Strand.”

For the h2, I wanted something script, as I was using that for a credit line and needed it the be distinct from the headline. I played around with a few options from Googlefonts before settling on Dancing Script. It just felt right.

For the body font, I initially tried Junction from the LMT, but it was too light and narrow for Conan Doyle’s longer paragraphs. Default fonts weren’t quite what I wanted, so I went off hunting and found PT-Sans at FontSquirrel. It paired  cleanly with Birmingham and Dancing, and stayed legible. Success!

My color scheme was rooted in the colors of the coat of arms of Bohemia: gules, or, and argent (red, gold, and white). At the beginning of the semester, Celeste shared a link to a color scheme designer, which I used to mess around with possible color pairings and sets.  I chose the orange-brown for the body because it reminds me of leather, either a leather-topped desk or simply a leather writing pad. The header had to be scarlet, for its association with scandal. I reversed the text in the header; while I know reversed text can be less legible, I feel it’s safe to reverse short phrases in large font size.

Jeri very helpfully pointed out to me that the W lost some of its character at a smaller size, which led to the h1 being two lines long. I usually prefer a single line header, yet in this instance it seemed appropriate, especially since the header text was so long.

My major opponent in this assignment was formatting the endnote numbers. I had the basic html from the formatting I used to use in my blog before I installed WP-Footnotes, but the sup tag didn’t cooperate with my css for some reason. Erin very helpfully pointed me to her type assignment, where I gleaned some hints, but success eluded me. The numbers stayed firmly. Victory came about from just googling sites for css footnotes and discovering that there is a formatting in css “vertical-align:super” which makes text into superscript. Once I plugged that in, it worked!

For all that there were challenges and headaches, I had a ton of fun doing this assignment.  I even mucked around with some of the in-paragraph text, just to play with font formatting and class tags. Webfonts are no longer a mystery—they’re a way to lose hours of time!

1. One of my New Years Resolutions is to re-read all of the Holmes stories in publication order. [↩]