Typographic web design
How to think like a typographer in HTML and CSS.
initial solution
revised
Student Example
Lesson 10: Ferry Schedule
(typographic tabular data)
Meighan Tague, Spring 2010
Meighan chose to work with Verdana. She chose not to incorporate a web font. She wanted to use a blue background to represent water.
Recommendations
The bright blue background is too bright. It makes it harder for readers to concentrate on reading the table. Try dulling down the blue (make it a bit more gray).
There is a large column of space between the third (vessel) and fourth columns. The table starts to read like two separate-yet-related tables. Even out the spacing so all the columns feel like they belong together.
You've set your abbreviations slightly smaller than the numbers, which are lining figures (that is, they are numbers that look like capital rather than lowercase figures). Usually, I would recommend setting both your lining figures (numbers) and your abbreviations a bit smaller than the text so they don't yell. This would make the numbers and abbreviations the same size. However, it works fine here for two reasons: 1] the numbers and abbreviations are not within text; and 2] the numbers here are the most important part of the data!
The "small" text at the bottom of the chart has a too-long line length. It doesn't relate to the chart visually. Try making the line length shorter. Visually relate it to the table. This is a good opportunity to create a strong vertical line (continuation) as well.