Variable fonts are a new font format offering unprecedented flexibility. They will be landing in web browsers and native operating systems within 12 months. Learn how to try them out now.
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.
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 (
- 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: normalis based on font metrics
line-height: nmay create a virtual-area smaller than content-area
vertical-alignis not very reliable
- a line-box’s height is computed based on its children’s
- we cannot easily get/set font metrics with CSS
- there is a related future spec to help with vertical alignment: the Line Grid module
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.
Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Below you can see how the “thin” weight will look in OS X and Windows 7. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms.