Web Typography: Designing Tables to be Read, Not Looked At | A List A Part

In this excerpt from Web Typography, Richard Rutter explains how to improve the readability of your data tables.

Intressant, lärorikt och hjälpsamt för webbtypografen: Web Typography: Designing Tables to be Read, Not Looked At

Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira

An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS.

Läs och begrunda: Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira

 

What we learned (TL;DR):

  • inline formatting context is really hard to understand
  • all inline elements have 2 height:
    • the content-area (based on font metrics)
    • the virtual-area (line-height)
    • none of these 2 heights can be visualize with no doubt. (if you’re a devtools developer and want to work on this, it could be awesome)
  • line-height: normal is based on font metrics
  • line-height: n may create a virtual-area smaller than content-area
  • vertical-align is not very reliable
  • a line-box’s height is computed based on its children’s line-height and vertical-align properties
  • we cannot easily get/set font metrics with CSS
  • there is a related future spec to help with vertical alignment: the Line Grid module

 

mightyCrow/tipograf: Lightweight pure CSS typography base for your next project

tipograf is a Lightweight typography base. It is available in pure CSS or Less. Heavily inspired by Medium, it tries to enforce good vertical rhythm.

Kolla in projektet på GitHub: mightyCrow/tipograf: Lightweight pure CSS typography base for your next project