lecture.studio

Marp font size: the deck, one slide, tables and code

By Ekrem Çetinkaya · Published

Change the Marp font size with CSS on section: a style: block in the front matter for the whole deck (section { font-size: 22px; }), a <style scoped> block for one slide, and element rules for headings, tables and code. The built-in themes are keynote-sized (default 29 px, gaia 35 px, uncover 40 px), so a lecture deck sets a base of 20 to 24 pixels once, in the theme.

This guide covers each scope with the exact syntax, the elements that need their own size (tables and code), the auto-fitting heading, and the reason "make it smaller" is usually the wrong fix for a slide that does not fit.

The whole deck

---
marp: true
theme: default
style: |
  section { font-size: 22px; }
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
---

Everything in a Marp slide is sized relative to section, so the one rule changes body text, lists and paragraphs together; headings have their own sizes and need their own rules. If every deck of a course uses the same numbers, move them into a theme file and set theme: instead of repeating the block.

One slide

---

<style scoped>
section { font-size: 18px; }
</style>

# The full comparison table

| Algorithm | Waiting | Turnaround | Response | Starvation |
|---|---|---|---|---|
| … |

<style scoped> applies to that slide only. It is the right tool for the one table or code listing that has to be complete. If more than a few slides need it, the deck's base size is wrong.

A cleaner variant is a class the theme defines (section.dense { font-size: 18px; }) and <!-- _class: dense --> on the slide: no CSS in the deck, and the same look every time.

Tables and code

Tables and code inherit the base size, which is too large for real data on a 1280×720 slide. Set them separately, once:

section table { font-size: 18px; }
section pre { font-size: 16px; }         /* code blocks */
section code { font-size: 0.9em; }       /* inline code, relative to the text around it */

A table that still overflows needs fewer columns on the slide (the full table goes in the handout); a code block that overflows needs to be split across slides at a function boundary, not shrunk below 14 pixels.

An auto-fitting heading

Marp Core can scale a heading to the slide width:

# <!-- fit --> A very long claim that would otherwise wrap onto three lines

<!-- fit --> inside a heading shrinks or grows it to fit one line. Useful for a section title; do not use it for body text, where the result changes size from slide to slide and looks like a mistake.

Sizes for a lecture room

Numbers that hold up from the back of a 60-seat room on a 1280×720 canvas:

Element Size
Body text, lists 20–24 px
Slide title (h1) 36–44 px
Section title (h2) 28–32 px
Tables 16–18 px
Code 14–18 px
Footer, source lines 12–14 px

Bigger rooms and worse projectors push everything up, not down. The floor for anything a student must read is about 16 pixels.

When the slide overflows

Marp does not shrink content to fit; text that runs past the bottom of the slide is simply cut off in the PDF. Before reducing the font:

  1. Split the slide. Two slides at 22 pixels beat one at 16.
  2. Move the detail to the handout or the speaker note.
  3. Cut a bullet; if the slide has seven, the room will not read the seventh.
  4. Only then reduce the size on that one slide with <style scoped>.

In Lecture Studio

Lecture Studio's unit scaffold writes a style: block with the sizes in the table above (20 px body; 36, 30 and 24 px headings) and the talk scaffold a slightly larger set (22 px body; 42, 32 and 26 px headings), the shipped themes carry the same numbers with 18 px tables, and the preview's Check slides scan renders every slide and marks the ones whose content runs past the edge, so an overflowing table is found before the lecture rather than in the PDF. The app runs on macOS 15 or later; the assistant needs an Oberik project key.

FAQ

How do I change the font size in Marp?

Add style: | section { font-size: 22px; } to the front matter for the whole deck, or <style scoped> on one slide. Headings, tables and code need their own rules.

How do I change the font size for one slide in Marp?

Put <style scoped> section { font-size: 18px; } </style> on that slide, or define a class in the theme and use <!-- _class: dense -->.

What is the default Marp font size?

default sets 29 px on section, gaia 35 px and uncover 40 px (Marp Core 4.4); lecture decks usually set 20–24 px in a theme of their own.

How do I make a Marp table smaller?

section table { font-size: 18px; } in the theme or the style: block, or <style scoped> for a single slide. If it still overflows, show fewer columns.

More guides