Type
Playground
Little Letters
Trace the letter B
Start at the top, go down, then two bumps. You earned three stars yesterday. Can you get four?
Tokens
The pairing as CSS
/* Playground · type pairing · Designed using Design Lounge (https://www.designlounge.live) */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Nunito:wght@400;600;800&display=swap");
:root {
--font-display: "Baloo 2", "Helvetica Neue", Arial, sans-serif;
--font-text: "Nunito", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
body {
font-family: var(--font-text);
font-weight: 400;
line-height: 1.55;
}
/* No mono in this pairing. Code uses the system mono; amounts stay in the text face with even-width digits. */
code, kbd, samp, .mono {
font-family: var(--font-mono);
}
.num {
font-family: var(--font-text);
font-variant-numeric: tabular-nums;
}