Under reconstruction, Part 1 – Fonts

Staying current with web design best practices reminds me of the last time I tried an exercise class. New trends and technologies are being created and discussed by the web development community (Responsive design! Parallax scrolling! Ruby on Rails! I’m still trying to get over Apple killing Flash.) In parallel, DIY environments like Squarespace and Wix offer web development tools for the rest of you. (For HTML geeks, these environments may be challenging. Ease of use often goes with loss of control.)

My website is under reconstruction. Instead of being a corporate site for my now-defunct graphic design studio, it’s a shoebox for everything I want to share with the public. Scones? Beads? Thoughts on web design or inbound marketing? It will all be there. I call it “NaomiSpot.” I”m rebuilding it from scratch. This morning, it had no design. What is the first thing a web designer should think about? In my opinion it is…

Readability, which first means fonts.

I need reading glasses to order lunch. I would like my site to:

  • Be legible to anyone who has a driver’s license
  • Allow users to resize the fonts
  • Use the screen to display the right amount of content to deliver the message in a relaxed way

Font size causes me the most pain, so I’ll be looking at that first. Chris Coyer of CSSTricks.com has a great article about sizing type for the web called “Why Ems?” A related article presents more specific guidance about how to use ems, pixels, and so on to size type on the web.

An em, as in em-space or em-dash, is the width of a capital letter M. (An en-space or an en-dash is the width of a capital letter N, and you are supposed to use en-dashes for inclusive numbers like 1809-1865 or for compound phrasal adjectives.) There is a caution about cascading . . . and some ideas about using ems to size the width of text blocks, further developed in an article by Australian CSS guru Russ Weakley. I like this idea because it is true that your eye gets tired after reading about ten words in a line.

Today, I will add some font sizes and column widths to my site’s CSS. (I also need to think about how to organize the site’s style sheets. I haven’t quite decided, so I’m going to create one called “naomispot.css” and put all my own styles in here, as opposed to the style sheets that are included with the boilerplate template. I know I’ll need to revisit this before the style sheet gets out of control.)

To specify the font size, I used what Chris Collyer calls the most popular method: “set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn’t cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.”

To define the text width, I am not sure what elements my ideal width will apply to yet. So I’ve created two CSS classes: “readablewidth” defines the column width as 35 ems, and “readablepadding” adds a padding of 1 em all around. I added both classes to the site’s main content but didn’t touch the site’s list yet. I need a refresher on how padding and margins affect the way lists display.

Other changes today:

  • Installed an HTML 5 boilerplate – a blank HTML file which contains a bunch of fixes that other web developers have found helps them get around browser compatibility issues, and so on. Installing the boilerplate involved copying my home page to a temporary file, using the HTML 5 “boilerplate” file as my new “index” file, and copying the content back into that file.
  • Removed the “FinnishPod 101” widget I had installed on the website. Eventually I’ll reinstate that content on a separate page along with other Finnish learning resources.
  • Added a link to my Etsy site, Naomibeads, where you can see my handmade polymer beads and jewelry.
  • Added meta tags with “Naomi L. Pierce” in the description to help distinguish me from the Harvard microbiologist, Naomi E. Pierce. Between the two of us, we’re helping anyone else called Naomi Pierce hide from Google. Sorry about that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s