A note from the editors: We’re pleased to share an excerpt from Chapter 2 of Richard Rutter’s new book, Web Typography .
Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader. Then comes along a table with the temptation to get creative, and all thoughts of the reader go out of the window. And yet tables are there to be read, referenced and used, not merely looked at.
Article Continues Below Article Continues Below 12 CommentsNorthwestern Online MS in Information Design & Strategy. Choose from tracks in content strategy, UX/UI, communication with data, and learning design.
A Book Apart:
Brief books for people who make websites.
Tables come in many forms. Some contain simple numbers, others are complex with mixtures of numeric data and textual information. Some require reading row by row, others are scanned vertically. The potential use for tables is as varied as the written word. They can be financial statements, bus timetables, multilanguage dictionaries, tables of contents, numerical conversions, pricing options, feature comparisons, technical specifications, and so on.
Despite the huge variation in table size, complexity, contents and purpose, every table shares two simple design principles: they should be readable and support a sense of the data held within. They should not be prettied up to satisfy a sense of aesthetic when simply looked at. That said, a well-designed table can still be a thing of beauty but with the form following the function. Tables are not pictures of data: they are catalogues of data to be perused, parsed, referenced and interrogated. A well-designed table will enable the information to be read and understood, and will reveal the patterns and correlations inherent in the data. As Jan Tschichold, the virtuoso of typography design, put it in Asymmetric Typography 1 :
To specify tabular lining numerals, set the font-variant-numeric property with a value of lining-nums and tabular-nums :
table
The equivalent properties for legacy browsers requiring font-feature-settings , use the lnum and tnum OpenType feature tags.
If you need to specify proportional numerals, set the font-variant-numeric property with a value of proportional-nums . For legacy browsers requiring font-feature-settings , use the pnum OpenType feature tag.
Having eliminated rules and fills (borders and backgrounds) from your table, you will need to apply white space to your table so your reader can make sense of it. It is at this point that you should remove from your mind’s eye all visions of spreadsheets and other such uniform grids, and think instead in terms of typography and simple gestalt grouping principles.
You will primarily need to separate the data so that each element can be individually identified and read as separate from the others. To have more control over the spacing, first collapse the spacing between borders:
table
In traditional HTML tables, adjacent cells each have their own distinct borders which are separated from each other, with the separation still present even if the borders are not. In the collapsed border model, adjacent table cells share borders. As we are removing (almost) all cell borders, and any we retain will be single key lines, the collapsed border model is the most appropriate.
Now apply padding to the table cells to separate the data. You’ll find that adding a smaller amount of padding to the top of the cell is a useful way to provide a visually balanced separation from the rows above and below. To ensure everything lines up nicely, apply the same padding to heading cells as to data cells. Because line lengths are often very short in tables, you can reduce the line height right down. In the following example, we’ve removed all additional line spacing, but you may need more depending on your choice of font and the amount of text in the table cells.
td, th
The gestalt grouping principles most useful in tables are those of proximity and similarity. Move related data closer together to be distinct from other data; in other words, space apart groups of rows or columns. A by-product of grouping rows is that the data becomes much easier to scan and refer to than if the table consisted of a succession of undifferentiated rows. Ensure data of a similar content or meaning look similar at a glance, which you can do through alignment, colour and font style.
Imperial to metric conversion factors Values are given to three significant figures
… …
You can position the caption either above or below the table using the caption-side property and a corresponding value of either top or bottom .
caption
The following table shows a caption and demonstrates gestalt grouping principles by separating the data into related rows:
Tables regularly require a fair bit of horizontal space to display the information they contain. Even when judiciously designed and edited, a typical table may need to be wider than the 45–75 characters we normally allow for paragraphs of text. For small screens, such as phones, designing readable tables which work under such cramped conditions presents us with a serious challenge. The best approaches always deal with each table on case-by-case basis, but that’s not always possible if we need to generically style whatever comes out of a CMS database.
One immediate approach is to use either a condensed font or a slightly smaller size (but not both smaller and condensed). In both cases, readability must remain paramount and other options should also be explored.
One way to save horizontal space, particularly when you have short pieces of data but long headings, is to set the headings at an oblique angle.
You can use a simple CSS translation to achieve the effect. You will also need to absolutely position the headings so the original width of the columns isn’t retained and they shrink to wrap the data instead.
th < transform-origin: bottom left; position: absolute; >th.degC < transform: translate(2.58em,-2em) rotate(-60deg); >th.degF
The simplest solution to help tables of any size and complexity is to let the browser lay out the table as best it can and render part of the table off-screen as necessary. Provided you then enable your reader to scroll the table sideways independently of the rest of the text, the table can be relatively easily brought into view.
To do this, first wrap your table in a element:
Then apply the following simple rules to hide the portion of the table off-screen and enable your reader to scroll the table without affecting the rest of the text:
.fig-table
It is important not to set a width on your table; the browser can then compress the table as far as it can before overflowing off the screen. To preserve readability, make good use of non-breaking spaces and white-space:nowrap to limit the amount the data wraps in the cells. It’s better to have a readable table that requires scrolling than an unreadable one which doesn’t.
You can safely linearise simple data tables when space is limited. The tables most suitable for this treatment are lists of structured data; for example, an employee directory:
Tables are a frequently overlooked aspect of reading, sometimes overstyled, sometimes poorly thought out. Responsiveness is a particularly thorny issue as the best solutions depend very much on the utility of the table. Tables can be packed with data, rich in content and meaning. Give them the attention they deserve.
This excerpt from Web Typography will help you get started. Order the full copy today.
In this excerpt from Chapter 2 of Richard Rutter’s Web Typography , he explains the importance of proper numeral usage in our work, including when you should and shouldn’t use “old-style” numerals.
How much consideration have you given to how the text of your site is rendered when it’s localized? Do you consider whether your webfonts load in China? How dense your paragraphs appear in Korean? How your buttons grow (or shrink) in Japanese? Senongo Akpem covers all this and more in this excerpt from Cross-Cultural Design.
The work of a web typographer—that’s you—is challenging to say the least. Between highly variable screen sizes (and thereby line lengths), font size variability, and even font availability, it’s difficult to design great reading experiences. Tim Brown’s Flexible Typesetting is here to help.
Richard Rutter is Production Director at Clearleft, a user experience consultancy based in Brighton, UK. He curates The Elements of Typographic Style Applied to the Web, a practical guide to web typography. Richard blogs on a site called Clagnut.
This book is a practical guide and companion reference to all aspects of typography on the web. It deftly combines implementation details with typographic theory, and is ideal for designers, developers and anyone else involved in the process of creating a website.
Get our latest articles in your inbox. Sign up for email alerts.Wonderful article, thank you! I think that the oblique column headers could be simplified a bit, by using max-width:0; overflow:visible; to avoid absolute positioning. This way you don’t have to hardcode different x-offsets for each column.
th { transform-origin: left bottom; transform: translatex(1em) rotate(-60deg); max-width: 0; overflow: visible; white-space: nowrap; }
nefarioustim says:
Great article, thank you. Some European countries switch the comma and period characters around, so that periods separate thousands, and the comma denotes the decimal place. Is it possible to cope with this (without separate CSS rules for language) when attempting to align by decimal with the method you describe?
Webmaster says:TLDR; “The Ultimate Table Guide” — Thanks for the bookmark, I look forward to using: td { text-align: “.” center; }
lqez says: Such a small trivia, HD resolution is usually 1280 x 720 px comes with 16:9 aspect ratio. Tshire says: I used to build the website with bluevoda on my website http://www.bonofe.com and they were stunning Dread_Boy says:Great article, just commenting that tables in it don’t work in mobile view. I’m using updated Chrome on Android. If I switch to desktop view they are fine.
Herr Bert says:Great article, neat snippets, me like very much!
I like the breakdown in “Do not over-stylise tables”(section 10) very much. But how do you deal with the possibility to increase/decrease the column-width by mouse? You can’t see the border between the columns to change the width of a column.
Can you say it’s common sense to do so – even without seeing a styled divider?
Using fonts online and having access to free fonts have come a long way and made designers jobs much more comfortable by having such a vast selection of styles to choose.
Artisan says:Thanks for this article. I must admit I hate tables… They always destroy a nice layout and it’s really time consuming to have them display the way we want… 🙁
Smartmil Toys says: Hey Richard, great article, I agree that since the earlyWe have turned off comments, but you can see what folks had to say before we did so.
At a time when budgets for user experience research seem to have reached an all-time low, how do we get stakeholders and executives alike invested in this crucial discipline? Gerry Duffy walks us through how the research we conduct is much like telling a compelling story, complete with a three-act narrative structure, character development, and conflict resolution—with a happy ending for researchers and stakeholders alike.
User Experience May 30, 2024 June 27, 2024Looking to tailor your UX to your individual users’ needs? Colin Eagan and Jeffrey MacIntyre have a workshop framework for you!
Content Strategy April 16, 2024 April 17, 2024Ste Grainer takes a brief look at the history of the web, where we are now, and how we can shape its future.
State of the Web February 29, 2024 February 29, 2024In this article, Aaron Gustafson muses on some of the many ways we can—and should—harness the capabilities of AI to create a more accessible world.
Accessibility February 07, 2024 February 10, 2024A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career January 29, 2024 February 01, 2024Northwestern Online MS in Information Design & Strategy. Choose from tracks in content strategy, UX/UI, communication with data, and learning design.
Brief books for people who design, write, and code.
Bundle books and save!
Three days of design, code, and content for people who make websites.
See this year’s schedule
ISSN 1534-0295 · Copyright © 1998–2024 A List Apart & Our Authors
