I can't reproduce the issue on macOS at least.

Note that since gt cannot emit Typst code, here it emits HTML table which is parsed by Quarto into AST which is then converted to the proper format, in this case Typst.
gt is the one setting the fonts you see in the Typst output, you can see this with gt::as_raw_html(gt::gt(df))) in R. (also why when you used gt::opt_table_font(), the behaviour changed)

I believe the font issue is more on your system which don't have the font.
I don't know if "system-ui" is recognised everywhere.

Anyhow, I don't see any Quarto issue here.

Thanks. I was also not sure where to post this issue but just wanted to be sure that this is not on the quarto side. I will check what my system is doing.

Let's keep this open at least for now - the behavior does feel unintuitive to me, so I'd like to understand it better.

Repro

Okay, I have a simple repro in Typst on macOS.

#[
#set text(font: ("Apple Color Emoji") , size: 12pt); #table(
  columns: 2,
  align: (left,right,),
  table.header(table.cell(align: bottom + left, fill: rgb("#ffffff"))[#set text(size: 1.0em , fill: rgb("#333333")); a], table.cell(align: bottom + right, fill: rgb("#ffffff"))[#set text(size: 1.0em , fill: rgb("#333333")); b],),
  table.hline(),
  table.cell(align: horizon + left, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[aa111bbb], table.cell(align: horizon + right, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[1],
  table.cell(align: horizon + left, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[abcdef], table.cell(align: horizon + right, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[2],
)
]

Root cause

The Apple Color Emoji font, installed on Macs, supports numbers but not letters. This is probably true of other emoji fonts.

If the first available font in the list is an emoji font, then the numbers will be bigger than the rest of the text. because emoji fonts have large glyph sizes.

The rest of the text will have a fallback font provided by Typst, unless disabled with

#set text(fallback: false)

If my theory is correct, then none of the fonts

"Segoe UI", "Roboto", "Helvetica", "Arial"

are installed on @schochastics's machine, or they are not available to Typst. But at least one of the emoji fonts

"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

is installed and available.

(quarto typst fonts will list fonts available to Typst.)

Font stacks

If there is a Quarto issue here, it is we translate CSS font lists into Typst font lists verbatim.

But "font stacks" like system-ui and sans-serif will not be recognized by Typst and may give a false sense of security.

Conceivably, we could substitute lists of appropriate fonts for "font stacks", at the mild maintenance burden of having to maintain such lists.

Our current behavior is surprising because the intent of the font list

"system-ui", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

is clearly "choose a nice looking or at least sans serif font for text, and one of these emoji fonts for emoji". Not "use an emoji font for the numbers and a fallback font for the text".

For now I can add a note about this to the advanced docs on troubleshooting Typst fonts tracked in #11278. Similar to that issue, we again see that the letters have an unexpected serif font (the Typst default font).

Correction: it's called

• "generic font family" when a browser implements it
• "font stack" when implemented as a library like system-ui No, system-ui is also a generic font family.

Comprehensive and helpful blog post on the subject:

https://blog.jim-nielsen.com/2020/system-fonts-on-the-web/

Corresponding Typst issue: typst/typst#3342

Sounds like they don't want to implement it because it hurts reproducibility, but fonts always introduce a dependency external to the document. (There is even an OS dependency on the web, because you want to choose a system font that the user has.)

I'm tempted just to replace generic font families and font stacks with names of fonts that Typst ships, if possible.

I'm tempted just to replace generic font families and font stacks with names of fonts that Typst ships, if possible.

I think that's a great idea. Alternatively, we can ship a few chosen open-source fonts with Quarto itself, so that these are more clearly "Quarto's defaults" (I happen to not like the default typefaces from Typst, but that's a super personal thing).

I like the idea of shipping some fonts.

From that blog post, the generic font families according to CSS spec:

    serif *
    sans-serif *
    monospace *
    system-ui
    cursive
    fantasy
    emoji
    math
    fangsong
    ui-serif †
    ui-sans-serif †
    ui-monospace †
    ui-rounded †

I count about 8 or 9 distinct, since we don't care about ui-, the OS-dependent thing.

Some will have sufficient defaults shipped with Typst, so we don't need to choose all of them.

Okay, Typst ships two serif fonts and a monospace sans-serif font, but no variable-width sans-serif font.

So we need to ship at least one font in order to fix the bug.

Libertinus Serif, New Computer Modern, New Computer Modern Math, and DejaVu Sans Mono
https://typst.app/docs/reference/text/text/#parameters-font

This is going to be really easy, since we just have to pass Typst another another --font-path, and define the mapping.

Is there anywhere to put static configuration like the font mapping? (i.e. that gets checked in and distributed with Quarto.) No practical difference from defining it in Lua, just seems icky to do that.

Making them default

In order for Quarto's Typst output to use default fonts, we would have brand defaults like

brand:
  typography:
    base: serif
    headings: sans-serif
    monospace: monospace

(or base: sans-serif, whatever)

Then these would get picked up by the Typst CSS layer, which is the main topic of this issue.

Currently brand doesn't have default font families, although there is some ugly bleed of Linux Libertine / Libertinus Serif in Typst due to the way parameters to functions can't be left unset.