For designers
Set line length in characters with ch
A unit as wide as the 0 in the current typeface, so a text box can be sized by how many characters fit on a line.
For designers
How CSS works today, and what it means for your designs. Each page takes one idea, lets you try it, and says what to note in Figma and what to ask a developer for.
For designers
Size text with rem and em, not px
Sizes in rem follow the reader's own text setting and sizes in px ignore it; sizes in em follow the text they sit in.
For designers
Fluid type with clamp()
Text that grows smoothly with the screen, between a smallest and a largest size, written as one clamp() value.
For designers
Balance headings and paragraphs with text-wrap
Two lines of CSS that even out ragged headings and stop paragraphs ending on a single word.
For designers
Grids that fit their space without breakpoints
One line of CSS that fits as many columns as there's room for, at a width you choose, and reflows the cards as the space changes.
For designers
Share out space with grid and fr
The fr unit splits the space in a row by ratio, so an image can take 40% of a card at every width, in CSS grid and in Figma's grid.
For designers
Components that respond to their own space
Container queries let a component change its layout by the space it's given, not by the size of the screen, so it works anywhere it's placed.
For designers
Line up the parts of cards with subgrid
Subgrid lets the cards in a row share one set of rows, so titles and estimates line up across the row, however long the text in each card.
For designers
Full-height sections on phones, with svh, lvh and dvh
On a phone the browser's address bar comes and goes, so "the height of the screen" has two answers. The viewport units let you choose which one a design uses.
For designers
Design for short screens with vertical breakpoints
Breakpoints usually follow the width of the screen, but laptops are often short. A height query lets a page change its layout when there isn't room above the fold.