[{"data":1,"prerenderedAt":416},["ShallowReactive",2],{"page:\u002Fidentity\u002Ftypography":3},{"id":4,"title":5,"body":6,"description":408,"extension":409,"meta":410,"navigation":411,"path":412,"seo":413,"stem":414,"__hash__":415},"pages\u002Fidentity\u002Ftypography.md","Typography",{"type":7,"value":8,"toc":399},"minimark",[9,14,18,25,31,37,48,100,103,114,118,127,131,134,138,145,237,240,244,247,349,353,356],[10,11,13],"h2",{"id":12},"typefaces","Typefaces",[15,16,17],"p",{},"We use three typefaces, each with one job.",[15,19,20,24],{},[21,22,23],"strong",{},"Poppins"," speaks. It is geometric, round and friendly, close in shape to our wordmark, and it gives headlines their character. We use it for display text, headlines, titles and button labels.",[15,26,27,30],{},[21,28,29],{},"Figtree"," explains. It is open and friendly, close to Poppins in spirit but quieter, and very readable at small sizes, with clear figures for amounts and times. We use it for body text, labels, captions, tables and forms. It replaced Inter, which read cold next to the round Poppins.",[15,32,33,36],{},[21,34,35],{},"JetBrains Mono"," spells out. Every character has the same width and none can be mistaken for another: the zero has a dot, and 1, l and I each look different. We use it only for codes someone has to copy or compare.",[15,38,39,40,47],{},"All three are free under the SIL Open Font License, on ",[41,42,46],"a",{"href":43,"rel":44},"https:\u002F\u002Ffonts.google.com",[45],"nofollow","Google Fonts",".",[49,50,51,66],"table",{},[52,53,54],"thead",{},[55,56,57,60,63],"tr",{},[58,59],"th",{},[58,61,62],{},"Weights",[58,64,65],{},"Use",[67,68,69,80,90],"tbody",{},[55,70,71,74,77],{},[72,73,23],"td",{},[72,75,76],{},"500 Medium, 600 Semibold",[72,78,79],{},"Display, headlines, titles, buttons",[55,81,82,84,87],{},[72,83,29],{},[72,85,86],{},"400 Regular, 500 Medium, 600 Semibold",[72,88,89],{},"Body, small labels, captions, numbers",[55,91,92,94,97],{},[72,93,35],{},[72,95,96],{},"400 Regular, 500 Medium",[72,98,99],{},"Codes",[15,101,102],{},"We don't use Poppins below 14px, and we don't use Figtree for headlines.",[15,104,105,106,110,111,47],{},"When a typeface can't be loaded, as in email, fall back to the system font: ",[107,108,109],"code",{},"-apple-system, 'Segoe UI', Roboto, sans-serif",", and for codes ",[107,112,113],{},"ui-monospace, 'SF Mono', Menlo, monospace",[10,115,117],{"id":116},"type-scale","Type scale",[15,119,120,121,123,124,126],{},"Eighteen styles, named the way Material 3 and the app name them: the fifteen the app and the website share, and three that only the website uses. ",[21,122,23],{}," sets everything that speaks: display, headlines, titles and button labels. ",[21,125,29],{}," sets everything you read: body text, small labels and numbers. Samples above 36px are shown smaller; the size column has the real size.",[128,129],"type-table",{":styles":130},"[{\"token\":\"heroNumber\",\"family\":\"Poppins\",\"size\":144,\"line\":144,\"weight\":600,\"sample\":\"08:12\",\"use\":\"Website only. The one big number a section is built around, like the time in A day in the city.\"},{\"token\":\"displayXl\",\"family\":\"Poppins\",\"size\":72,\"line\":76,\"weight\":600,\"sample\":\"Parking, but simple.\",\"use\":\"Website only. The home page title and the big number in the proof band.\"},{\"token\":\"displayLg\",\"family\":\"Poppins\",\"size\":57,\"line\":64,\"weight\":600,\"sample\":\"Parked.\",\"use\":\"Hero numbers and one-word statements on the website.\"},{\"token\":\"displayMd\",\"family\":\"Poppins\",\"size\":45,\"line\":52,\"weight\":600,\"sample\":\"€ 7.04\",\"use\":\"Website hero headlines.\"},{\"token\":\"displaySm\",\"family\":\"Poppins\",\"size\":36,\"line\":44,\"weight\":600,\"sample\":\"1 h 30 min\",\"use\":\"Section openers on the website.\"},{\"token\":\"headlineLg\",\"family\":\"Poppins\",\"size\":28,\"line\":40,\"weight\":600,\"sample\":\"Your parking\",\"use\":\"Screen titles in the app, page headlines.\"},{\"token\":\"headlineMd\",\"family\":\"Poppins\",\"size\":24,\"line\":32,\"weight\":600,\"sample\":\"Your parking\",\"use\":\"Headlines in sheets and dialogs.\"},{\"token\":\"headlineSm\",\"family\":\"Poppins\",\"size\":22,\"line\":28,\"weight\":600,\"sample\":\"Your parking action\",\"use\":\"Smaller headlines and card titles on the website.\"},{\"token\":\"titleLg\",\"family\":\"Poppins\",\"size\":18,\"line\":26,\"weight\":500,\"sample\":\"Keizersgracht\",\"use\":\"Card titles and list headers.\"},{\"token\":\"titleMd\",\"family\":\"Poppins\",\"size\":16,\"line\":24,\"weight\":500,\"sample\":\"Zone 12100, Keizersgracht\",\"use\":\"List item titles.\"},{\"token\":\"titleSm\",\"family\":\"Poppins\",\"size\":14,\"line\":20,\"weight\":500,\"sample\":\"Zone 12100, Keizersgracht\",\"use\":\"Small titles and section labels.\"},{\"token\":\"bodyXl\",\"family\":\"Figtree\",\"size\":18,\"line\":28,\"weight\":400,\"sample\":\"We stop at 17:30.\",\"use\":\"Website only. Body text on the website: the paragraph under a title and the prose of a reading page.\"},{\"token\":\"bodyLg\",\"family\":\"Figtree\",\"size\":16,\"line\":24,\"weight\":400,\"sample\":\"We stop at 17:30.\",\"use\":\"Body text on the website and in long app texts.\"},{\"token\":\"bodyMd\",\"family\":\"Figtree\",\"size\":14,\"line\":22,\"weight\":400,\"sample\":\"We stop your parking action at 17:30.\",\"use\":\"The default body text in the app.\"},{\"token\":\"bodySm\",\"family\":\"Figtree\",\"size\":12,\"line\":18,\"weight\":400,\"sample\":\"Example rates. The app shows the exact rate.\",\"use\":\"Captions, footnotes and helper text.\"},{\"token\":\"labelLg\",\"family\":\"Poppins\",\"size\":16,\"line\":16,\"weight\":500,\"sample\":\"Start parking\",\"use\":\"Large buttons.\"},{\"token\":\"labelMd\",\"family\":\"Poppins\",\"size\":14,\"line\":14,\"weight\":500,\"sample\":\"View invoice\",\"use\":\"Buttons, tabs and segmented controls.\"},{\"token\":\"labelSm\",\"family\":\"Figtree\",\"size\":12,\"line\":12,\"weight\":500,\"sample\":\"Ends soon\",\"use\":\"Tags, chips and small labels. Figtree, because Poppins stays at 14px and up.\"}]",[15,132,133],{},"Sizes are in px, pt in the app. Letter spacing is 0 for every style. Headlines are set in navy, never in light gray. Keep headlines short enough to fit on two lines on a phone.",[10,135,137],{"id":136},"on-smaller-screens","On smaller screens",[15,139,140,141,144],{},"The app has one screen size; the website does not. On the website the large styles step down the scale on smaller screens, so a headline still fits on two lines on a phone. Everything from ",[107,142,143],{},"headlineLg"," down stays the same size everywhere.",[49,146,147,160],{},[52,148,149],{},[55,150,151,154,157],{},[58,152,153],{},"Style",[58,155,156],{},"Tablet (up to 1024px)",[58,158,159],{},"Phone (up to 768px)",[67,161,162,179,194,209,223],{},[55,163,164,169,174],{},[72,165,166],{},[107,167,168],{},"heroNumber",[72,170,171],{},[107,172,173],{},"displayXl",[72,175,176],{},[107,177,178],{},"displayLg",[55,180,181,185,189],{},[72,182,183],{},[107,184,173],{},[72,186,187],{},[107,188,178],{},[72,190,191],{},[107,192,193],{},"displaySm",[55,195,196,200,205],{},[72,197,198],{},[107,199,178],{},[72,201,202],{},[107,203,204],{},"displayMd",[72,206,207],{},[107,208,193],{},[55,210,211,215,219],{},[72,212,213],{},[107,214,204],{},[72,216,217],{},[107,218,193],{},[72,220,221],{},[107,222,143],{},[55,224,225,229,233],{},[72,226,227],{},[107,228,193],{},[72,230,231],{},[107,232,193],{},[72,234,235],{},[107,236,143],{},[15,238,239],{},"The step is always to another style on the scale, never to a size in between.",[10,241,243],{"id":242},"on-the-website","On the website",[15,245,246],{},"A website is read from further away than a phone, so body and title text on the website sit one step up the scale from where the app has them. The headlines, display styles and labels stay as they are.",[49,248,249,261],{},[52,250,251],{},[55,252,253,256,259],{},[58,254,255],{},"Text",[58,257,258],{},"In the app",[58,260,243],{},[67,262,263,278,292,306,321,335],{},[55,264,265,268,273],{},[72,266,267],{},"Body text, the paragraph under a title",[72,269,270],{},[107,271,272],{},"bodyLg",[72,274,275],{},[107,276,277],{},"bodyXl",[55,279,280,283,288],{},[72,281,282],{},"Text in a card or a row",[72,284,285],{},[107,286,287],{},"bodyMd",[72,289,290],{},[107,291,272],{},[55,293,294,297,302],{},[72,295,296],{},"Captions, footnotes, helper text",[72,298,299],{},[107,300,301],{},"bodySm",[72,303,304],{},[107,305,287],{},[55,307,308,311,316],{},[72,309,310],{},"Small titles and section labels",[72,312,313],{},[107,314,315],{},"titleSm",[72,317,318],{},[107,319,320],{},"titleMd",[55,322,323,326,330],{},[72,324,325],{},"List item titles",[72,327,328],{},[107,329,320],{},[72,331,332],{},[107,333,334],{},"titleLg",[55,336,337,340,344],{},[72,338,339],{},"Card titles",[72,341,342],{},[107,343,334],{},[72,345,346],{},[107,347,348],{},"headlineSm",[10,350,352],{"id":351},"numbers-and-codes","Numbers and codes",[15,354,355],{},"Amounts, times and durations are the most important text we show.",[357,358,359,371,379,382,388,391],"ul",{},[360,361,362,363,366,367,370],"li",{},"Set them in ",[21,364,365],{},"Figtree with tabular figures"," (",[107,368,369],{},"font-variant-numeric: tabular-nums","), so a running timer or a column of amounts doesn't jump.",[360,372,373,374,378],{},"Write them the way the ",[41,375,377],{"href":376},"\u002Fvoice\u002Frules","writing rules"," say: € 0.29 · 17:30 · 2 hours.",[360,380,381],{},"A large number, like the time left on a parking action, may use Poppins Semibold.",[360,383,384,387],{},[21,385,386],{},"Codes are set in JetBrains Mono",": invite codes, payment references, invoice numbers, and colors and tokens in our own documentation. Use it at the same size as the text around it, or one step smaller.",[360,389,390],{},"Amounts, times, dates and zone codes are not codes in this sense. They stay in Figtree. If it is something people read rather than type, it isn't mono.",[360,392,393,394,398],{},"License plates are shown in the ",[41,395,397],{"href":396},"\u002Fdesign-system\u002Flicence-plate","license plate"," component, not typed out in a typeface that imitates a plate.",{"title":400,"searchDepth":401,"depth":401,"links":402},"",2,[403,404,405,406,407],{"id":12,"depth":401,"text":13},{"id":116,"depth":401,"text":117},{"id":136,"depth":401,"text":137},{"id":242,"depth":401,"text":243},{"id":351,"depth":401,"text":352},"Our typefaces, the type scale and when to use which.","md",{},true,"\u002Fidentity\u002Ftypography",{"title":5,"description":408},"identity\u002Ftypography","CZqN1FgPpUpFuWgVyxsPkWW7nNnC1KjxNoNcd9SMj5c",1792779480807]