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

 

Professional Web Typography by Donny Truong

Presenting beautiful type on your website nowadays could not be easier. With popular web font services such as Adobe Typekit, Google Fonts, and Hoefler &Co.’s Cloud.typography, getting web-ready typefaces to display on a site is as simple as adding one line of markup. Unlike the old days of web design when all you had to work with were a handful of default system fonts (Arial, Verdana, Helvetica, Georgia, and Times New Roman), now you have thousands of fonts to choose from. However, with too many choices at your disposal, the process of selecting and combining typefaces can be time-consuming, overwhelming, and intimidating.

Fortsätt läsa Professional Web Typography by Donny Truong