CHAPTER 9 The Next Steps for Web Typography
One possible scenario in responsive typography is switching between
style variations and a scale for subheads. For instance, we can set a range of
styles at the same size for small screens — where a single content unit is in
view and the signal is clear — and create more contrast with a typographic
scale for larger screens where there’s much more noise.
Subheads are a great opportunity to add style to a composition. For
an extensive list of options, check out my article “Setting subheads with
CSS^78 ” and the accompanying demo page^79.Data Tables
Tables are becoming a very common element on the Web, handy for com-
paring numerical data, as well as creating connections between arrays of
information. As such they are almost unavoidable in Web applications.
For a clean-slate table, we can use the border-collapse property and the
cellspacing attribute. Preserve the vertical rhythm by adding the bottom
margin rule and, where necessary, override the bottom margin in break-
point-specific CSS files.<table cellspacing="0" cellpadding="0" />
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.5em;
}Horizontal borders are easy on the eye and will add clarity, so we can create
such borders using the border-bottom or border-top property. Next, we set
some padding to let the data breathe, keeping in mind the harmony of the
vertical rhythm. For any column that contains numerical data, we can align
the data to the right so that the values can be easily read and matched up to
one another — singles under singles, tens under tens, and so on.78 http://blog.typekit.com/2013/07/25/setting-subheads-with-css/
79 http://webdesign.maratz.com/lab/subheads/