[{"data":1,"prerenderedAt":90},["ShallowReactive",2],{"post:\u002Fwriting\u002Ftypography":3},{"id":4,"title":5,"body":6,"date":81,"description":82,"extension":83,"meta":84,"navigation":85,"path":86,"seo":87,"stem":88,"__hash__":89},"writing\u002Fwriting\u002Ftypography.md","The numbers behind the type",{"type":7,"value":8,"toc":69},"minimark",[9,14,18,22,25,30,33,37,45,49,62,66],[10,11,13],"h2",{"id":12},"the-column","The column",[15,16,17],"p",{},"The text is 672px — 42rem — plus 24px of padding on either side, giving a 45rem\nframe. The home page uses the same number, so moving from the list into an\narticle does not shift the left and right edges of the words.",[10,19,21],{"id":20},"size-and-line-height","Size and line height",[15,23,24],{},"16px over 28px. Chinese characters fill their em box, so 15px of Chinese reads\nsmaller and tighter than 15px of Latin; the size is a step up from the reference\nfor that reason, and the line height stays at 28px.",[26,27,29],"h3",{"id":28},"how-many-characters-to-a-line","How many characters to a line",[15,31,32],{},"672 ÷ 16 is 42 characters. The working range for setting Chinese is roughly 25\nto 45 to a line, and 42 sits inside it.",[26,34,36],{"id":35},"why-there-is-no-negative-tracking","Why there is no negative tracking",[15,38,39,40,44],{},"The English site this one learned from uses ",[41,42,43],"code",{},"-0.05em",", which corrects Latin\nletterforms. Set on characters that already fill their box, it presses them into\neach other.",[10,46,48],{"id":47},"spacing","Spacing",[50,51,52,56,59],"ul",{},[53,54,55],"li",{},"20px between paragraphs",[53,57,58],{},"44px above a heading, 16px below it",[53,60,61],{},"A 2px rule down the left of a quote",[10,63,65],{"id":64},"headings","Headings",[15,67,68],{},"A heading sits further from what is above it than from what follows, which is\nhow a reader sees at a glance which section it opens.",{"title":70,"searchDepth":71,"depth":71,"links":72},"",2,[73,74,79,80],{"id":12,"depth":71,"text":13},{"id":20,"depth":71,"text":21,"children":75},[76,78],{"id":28,"depth":77,"text":29},3,{"id":35,"depth":77,"text":36},{"id":47,"depth":71,"text":48},{"id":64,"depth":71,"text":65},"2026-06-22","The column, the size, the line height, the paragraph gap, and why each one is the number it is.","md",{},true,"\u002Fwriting\u002Ftypography",{"title":5,"description":82},"writing\u002Ftypography","KmeqYSmWMB2TMrjCJa3HdXUg0heSqyHReXUteIo8MuQ",1789422200987]