2c:null 2d:["$","title",null,{"children":"10 June 2020: Typography for Data Viz | Di | Observable"}] 32:T4be,svg` `33:T553,md` - Lining (not oldstyle) figures - Tabular (not proportional) figures (preferably with duplexing: same width across weights) - Numbers must be distinguishable from other characters: e.g. test \`17lI\`, \`56\`, \`38\` - Characters to inspect to check they are present in the typeface and look good (as needed for your likely use cases): - Number symbols: \`@#$¢£€%&\` - Punctuation characters: e.g. \`?¿\`, \`$%!"#$%&'()*,-./:;<=>?@[\]^{|}~\`, or \`!"“”#$%&'‘’()*,.:;<=>?@[\\\]^{|}~—–-\` and grave (backticks) character \` - *All* individual figures (check they're not weird, as shown in [Finding the Best Free Fonts for Numbers by Samantha Zhang](https://blog.graphiq.com/finding-the-best-free-fonts-for-numbers-25c54002a895)) - Math symbols e.g. \`¡™£¢∞§¶•ªº–≠“‘«…æ≤≥÷⁄€‹›ﬁﬂ‡°·‚—±”’»ÚÆ¯˘\`, \`∫\`, and \`‰\`, \`⅚\` - Other symbols: \`©\`, \`®\`, \`™\` - Programming symbols with ligatures: e.g. \`=>\` - Reference marks: \`*†‡\` and \`§|#\` - Ligatures: e.g. \`fi\`, \`ft\`, \`fj\`, \`tt\`, \`tz\` - Prefer single-barrel (schoolbook) \`a\` and \`g\` for accessibility - Readability at small sizes: large x-height (and yet clear extenders), open counters, wider typeface (wider letters in a smaller size with tighter leading) `34:T53b,md` Some free sans-serif fonts for data viz: - [Lato](https://fonts.google.com/specimen/Lato) - [Assistant](https://fonts.google.com/specimen/Assistant) - [Noto Sans](https://fonts.google.com/specimen/Noto+Sans) - [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) - [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) - [Open Sans](https://fonts.google.com/specimen/Open+Sans) - [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) - [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) - [Varela Round](https://fonts.google.com/specimen/Varela+Round) Some free serif fonts for data viz: - [Droid Serif](https://fonts.google.com/specimen/Droid+Serif) - [Crimson Text](https://fonts.google.com/specimen/Crimson+Text) - [Old Standard TT](https://fonts.google.com/specimen/Old+Standard+TT) - [Kameron](https://fonts.google.com/specimen/Kameron) - [Copse](https://fonts.google.com/specimen/Copse) Some specific paid fonts for small sizes or data viz: - [Charts + Tables Font Collection by Hoefler&Co](https://www.typography.com/fonts/styles/charts-tables) - [Reading Edge](http://www.fontbureau.com/ReadingEdge/) - [Interstate](https://fonts.adobe.com/fonts/interstate) - [Soleil](https://fonts.adobe.com/fonts/soleil) - [Calibre](https://klim.co.nz/retail-fonts/calibre/) `35:T55a, md` Use \`font-variant\` instead of \`font-feature-settings\` most of the time for accessing extra font features, such as \`font-variant-numeric\` to use alternate glyphs for numbers, fractions, and ordinal markers. - [MDN: font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) - [MDN: font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) - [Use OpenType Features](https://helpx.adobe.com/fonts/using/use-open-type-features.html) > Because \`font-feature-setting\` is a low-level property intended “for special cases where its use is the only way of accessing a particular infrequently used font feature” it will override font-variant regardless of source order. But be careful — it also overrides itself - List of OpenType [Registered features](https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist) - [\`font-feature-settings\`](https://caniuse.com/#search=font-feature-settings) is well supported. - ⚠️ [Google Fonts CDN does not support "tnum" feature or any discretionary OpenType features](https://github.com/google/fonts/issues/1582#issuecomment-394168818) so even if a font like Work Sans technically supports tabular numbers while showing proportional numbers by default, Google Fonts will only serve the proportional numbers. You may have to self-host the font. `36:Tf82, md` - [Typefaces by Benjamin](https://observablehq.com/@hastebrot/typography): A selection of importable fonts - [Peaks in confirmed daily deaths due to COVID-19 so far by antejan](https://observablehq.com/@antejan/peaks-in-confirmed-daily-deaths-due-to-covid-19-so-far) ~~~html html\`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7150,"value":"md`\n---\n\n${specimen(proofText, \"Lato\", 12, \"letter-spacing: 0em; line-height: 1.25em;\")}\n\n[Lato by Łukasz Dziedzic](https://fonts.google.com/specimen/Lato).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7170,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7222,"value":"md`*Notice how the lowercase “l” and uppercase “I” are nearly indistinguishable? That's one drawback to consider.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7267,"value":"md`*If you see black blocks for some characters, see [testing for missing glyphs below](https://observablehq.com/@didoesdigital/10-june-2020-typography-for-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection#mdTestingMissingGlyphs) to learn more.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7017,"value":"mdChecklist = md`\n## Checklist for choosing data viz typefaces\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7019,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6448,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7005,"value":"mdChoosingTypefacesForDataViz = md`\n### Choosing typefaces for data viz\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6781,"value":"\nmd`\n- [Choosing Fonts for Your Data Visualization by Tiffany France](https://medium.com/nightingale/choosing-a-font-for-your-data-visualization-2ed37afea637)\n- [Finding the Best Free Fonts for Numbers by Samantha Zhang](https://blog.graphiq.com/finding-the-best-free-fonts-for-numbers-25c54002a895)\n- [Fonts for Complex Data by Jonathan Hoefler](https://www.typography.com/blog/fonts-for-complex-data)\n- \"Fonts\" section in [Guide: 'Soft-style' by Samuel Parsons, aka SParsonsDataViz](https://www.reflectionsindesign.com/2019/12/guide-soft-style.html?m=1)\n- [A new typeface for Parliament by Jack Craig, Parliamentary Digital Service](https://pds.blog.parliament.uk/2018/04/23/a-new-typeface-for-parliament/)\n- [My 5 Favorite Fonts for Gorgeous Numerals by Mary Lester](https://www.tech4pub.com/2014/08/29/my-5-favorite-fonts-for-gorgeous-numerals/)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7033,"value":"mdDataVizTypefaces = md`\n### Typefaces:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6939,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7007,"value":"mdTypographyInDataViz = md`\n### Using typography in data viz\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6931,"value":"\nmd`\n- [Guide: Typography by Samuel Parsons, aka SParsonsDataViz](https://www.reflectionsindesign.com/2020/01/guide-typography.html?m=1)\n- [Placing text on arcs with d3.js by Nadieh Bremer](https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7010,"value":"mdFontFeaturesTabularNumbers = md`\n### Font features such as tabular numbers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6934,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7003,"value":"mdObservable = md`\n### Use in Observable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6942,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7001,"value":"mdEmbeddingFontsIntoSVG = md`\n### Embedding fonts into SVG\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6950,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7257,"value":"mdTestingMissingGlyphs = md`### Testing for missing glyphs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7265,"value":"md`For my text sample, I'm using a \\`font-family\\` stack that includes [Redacted](https://github.com/christiannaths/Redacted-Font), [Flow](https://fonts.googleblog.com/2022/01/flow-and-redacted-check-out-these-new.html?m=1) and [BLOKK Neue](http://blokkfont.com/). Lato is missing some glyphs, so the missing glyphs will be shown in Redacted or Flow instead. This makes it easier to spot what's missing. You can then select the black boxes, copy them, and paste them elsewhere to reveal which glyphs are missing. Without these fonts installed or included in the stack, the browser would fall back to system fonts, which require a more discerning eye to spot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7283,"value":"{\n const image = await FileAttachment(\"image.png\").image();\n image.alt = \"Lato sample showing missing glyphs in Redacted font face. \"\n image.width = 375;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7260,"value":"proofingStyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6994,"value":"mdGeneralWebTypography = md`\n### General typography for the web\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6963,"value":"md`\n- [A Five-Minute Guide to Better Typography by Pierrick Calvez](https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography)\n- [Thinking with Type by Ellen Lupton](http://thinkingwithtype.com/)\n- [Typography Handbook by Kenneth Wang](https://typographyhandbook.com/)\n- [Typekit Practice by Adobe Typekit and friends](https://practice.typekit.com/)\n- [Butterick’s Practical Typography by Matthew Butterick](https://practicaltypography.com/)\n- [The Elements of Typographic Style Applied to the Web by Richard Rutter](http://webtypography.net/)\n- [Professional Web Typography by Donny Truong](https://prowebtype.com/)\n- [Lining Figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/lining-figures) and [Proportional vs. Tabular Figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6998,"value":"mdMiscellaneous = md`\n### Miscellaneous\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6969,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6906,"value":"mdExamplesInDesignSystems = md`## Examples in design systems`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7027,"value":"md`\n- [Urban Institute Data Visualization Style Guide](http://urbaninstitute.github.io/graphics-styleguide/#typography)\n- [Shopify, Polaris: Typography](https://polaris.shopify.com/design/typography#navigation)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7057,"value":"mdAppendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7068,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7164,"value":"notebookStyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7063,"value":"import { specimen } from \"@hastebrot/typography\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 31:"$30:body"