Etikett: css

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: 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