H697 Type Assignment

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. (( One of my New Years Resolutions is to re-read all of the Holmes stories in publication order. )) 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. Cover of Strand Magazine bound volume 1894  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!

9 Replies to “H697 Type Assignment”

  1. Augh! Thank you for including the script for the superscripts. I definitely found the footnotes to be the most frustrating part of the assignment, and that bit remained elusive until I read your blog post.

    Also, as to my blockquote, I did leave the end aligned with the right edge of my text on purpose, partially because my attention became focused elsewhere, and partially because it’s my understanding that is how they’re usually done in printed text. I know this isn’t printed text, but I needed to figure out those footnotes!

  2. Thanks for the hint on the footnotes–that’s how I managed to get mine to work finally, too! Also, love the fonts that you chose for your page–looks really great. They reflect the period well. Good work!

  3. I too debated about putting up a lot of content. In the end, it wasn’t so bad. I took the code for the footnotes from a previous project, and it was a bit tedious. Glad I know how to do it now though. I feel like your header and title fonts fit the mood perfectly. Good job.

  4. Great article. Did you locate a reasonable facsimile of the font used inside the Strand on the body of the story? And the decorative first initial? Thanks for any help you can give on this.

    1. I used a sans serif font for the page because I wanted something that would be easily readable on the web. Serif for print, sans-serif for web.

Comments are closed.