Experiments in Web Typography, #296

February 12, 1974

This project is to provide some real world examples of different CSS typography techniques. Topics such as different typefaces, font sizes, leading, and practicing good typographical design. One area of interest is maintaining a vertical rhythm. Richard Rutter has written a few articles about this, as well as Wilson Miner. The line-height and bottom margin of all the HTML elements will be set to maintain this rhythm. This involves a lot of math since the font size and leading is set in ems. Of course, there is also somewhat of a backlash against sizing text relatively using ems and multiple calls for going back to using pixels, partly due to the major browsers now using page zoom (which works) over text zoom (which IE refused to make work for text sized in pixels.) Oh, well. The work is done. The CSS file is here, and I have tried to keep it well-documented. 1

This is a little sidenote which should appear over in the left-hand margin. Stolen from Kilian Muster. It has a negative left margin to move it left and is absolutely positioned to remove it from the normal flow and slide the next paragraph up. In the source, it appears between the first two paragraphs over there in the middle.

Here are some examples of various text options to look at as the CSS for this page is tweaked. First, this paragraph has a slight text shadow applied. This is emphasized text. And here we have some strong text. I never get things right on the first try, so just to make sure that strikethrough text appears correct. The following is a keyboard apostrophe: I'll not use it again. And these are “typographically correct quotes.” A break in thought is indicted by an em dash—look at something shiny 2. Here is a link that I have never visited.

This is blockquoted text. The quick brown fox jumped over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu malesuada ipsum. Nulla semper, nisi id accumsan rhoncus, velit dui consectetur nisi, ac congue eros mauris non diam. Praesent sit amet tempor tortor. Nam porttitor porttitor lectus vel porttitor.

This is an H3 Heading with an ampersand &

I’m a fan of two techniques I learned from Robert Bringhurst’s Elements of Typographic Style: using old-style figures for numerals in text — 1974–1996 — and setting acronyms such as NRA and CIA in small caps versus ALL CAPS. Getting old-style figures just depends on selecting the right font; Georgia and Corbel are two good examples. Using small caps is slightly more difficult. In the previous sentences, I used a span element with a font-variant set to small-caps. The problem with this is a true small cap font is not being used - the browser just shrinks true capitals to a smaller size.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Let’s test some lists:

  1. Add footnotes
  2. Test out pre block
    1. Hey, a list within a list
    2. I like outlines
  3. Color for code elements
  4. Finish Sidebar
This is a definition term
And this is a definition description
Here is another definition term
And surprise! The definition description

This is text wrapped in a pre block:

#content {
  font-size: 0.875em;    /* 14/16 = 0.875 */
  line-height: 1.4286em; /* 20/14 = 1.4286 */
  }
p, ol, ul {margin-bottom: 1.4286em;}

A Subhead marked up with H4

One issue that came up was that any line of text that has a code or pre element actually had a height of 25 or 27 pixels, even though those elements are set to 24px. These 1-2 pixel errors add up and break the vertical rhythm farther down the page. I finally found the fix here and it involves explicitly setting the line height to 1 on inline code elements and the standard vertical rhythm on code elements within pre blocks.

  1. To display an overlay of the vertical rhythm, Click here, then refresh the page.↵
  2. I like David Foster Wallace and I like footnotes too. ↵

Filed under: Typography | Link | Comments (22)

Another Entry Headline

February 06, 1972

The above dateline span is not contained in a class of small cap. Images need to be sized correctly in the vertical to match the existing rhythm, which is 24 pixels. The image height + top/bottom padding + top/bottom border should be evenly divisible by twenty-four. The image below is 252 pixels tall (plus 4 pixels of padding and 1 pixel borders = 260 pixels) and 402 pixels wide. The content div is 410 pixels wide. Again, subtracting the 8 pixels of padding and border equals a max image width of 402 pixels.

We can use these sidenotes for image captions as well

lighthouse graphic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu malesuada ipsum. Nulla semper, nisi id accumsan rhoncus, velit dui consectetur nisi, ac congue eros mauris non diam.

Update: This is paragraph with a class of note, used for updates to entries. Need to add appropriate styling.

Filed under: Photography | Link | Comments (22)