The Elements of Typographic Style Applied to the Web

The Elements of Typographic Style Applied to the Web
Sections 2.2.2 & 3.1.1

What I Learned

This online reference is a powerful eye opener to type on the web. I have had experience with print typography and its various rules and nuances, but I never realized how much actually carries over onto the screen. Of course there are some adjustments and different manners in which things are implemented and set, but there really is a lot that goes into web typography. There is even a deeper crossover as you begin designing a CSS print style sheet. There is a lot to learn, and I hope that I can apply as much of it as possible to this site. I have checked out a few sites that follow the web type rules and they are beautiful. Typography makes a powerful difference in the visual representation.

How I Applied it to the Site

After some thought and a bit of scratch paper, I was able to grasp how I could apply the formulas covered in the above articles to my own site. I had to write, and rewrite, a few different equations to get through it. By the end, however, I had the process down and was quickly punching out the numbers with the help of my trusty dashboard calculator.

Here are the steps I followed:

  1. Set the font size on body:
    body { font-size: 100%; }
  2. Determined my desired paragraph font size for my selected font as 10.5pt.
  3. Converted my font size from points to pixels:
    10.5pt ÷ 0.75 = 14px
  4. Determined my line height for the paragraphs in my selected font as 18pt.
  5. Converted my line height from points to pixels:
    18pt ÷ 0.75 = 24px
  6. Noted the results to refer to for later calculations as 14px/24px.
  7. Converted my values from pixels to ems:
    14px ÷ 16 = 0.875em
    24px ÷ 16 = 1.5em
  8. Set the font size, line height, top margin, and bottom margin for content paragraphs:
    #content p {
   font-size: 0.875em;
   line-height: 1.5;
   margin-top: 1.5em;
   margin-bottom: 1.5em; }
  9. Determined my desired h1 font size for my selected font as 26pt.
  10. Converted my h1 font size from points to pixels:
    26pt ÷ 0.75 = 35px
  11. Converted my h1 font size from pixels to ems:
    35px ÷ 16 = 2.1875em
  12. Calculate the needed h1 line height to keep in measure with the paragraph line height of 24px:
    24px ÷ 35px =0.6857em
  13. Set the font size, line height, and the top and bottom margins for content h1:
    #content h1 {
   font-size: 2.1875em;
   line-height: 0.6857;
   margin-top: 0.6857em;
   margin-bottom: 0.6857em; }
  14. Calculated ½ of the h1 line height to offset its vertical alignment:
    0.6857em ÷ 2 = 0.3429em
    0.6857em + 0.3429em = 1.0286em
    0.6857em - 0.3429em = 0.3429em
  15. Changed the h1 top and bottom margins to the new values:
    #content h1 {
   font-size: 2.1875em;
   line-height: 0.6857;
   margin-top: 1.0286em;
   margin-bottom: 0.3429em; }
  16. Repeated steps 9-15 as for the remaining h2, h3, li, and a elements.

I still need to deal with the issue of the right rag, the gapping holes from lack of hyphenation, and eliminating the orphans, but just having a consistent line height has made a huge difference in the flow and appearance of my body text. It also helps tie a nice relation with the sub navigation links. I am looking forward to learning as much as I can about web typography as it seems to be quite a powerful tool in and of itself, let alone mention its hierarchical potential, to bring professional aesthetic and usability to a website.