|
| 1 | +--- |
| 2 | +title: Typst Brand YAML |
| 3 | +summary: Technical details on support for Brand YAML in Typst and Quarto |
| 4 | +--- |
| 5 | + |
| 6 | +## Overview |
| 7 | + |
| 8 | +Brand YAML allows consistent colors, fonts, and typography across formats and applications. |
| 9 | + |
| 10 | +This document describes some details of the Typst implementation of Brand YAML for Quarto, and provides troubleshooting tips. |
| 11 | + |
| 12 | +In general, Brand YAML properties use CSS conventions, so this feature relies on [Typst CSS](typst-css.qmd) functionality. |
| 13 | + |
| 14 | +## Color |
| 15 | + |
| 16 | +Brand YAML palette and theme colors are available in Typst `brand-color`, e.g. `brand-color.lime` or `brand-color.primary`. |
| 17 | + |
| 18 | +Lighter versions of the colors, suitable as background colors, are available in `brand-background-color`, e.g. `brand-background-color.success`. |
| 19 | + |
| 20 | +## Logo |
| 21 | + |
| 22 | +The `logo` option allows extra customization in Typst for full control over layout. |
| 23 | + |
| 24 | +In all formats, `logo` can be the path to a logo or the name of a `brand.logo` resource, i.e. `small`, `medium`, or `large`. It can also be an object with |
| 25 | + |
| 26 | +`path` |
| 27 | +: Image path or name of `brand.logo` resource |
| 28 | +`alt` |
| 29 | +: Alt text for the logo image |
| 30 | + |
| 31 | +The Typst implementation also supports |
| 32 | + |
| 33 | +`width` |
| 34 | +: Width in CSS units. Default `1.5in`. |
| 35 | + |
| 36 | +`location` |
| 37 | +: Location on the page in X and Y using CSS [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) and [`text-vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) keyword values, specifically |
| 38 | +`left`, `center`, `right` and `top`, `middle`, and `bottom`. |
| 39 | + The X and Y components are combined with a dash, e.g. `left-top` (the default), `center-middle`, etc. |
| 40 | + Applied as Typst [`align`](https://typst.app/docs/reference/layout/align/). |
| 41 | + |
| 42 | +`padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left` |
| 43 | +: Amount of padding to add to each side of the logo, using CSS [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) conventions. Due to a limitation in the Lua implementation of YAML, multiple padding options are applied in alphabetical order instead of the order of the YAML object. Applied as Typst [`block.inset`](https://typst.app/docs/reference/layout/block/#parameters-inset). Default `padding: 0.75in`. |
| 44 | + |
| 45 | +## Typography |
| 46 | + |
| 47 | +Brand YAML is specified for the following elements and Brand YAML properties. Combinations that are not supported are marked NA. |
| 48 | + |
| 49 | + |
| 50 | +| | base | headings | title[^1] | subtitle | monospace-inline | monospace-block | link | |
| 51 | +|------------------|------|----------|-----------|----------|------------------|-----------------|-------| |
| 52 | +| family | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | NA | |
| 53 | +| size | ✓ | NA | NA | NA | ✓ | ✓ | NA | |
| 54 | +| weight | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| 55 | +| style | NA | ✓ | ✓ | ✓ | NA | NA | NA | |
| 56 | +| color | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| 57 | +| background-color | NA | NA | NA | NA | ✓ | ✓ | ✓ | |
| 58 | +| decoration | NA | NA | NA | NA | NA | NA | ✓ | |
| 59 | +| line-height | ✓ | ✓ | ✓ | ✓ | NA | ✓ | NA | |
| 60 | + |
| 61 | +[^1]: While being styled as headings, title and subtitle have a separate implementation. |
| 62 | + |
| 63 | +The Quarto Typst and HTML implementations of Brand YAML implement all combinations (except size in revealjs). |
| 64 | + |
| 65 | +Many of the NA combinations are possible in Typst, but were removed for compatibility with the spec in [1bd7a48](https://github.com/quarto-dev/quarto-cli/commit/1bd7a48a41fe683abf6437b55b3d4f4370ef347b). If any of those are desired, they can be implemented via a Typst raw block or `include-in-header`; consult that commit for details. |
| 66 | + |
| 67 | +### Missing fonts in Typst |
| 68 | + |
| 69 | +When Typst is unable to find the requested font, it will fall back to a default font. In Typst 0.11, shipped with Quarto 1.6, the default font is Linux Libertine; in Typst 0.12, to be shipped with Quarto 1.7, the default is Libertinus Serif. |
| 70 | + |
| 71 | +Typst 0.12 will warn `unknown font family` in this case. |
| 72 | + |
| 73 | +To tell Typst to not fall back (and not to display fonts it can't find), you can add |
| 74 | + |
| 75 | +```typst |
| 76 | +#set text(fallback: false) |
| 77 | +``` |
| 78 | + |
| 79 | +to your document. |
| 80 | + |
| 81 | +Typst Brand YAML will automatically download fonts from Google Fonts and cache them in `.quarto/typst-font-cache` |
| 82 | + |
| 83 | +Then it tells Typst to use this font directory, in addition to any system fonts available to Typst. |
| 84 | + |
| 85 | +In rare cases, there may be ambiguities about a font's name that will cause Typst not to find the font. To see if a font is available to Typst, run |
| 86 | + |
| 87 | +```sh |
| 88 | +quarto typst fonts --font-path .quarto/typst-font-cache 2>&1 | grep *fontname* |
| 89 | +``` |
| 90 | + |
| 91 | +Unfortunately with Typst 0.11, there is no flag to ignore system fonts, so you'll need to grep for the font name. |
| 92 | + |
| 93 | + |
| 94 | +With Typst 0.12, you can run |
| 95 | + |
| 96 | +``` |
| 97 | +quarto typst fonts --ignore-system-fonts --font-path .quarto/typst-font-cache/ |
| 98 | +``` |
| 99 | + |
| 100 | +to list only the fonts downloaded by Quarto. (In either version of Typst, ``--variants`` can be helpful for more detail.) |
| 101 | + |
| 102 | +If the font is listed but it still isn't working, check for variation in the font name. For example, the Sono font can be downloaded from Google Fonts as Sono, but Typst will only accept Sono Extralight Monospace. |
| 103 | + |
| 104 | +### "Big number" bug |
| 105 | + |
| 106 | + |
| 107 | + |
| 108 | +If you encounter issue [#11683](https://github.com/quarto-dev/quarto-cli/issues/11683), with numbers displaying larger than surrounding text in table output, this is happening because none of the text fonts requested by your table package are available, but some of the emoji fonts are. |
| 109 | + |
| 110 | +Please specify an available font to your table package. In the future, Quarto may implement "font stacks" like `system-ui` and `sans-serif` in Typst CSS to fix this bug, but currently these are passed through verbatim, and Typst won't recognize font stacks. |
| 111 | + |
| 112 | +### Typography Test coverage |
| 113 | + |
| 114 | +Which kitchen sink test files contain unique tests for a feature/element combination? |
| 115 | + |
| 116 | +For non-unique tests, first file index is listed. |
| 117 | + |
| 118 | +| | base | headings | title | subtitle | monospace-inline | monospace-block | link | |
| 119 | +|------------------|------|----------|-----------|----------|------------------|-----------------|-------| |
| 120 | +| family | 1 | 1 | 1 | 1 | 1 | 1 | R | |
| 121 | +| size | 1 | NA | NA | NA | 1 | 1 | R | |
| 122 | +| weight | 1 | 1 | 1 | 1 | 1 | 2 | 2 | |
| 123 | +| style | R | 1 | 1 | 1 | R | R | R | |
| 124 | +| color | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |
| 125 | +| background-color | R | R | R | R | 1 | 1 | 1 | |
| 126 | +| decoration | R | R | R | R | R | R | 1 | |
| 127 | +| line-height | 1 | 1 | 1 | 1 | NA | 1 | NA | |
0 commit comments