[{"data":1,"prerenderedAt":100},["ShallowReactive",2],{"blog-typography-scale-pairing-generator-turn-font-choices-into-tokens\u002F":3},{"id":4,"title":5,"author":6,"body":9,"date":85,"description":86,"extension":87,"image":88,"meta":89,"navigation":90,"path":91,"published":90,"seo":92,"stem":93,"tags":94,"__hash__":99},"blog\u002Fblog\u002Ftypography-scale-pairing-generator-turn-font-choices-into-tokens.md","Typography Scale & Pairing Generator: Turn Font Choices Into Tokens",{"name":7,"to":8},"Brand Peel Team","https:\u002F\u002Fx.com\u002Fjonasfroeller",{"type":10,"value":11,"toc":79},"minimark",[12,16,19,24,33,56,59,63,71],[13,14,15],"p",{},"Font choices are only useful when they become system rules.",[13,17,18],{},"A founder can pick a heading font and a body font quickly. The harder part is deciding how those fonts behave in product UI, marketing pages, documentation, and launch assets.",[20,21,23],"h2",{"id":22},"what-to-generate","What to generate",[13,25,26,27,32],{},"The ",[28,29,31],"a",{"href":30},"\u002Ftools\u002Ftypography-scale-pairing-generator","Typography Scale & Pairing Generator"," creates:",[34,35,36,40,43,46,53],"ul",{},[37,38,39],"li",{},"font pairing notes",[37,41,42],{},"responsive type steps",[37,44,45],{},"CSS variables",[37,47,48,52],{},[49,50,51],"code",{},"clamp()"," values",[37,54,55],{},"usage rules for headings, body copy, labels, and hero type",[13,57,58],{},"That makes typography easier to move into production.",[20,60,62],{"id":61},"connect-it-to-tokens","Connect it to tokens",[13,64,65,66,70],{},"After creating the scale, move the output into the ",[28,67,69],{"href":68},"\u002Ftools\u002Fdesign-token-starter-generator","Design Token Starter Generator",".",[13,72,73,74,78],{},"Then capture the font roles inside the ",[28,75,77],{"href":76},"\u002Ftools\u002Fai-brand-context-generator","AI Brand Context \u002F DESIGN.md Generator"," so coding agents preserve the system.",{"title":80,"searchDepth":81,"depth":81,"links":82},"",2,[83,84],{"id":22,"depth":81,"text":23},{"id":61,"depth":81,"text":62},"2026-08-17","Define font roles, clamp values, CSS variables, and usage rules for a brand typography scale.","md",null,{},true,"\u002Fblog\u002Ftypography-scale-pairing-generator-turn-font-choices-into-tokens",{"title":5,"description":86},"blog\u002Ftypography-scale-pairing-generator-turn-font-choices-into-tokens",[95,96,97,98],"typography","design-tokens","css","brand-system","euuKWnQPYqPUVg0DFdOkjLUcAOIuXZHQ-wewpN6tm9o",1786925788266]