Type and layout lab

Move the type, the grid, and the line length. The CSS changes with them.

Clay, fired on Saturdays.

A small ceramics studio. Bowls, cups, and a few larger pieces, made in small batches and sold from the shop.

Open Saturdays

Checking the line length.

Arrangement

Columns

Gutter18pxMargin40px

Type scale

Base size20px

Note15px
Text20px
Title35.54px
Display63.15px

Line height1.35Letter spacing-0.03em

Pairing

CSS

:root {
  --type-base: 20px;
  --type-ratio: 1.333;
  --type-note: 15px;
  --type-body: 20px;
  --type-title: 35.54px;
  --type-display: 63.15px;
  --leading: 1.35;
  --tracking: -0.03em;
  --grid-columns: 12;
  --grid-gutter: 18px;
  --grid-margin: 40px;
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Instrument Sans", Helvetica, sans-serif;
}

.composition {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: min(var(--grid-gutter), 4vw);
  row-gap: calc(min(var(--grid-gutter), 4vw) + 0.65rem);
  padding: var(--grid-margin);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
}

.composition h2 {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 63.15px;
}

.composition p {
  grid-column: 1 / span 7;
}

.composition .note {
  grid-column: 1 / -1;
  font-size: var(--type-note);
}