{"data":{"post":{"title":"Notes on Design of Gatsblog","subtitle":"","isPublished":true,"createdTime":"2019-03-03T00:00:00.000Z","lastModifiedTime":null,"license":null,"tags":["Blog","Design","Gatsblog"],"category":"Showcase","file":{"childMdx":{"excerpt":"This post has been revisited with LLM technology to improve its English\nfluency. I had limited time…","code":{"body":"function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nconst layoutProps = {};\nreturn class MDXContent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.layout = null;\n  }\n\n  render() {\n    const _this$props = this.props,\n          {\n      components\n    } = _this$props,\n          props = _objectWithoutProperties(_this$props, [\"components\"]);\n\n    return React.createElement(MDXTag, {\n      name: \"wrapper\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"blockquote\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"p\",\n      components: components,\n      parentName: \"blockquote\"\n    }, `This post has been revisited with LLM technology to improve its English\nfluency.`)), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `I had limited time to create a modern design for the first version of Gatsblog.\nThe design is somewhat \"old school,\" but I carefully tuned the grid system to\nachieve a high-quality layout.`), React.createElement(MDXTag, {\n      name: \"h2\",\n      components: components\n    }, `Grid System`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Grid systems are common in modern design across various fields. They help\ndesigners create layouts with consistent rhythm.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/2f953/traditional-grid-system.webp\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"picture\",\n      components: components,\n      parentName: \"a\"\n    }, `\n  `, React.createElement(MDXTag, {\n      name: \"source\",\n      components: components,\n      parentName: \"picture\",\n      props: {\n        \"src\": \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/0cc25/traditional-grid-system.png\",\n        \"srcSet\": [\"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/5116e/traditional-grid-system.png 178w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/92f55/traditional-grid-system.png 356w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/0cc25/traditional-grid-system.png 712w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/77d3d/traditional-grid-system.png 962w\"],\n        \"sizes\": \"(max-width: 712px) 100vw, 712px\"\n      }\n    }), React.createElement(MDXTag, {\n      name: \"source\",\n      components: components,\n      parentName: \"picture\",\n      props: {\n        \"src\": \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/690c8/traditional-grid-system.webp\",\n        \"srcSet\": [\"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/25c8a/traditional-grid-system.webp 178w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/60698/traditional-grid-system.webp 356w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/690c8/traditional-grid-system.webp 712w\", \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/2f953/traditional-grid-system.webp 962w\"],\n        \"sizes\": \"(max-width: 712px) 100vw, 712px\"\n      }\n    }), `\n  `, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"picture\",\n      props: {\n        \"src\": \"/static/a8ddd5d9a7f4de72ac7de1f99c2bc111/2f953/traditional-grid-system.webp\",\n        \"alt\": \"Traditional Grid System\",\n        \"title\": \"Traditional Grid System\",\n        \"width\": 712,\n        \"height\": 697,\n        \"loading\": \"lazy\"\n      }\n    }))), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Traditional Grid System\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `However, I did not use traditional grid systems like the one shown above.`), React.createElement(MDXTag, {\n      name: \"h2\",\n      components: components\n    }, `Typography`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Text is the most important element of a blog. Latin characters have a unique\nrhythm distinct from regular geometric shapes.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/bd17f59e516723edbad0c5b33484ba0a/e331b/typography-explained.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Typography Explained\",\n        \"alt\": \"Typography Explained\",\n        \"src\": \"/static/bd17f59e516723edbad0c5b33484ba0a/e331b/typography-explained.png\",\n        \"srcSet\": [\"/static/bd17f59e516723edbad0c5b33484ba0a/e331b/typography-explained.png 1x\", \"/static/ee75ab2442149440d31aabec0a82099f/62def/typography-explained%402x.png 2x\", \"/static/3936677a6553dd8539ae58fdd9a2a78c/3bed8/typography-explained%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Typography Explained\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Since Latin characters have more dimensions than simple height and width,\nlaying them out is more complex than arranging regular geometric shapes. To\nhandle these complex shapes, I simplify them into basic rectangles.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/e31dca4d64cb6e7e3405c2c5f0f68b3c/e331b/another-perspective-to-typography.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Another Perspective to Typography\",\n        \"alt\": \"Another Perspective to Typography\",\n        \"src\": \"/static/e31dca4d64cb6e7e3405c2c5f0f68b3c/e331b/another-perspective-to-typography.png\",\n        \"srcSet\": [\"/static/e31dca4d64cb6e7e3405c2c5f0f68b3c/e331b/another-perspective-to-typography.png 1x\", \"/static/a177bf63aad402cf76e4ae3c41d665e8/62def/another-perspective-to-typography%402x.png 2x\", \"/static/dbc92a1b76e8f8d8c58d792b1a58a132/3bed8/another-perspective-to-typography%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Another Perspective to Typography\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Note that the simplified geometry of the letter \"x\" is much smaller than that\nof the capital letter \"K.\" In fact, the size differences between simplified\nletter geometries vary with font size. How should we understand these size\ngaps?`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `The letter-frequency table below comes from Pavel Mička's website`, React.createElement(MDXTag, {\n      name: \"sup\",\n      components: components,\n      parentName: \"p\",\n      props: {\n        \"id\": \"fnref-1\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"sup\",\n      props: {\n        \"href\": \"#fn-1\",\n        \"className\": \"footnote-ref\"\n      }\n    }, `1`)), `, which\ncites Robert Lewand's `, React.createElement(MDXTag, {\n      name: \"em\",\n      components: components,\n      parentName: \"p\"\n    }, `Cryptological Mathematics`), `.`), React.createElement(MDXTag, {\n      name: \"table\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"thead\",\n      components: components,\n      parentName: \"table\"\n    }, React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"thead\"\n    }, React.createElement(MDXTag, {\n      name: \"th\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `Letter`), React.createElement(MDXTag, {\n      name: \"th\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `Relative Frequency in English Language (%)`))), React.createElement(MDXTag, {\n      name: \"tbody\",\n      components: components,\n      parentName: \"table\"\n    }, React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `e`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `12.02`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `t`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `9.10`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `a`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `8.12`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `o`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `7.68`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `i`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `7.31`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `n`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `6.95`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `s`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `6.28`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `r`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `6.02`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `h`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `5.92`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `d`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `4.32`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `l`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `3.98`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `u`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.88`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `c`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.71`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `m`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.61`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `f`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.30`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `y`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.11`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `w`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.09`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `g`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `2.03`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `p`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `1.82`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `b`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `1.49`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `v`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `1.11`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `k`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `0.69`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `x`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `0.17`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `q`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `0.11`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `j`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `0.10`)), React.createElement(MDXTag, {\n      name: \"tr\",\n      components: components,\n      parentName: \"tbody\"\n    }, React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `z`), React.createElement(MDXTag, {\n      name: \"td\",\n      components: components,\n      parentName: \"tr\",\n      props: {\n        \"align\": \"center\"\n      }\n    }, `0.07`)))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `The table does not distinguish between capital and lowercase letters. Since\nwe use capital letters only at the beginning of sentences, for terminology,\nand in titles, this distinction would not significantly affect the table's\ntrends.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `From this table, we can see that 60.82% of English text uses lowercase\nletters with x-height (like \"x\"), and 6.17% use lowercase letters with\ndescenders (like \"j\"). This means that for a given font at a small enough\nsize, the descenders, `, React.createElement(MDXTag, {\n      name: \"inlineCode\",\n      components: components,\n      parentName: \"p\"\n    }, `(ascents - x-height)`), `, and `, React.createElement(MDXTag, {\n      name: \"inlineCode\",\n      components: components,\n      parentName: \"p\"\n    }, `(cap-height - x-height)`), `\nbecome negligible. The simplified geometries of characters in paragraph lines\nconverge to rectangles with heights equal to the x-height.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/2670950dce5803b3f7da8037320ad9f1/c2823/font-geometry-convergence-example.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Font Geometry Convergence Example\",\n        \"alt\": \"Font Geometry Convergence Example\",\n        \"src\": \"/static/2670950dce5803b3f7da8037320ad9f1/c2823/font-geometry-convergence-example.png\",\n        \"srcSet\": [\"/static/2670950dce5803b3f7da8037320ad9f1/c2823/font-geometry-convergence-example.png 1x\", \"/static/64c809a7c791307a647048673734fdca/b8b1b/font-geometry-convergence-example%402x.png 2x\", \"/static/6cb940ff37b3faa7154d1a0675d08164/fb7a5/font-geometry-convergence-example%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Font Geometry Convergence Example\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `Therefore, we can treat English text with regular fonts at small sizes as\nrectangles with heights equal to the font's x-height in practical design.`), React.createElement(MDXTag, {\n      name: \"h2\",\n      components: components\n    }, `Series`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `A series is a set of quantities determined by a common relation—the\nmathematical concept of \"series.\"`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `When discussing grid systems, we refer to the rhythm of element sizes and\nspacing. This rhythm should possess inherent beauty. The golden ratio is the\nideal choice, but deriving sizes and spaces from a base value using the\ngolden ratio is tedious. I chose the Fibonacci series instead.`), React.createElement(MDXTag, {\n      name: \"pre\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"code\",\n      components: components,\n      parentName: \"pre\",\n      props: {}\n    }, `1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...\n`)), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `By removing the first four numbers, we get a series suitable for practical\ndesign:`), React.createElement(MDXTag, {\n      name: \"pre\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"code\",\n      components: components,\n      parentName: \"pre\",\n      props: {}\n    }, `5, 8, 13, 21, 34, 55, 89, 144...\n`)), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `To simplify further, we can use just the first five numbers:`), React.createElement(MDXTag, {\n      name: \"pre\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"code\",\n      components: components,\n      parentName: \"pre\",\n      props: {}\n    }, `5, 8, 13, 21, 34\n`)), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `I used these five numbers throughout my design. All sizes and spaces on my\nblog are multiples of these five numbers.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/f88a55f01cea94dfaf5765a9dc501673/52547/navigation-bar-horizontal.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Navigation Bar Horizontal\",\n        \"alt\": \"Navigation Bar Horizontal\",\n        \"src\": \"/static/f88a55f01cea94dfaf5765a9dc501673/52547/navigation-bar-horizontal.png\",\n        \"srcSet\": [\"/static/f88a55f01cea94dfaf5765a9dc501673/52547/navigation-bar-horizontal.png 1x\", \"/static/40f818655a6cf4d59eb7bbd97b0bb57c/e2999/navigation-bar-horizontal%402x.png 2x\", \"/static/f0564cb3aa6347bc225c4bc07af47e32/7b504/navigation-bar-horizontal%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Navigation Bar Horizontal\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/dd84f1719e53d9467d2358e3c1ff0fe6/52547/navigation-bar-vertical.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Navigation Bar Vertical\",\n        \"alt\": \"Navigation Bar Vertical\",\n        \"src\": \"/static/dd84f1719e53d9467d2358e3c1ff0fe6/52547/navigation-bar-vertical.png\",\n        \"srcSet\": [\"/static/dd84f1719e53d9467d2358e3c1ff0fe6/52547/navigation-bar-vertical.png 1x\", \"/static/07d060ed98b72a4434fcf5f44966dd6f/e2999/navigation-bar-vertical%402x.png 2x\", \"/static/9cf37f7abadd49b1a5b61c6e2b35d7bf/7b504/navigation-bar-vertical%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Navigation Bar Vertical\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/c3c8ccfdd11740712acb560d143ee3d5/d885d/table-of-contents.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Table of Contents\",\n        \"alt\": \"Table of Contents\",\n        \"src\": \"/static/c3c8ccfdd11740712acb560d143ee3d5/d885d/table-of-contents.png\",\n        \"srcSet\": [\"/static/c3c8ccfdd11740712acb560d143ee3d5/d885d/table-of-contents.png 1x\", \"/static/0794b0b401df6de1b85d7ab965de3152/93c01/table-of-contents%402x.png 2x\", \"/static/fa0527b62a7a7302ee01933cf384a61d/16cd7/table-of-contents%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Table of Contents\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, `For Latin characters at large font sizes, the descent and differences\nbetween ascent and x-height or cap-height and x-height become significant.\nFor these cases, I still size the font's x-height to match a particular\nseries number, but we must account for the ascent and cap-height.`), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/151b84a38340505e214c3e342a6a241c/1edbe/post-excerpt.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Post Excerpt\",\n        \"alt\": \"Post Excerpt\",\n        \"src\": \"/static/151b84a38340505e214c3e342a6a241c/1edbe/post-excerpt.png\",\n        \"srcSet\": [\"/static/151b84a38340505e214c3e342a6a241c/1edbe/post-excerpt.png 1x\", \"/static/3186c2ccace2f29b4478a92d63740eb0/53d59/post-excerpt%402x.png 2x\", \"/static/312208858ac57a488e798ab1fd52da47/cdc8d/post-excerpt%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Post Excerpt\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"p\",\n      components: components\n    }, React.createElement(MDXTag, {\n      name: \"figure\",\n      components: components,\n      parentName: \"p\"\n    }, `\n    `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"figure\",\n      props: {\n        \"href\": \"/static/4a76b5d30713116a325202b9e072858e/f62da/post-title.png\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"img\",\n      components: components,\n      parentName: \"a\",\n      props: {\n        \"title\": \"Post Title\",\n        \"alt\": \"Post Title\",\n        \"src\": \"/static/4a76b5d30713116a325202b9e072858e/f62da/post-title.png\",\n        \"srcSet\": [\"/static/4a76b5d30713116a325202b9e072858e/f62da/post-title.png 1x\", \"/static/5c25077680c7007d70b0447930f949be/968d4/post-title%402x.png 2x\", \"/static/6da470a22ac4585fcc9f128e7a0783e8/0fa87/post-title%403x.png 3x\"],\n        \"loading\": \"lazy\"\n      }\n    })), `\n    `, React.createElement(MDXTag, {\n      name: \"figcaption\",\n      components: components,\n      parentName: \"figure\"\n    }, `\n        `, React.createElement(MDXTag, {\n      name: \"span\",\n      components: components,\n      parentName: \"figcaption\"\n    }, `\n            Post Title\n        `), `\n    `))), React.createElement(MDXTag, {\n      name: \"div\",\n      components: components,\n      props: {\n        \"className\": \"footnotes\"\n      }\n    }, React.createElement(MDXTag, {\n      name: \"hr\",\n      components: components,\n      parentName: \"div\"\n    }), React.createElement(MDXTag, {\n      name: \"ol\",\n      components: components,\n      parentName: \"div\"\n    }, React.createElement(MDXTag, {\n      name: \"li\",\n      components: components,\n      parentName: \"ol\",\n      props: {\n        \"id\": \"fn-1\"\n      }\n    }, `Mička, Pavel. `, React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"li\",\n      props: {\n        \"href\": \"http://en.algoritmy.net/article/40379/Letter-frequency-English\"\n      }\n    }, `\"Letter frequency (English)\"`), React.createElement(MDXTag, {\n      name: \"a\",\n      components: components,\n      parentName: \"li\",\n      props: {\n        \"href\": \"#fnref-1\",\n        \"className\": \"footnote-backref\"\n      }\n    }, `↩`)))));\n  }\n\n}\nMDXContent.isMDXComponent = true;","scope":""},"headings":[{"value":"Grid System","depth":2},{"value":"Typography","depth":2},{"value":"Series","depth":2}]}}},"earlierPostExcerpt":{"slug":"/post/2019/03/an-introduction-to-gatsblog-5eca","title":"An Introduction to Gatsblog","subtitle":"A Blog Built with Gatsby.js","createdTime":"2019-03-02T00:00:00.000Z","tags":["Blog","Design","Programming","Gatsblog"],"category":"Showcase","file":{"childMdx":{"excerpt":"This post has been revisited with LLM technology to improve its English\nfluency. As mentioned in my Hello World post, no existing blog system fully meets my\nneeds, especially given my deep involvement with frontend technology. This led me to create my own solution. This post documents my journey…"}}},"laterPostExcerpt":{"slug":"/post/2019/03/notes-on-implementation-of-gatsblog-fef0","title":"Notes On Implementation of Gatsblog","subtitle":"","createdTime":"2019-03-04T00:00:00.000Z","tags":["Blog","Programming","Gatsblog"],"category":"Showcase","file":{"childMdx":{"excerpt":"This post has been revisited with LLM technology to improve its English\nfluency. In this post, I'll discuss the implementation of Gatsblog, a blog system\nbuilt with Gatsby.js. If you missed my previous posts about the overview and\ndesign of Gatsblog, please check them for context about the…"}}}},"pageContext":{"postId":"10d7b0ff-a57b-5ed6-8009-210fb03be8e7","earlierPostId":"ae21300f-a727-599f-a4f6-90375edebef3","laterPostId":"b0391bd1-0091-590a-80f2-6b6cb0632e4d"}}