Is it possible to override the smallest font in revealjs presentations?

[percyfal]

Description

I would like to include citations in a revealjs presentation but make the font smaller than currently allowed. However, it does not seem possible to print smaller fonts than 0.7em of the preset size. That smaller fonts could be printed is evident when you compare the size of the smallest presentation font (0.7em - EDIT: 0.6em seems to be the smallest) with the footer (see attached image). Is it even possible to customize a slide class to use smaller fonts than 0.7em? I'm thinking something along the lines of

.citation {
    font-size: 0.5em !important;
}

Here is a MWE with Quarto 1.7.32:

---
format:
  revealjs:
    smaller: true
    slide-level: 1
    footer: This is a footer
---

# Font sizes

:::: {.columns}

::: {.column width="30%"}

[4em]{style="font-size: 4em;"}

:::

::: {.column width="35%"}

[2em]{style="font-size: 2em;"}

[1.5em]{style="font-size: 1.5em;"}

[1em (normal)]{}

:::

::: {.column width="35%"}

[0.9em]{style="font-size: 0.9em;"}

[0.8em]{style="font-size: 0.8em;"}

[0.7em]{style="font-size: 0.7em;"}

[0.5em]{style="font-size: 0.5em !important;"}

[0.1em]{style="font-size: 0.1em !important;"}

:::

::::

:::{}

Footer css
(`src/resources/formats/revealjs/plugins/support/footer.css`)

```{r }
#| echo: true
#| eval: false
.reveal .footer {
  display: block;
  position: fixed;
  bottom: 18px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  z-index: 2;
}
```

:::

Cheers,

Per

[mcanouil]

Use your favourite browser developer/inspect mode and play around the HTML/CSS to see what works or not.

[percyfal]

Thanks for the suggestion. Alas, I can't seem to find any setting that lets me achieve my goal (and TBH my CSS knowledge is pretty limited . I'll make do with the current settings for now.

[jimjam-slam]

Also remember that em is a relative inherited font size: 0.5em is the same as 50%, and both are half the size of what would otherwise be inherited from the element's parent. In other words, if the footer's parent has a font size defined already that is different to the slides, you're adjusting against that.

If you want to compare sizes across the footer and the slide content, I'd recommend using rem ("root" em) units, which are relative to the font size of the root of the document.