mirror of
https://github.com/foo-dogsquared/wiki.git
synced 2025-01-31 01:57:54 +00:00
49 lines
14 KiB
HTML
49 lines
14 KiB
HTML
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Practical typography</title><script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><script type="text/x-mathjax-config">
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [ ['$','$'], ['\(','\)'] ],
|
|
displayMath: [ ['$$','$$'], ['[',']'] ]
|
|
},
|
|
options = {
|
|
processHtmlClass = "math"
|
|
}
|
|
}
|
|
</script><meta name="next-head-count" content="6"/><link rel="preload" href="/wiki/_next/static/css/52fc2ba29703df73922c.css" as="style"/><link rel="stylesheet" href="/wiki/_next/static/css/52fc2ba29703df73922c.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/wiki/_next/static/chunks/main-ae4733327bd95c4ac325.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/framework.9d524150d48315f49e80.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/commons.0e1c3f9aa780c2dfe9f0.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/pages/_app-8e3d0c58a60ec788aa69.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/940643274e605e7596ecea1f2ff8d83317a3fb76.4841a16762f602a59f00.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/pages/%5B%5B...slug%5D%5D-1aa198f87ede1cd0e1dc.js" as="script"/></head><body><div id="__next"><main><h1>Practical typography</h1><section class="post-metadata"><span>Date: <!-- -->2021-06-19 21:11:45 +08:00</span><span>Date modified: <!-- -->2021-06-19 23:07:28 +08:00</span></section><nav class="toc"><ol class="toc-level toc-level-1"></ol></nav><p>One of my favorite books especially with well-written summaries for each topic.
|
|
</p><ul><li><p>typography is relevant for everyone who writes
|
|
</p></li><li><p>what typography is:
|
|
</p><ul><li><p>involved whenever the text is displayed by the billboard, printed in a paper, or drafted in the wall
|
|
</p></li><li><p>has a function just like photography or web design where practitioners will use whatever techniques to raise the level of their work
|
|
</p></li><li><p><strong>main function is to hold reader attention</strong></p></li><li><p>a tool to improve your writing
|
|
</p></li></ul></li><li><p>what typography is not:
|
|
</p><ul><li><p>usage of fonts (or entirely composed of fonts)
|
|
</p></li><li><p>a substitute for your writing
|
|
</p></li></ul></li><li><p>what good typography is:
|
|
</p><ul><li><p>reinforces your message
|
|
</p></li><li><p>goal-oriented and utilitarian, not based on taste;
|
|
an aesthetically pleasing text that doesn't enforce your message is considered a failure;
|
|
otherwise, an unappealing look that does reinforce your text is considered a success
|
|
</p></li></ul></li><li><p>spacing before and after are more subtle and effective
|
|
</p></li><li><p>prefer bold over italics since it is easier to see
|
|
</p></li><li><p>while justified alignment looks nice, often they don't look well when applied automatically with software;
|
|
in such case, prefer left-align instead
|
|
</p></li><li><p>fonts usage:
|
|
</p><ul><li><p>prefer to use two sets of fonts for the body and the headings
|
|
</p></li><li><p>it doesn't mean to use two different font families, though;
|
|
you can use one font family by setting the headings to use bold
|
|
</p></li><li><p>use point size larger than 12pt, another old habit from newspapers;
|
|
oftentimes it is not enough to see it in our display and it forces the user to go closer to the display (not exactly what you want)
|
|
</p></li></ul></li><li><p>paragraphs:
|
|
</p><ul><li><p>no double-spacing per sentence, it is an old and unnecessary habit picked up for today
|
|
</p></li><li><p>one way to mark a paragraph is first-line indents
|
|
</p></li><li><p>another is newlines at the end of the paragraph
|
|
</p></li><li><p>choose only one way to mark a paragraph otherwise it is overkill
|
|
</p></li><li><p>avoid widows and orphans;
|
|
most software lets you do this automatically
|
|
</p></li><li><p>line spacing shouldn't be single spaced as it will make dense lines and hard to read;
|
|
otherwise, it also shouldn't be doubly spaced since it will make loose lines;
|
|
the ideal spacing is between 120% to 150% (of course, depending on the font)
|
|
</p></li></ul></li><li><p>headings:
|
|
</p><ul><li><p>should structure your arguments, not your document
|
|
</p></li><li><p>prefer in title cases because your headings are not titles
|
|
</p></li><li><p>limit to 2/3 levels of heading, otherwise, it will make navigation confusing (unless you're writing a technical specification)
|
|
</p></li></ul></li></ul></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"metadata":{"date":"\"2021-06-19 21:11:45 +08:00\"","date_modified":"\"2021-06-19 23:07:28 +08:00\"","language":"en","source":""},"title":"Practical typography","hast":{"type":"root","children":[{"type":"element","tagName":"nav","properties":{"className":"toc"},"children":[{"type":"element","tagName":"ol","properties":{"className":"toc-level toc-level-1"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One of my favorite books especially with well-written summaries for each topic.\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"typography is relevant for everyone who writes\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"what typography is:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"involved whenever the text is displayed by the billboard, printed in a paper, or drafted in the wall\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"has a function just like photography or web design where practitioners will use whatever techniques to raise the level of their work\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"main function is to hold reader attention"}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"a tool to improve your writing\n"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"what typography is not:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"usage of fonts (or entirely composed of fonts)\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"a substitute for your writing\n"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"what good typography is:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"reinforces your message\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"goal-oriented and utilitarian, not based on taste;\n an aesthetically pleasing text that doesn't enforce your message is considered a failure;\n otherwise, an unappealing look that does reinforce your text is considered a success\n"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"spacing before and after are more subtle and effective\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"prefer bold over italics since it is easier to see\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"while justified alignment looks nice, often they don't look well when applied automatically with software;\n in such case, prefer left-align instead\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"fonts usage:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"prefer to use two sets of fonts for the body and the headings\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"it doesn't mean to use two different font families, though;\n you can use one font family by setting the headings to use bold\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"use point size larger than 12pt, another old habit from newspapers;\n oftentimes it is not enough to see it in our display and it forces the user to go closer to the display (not exactly what you want)\n"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"paragraphs:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"no double-spacing per sentence, it is an old and unnecessary habit picked up for today\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"one way to mark a paragraph is first-line indents\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"another is newlines at the end of the paragraph\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"choose only one way to mark a paragraph otherwise it is overkill\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"avoid widows and orphans;\n most software lets you do this automatically\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"line spacing shouldn't be single spaced as it will make dense lines and hard to read;\n otherwise, it also shouldn't be doubly spaced since it will make loose lines;\n the ideal spacing is between 120% to 150% (of course, depending on the font)\n"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"headings:\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"should structure your arguments, not your document\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"prefer in title cases because your headings are not titles\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"limit to 2/3 levels of heading, otherwise, it will make navigation confusing (unless you're writing a technical specification)\n"}]}]}]}]}]}]},"backlinks":[]},"__N_SSG":true},"page":"/[[...slug]]","query":{"slug":["literature.practical-typography"]},"buildId":"Ie9t5zutrXP6Of75Cb5xF","assetPrefix":"/wiki","nextExport":false,"isFallback":false,"gsp":true}</script><script nomodule="" src="/wiki/_next/static/chunks/polyfills-99d808df29361cf7ffb1.js"></script><script src="/wiki/_next/static/chunks/main-ae4733327bd95c4ac325.js" async=""></script><script src="/wiki/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" async=""></script><script src="/wiki/_next/static/chunks/framework.9d524150d48315f49e80.js" async=""></script><script src="/wiki/_next/static/chunks/commons.0e1c3f9aa780c2dfe9f0.js" async=""></script><script src="/wiki/_next/static/chunks/pages/_app-8e3d0c58a60ec788aa69.js" async=""></script><script src="/wiki/_next/static/chunks/940643274e605e7596ecea1f2ff8d83317a3fb76.4841a16762f602a59f00.js" async=""></script><script src="/wiki/_next/static/chunks/pages/%5B%5B...slug%5D%5D-1aa198f87ede1cd0e1dc.js" async=""></script><script src="/wiki/_next/static/Ie9t5zutrXP6Of75Cb5xF/_buildManifest.js" async=""></script><script src="/wiki/_next/static/Ie9t5zutrXP6Of75Cb5xF/_ssgManifest.js" async=""></script></body></html> |