Variable fonts & the new Google Fonts API | Responsive Web Typography

Google Variable fonts

Open Type formatet Variabla typsnitt har utvecklats av Microsoft, Google, Apple och Adobe. Google har nu tagit fram ett antal typsnittsfiler som kan anropas direkt med Googles API.

Open Type Variable Fonts innehåller flera olika vikter och stilar i en och samma fil. Det innebär att man kan utnyttja fler, korrekta fonter i ett och samma serveranrop vilket, korthet, betyder snabbare webbsida, lättare formgivning och lättare kodning för utvecklarna.

Lek och testa variable fonts: https://v-fonts.com/

Källa: Variable fonts & the new Google Fonts API | Responsive Web Typography

Web Typography & Layout: Past, Present, and Future

Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman—discuss typography and layout on today’s web: where we are now, and where we’re going.

Källa: Web Typography & Layout: Past, Present, and Future

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