Text size in Notes, Slides and Advanced Slides

Custom CSS & Theme Design
1

What I’m tryng to do
I’m trying to make different paragraphs in a single Obsidian note have different, customizable font sizes, while maintaining the original Markdown formatting (bullets and numbering, bold, italics, and various headers). The selected font sizes will also be retained when using the note to produce a Slides or Advanced Slides presentation.

Things I have tried
I’ve tried several methods:

  1. Obviously, <small>smaller paragraph text</small> and <big>larger paragraph text> work, but I can’t choose or customize the size.
  2. <p style="font-size: 18px">paragraph text<p> retains basic Markdown formatting only on headers.
  3. <font size=6>paragraph text</font> also fails to retain Markdown formatting.
  4. I’ve switched (also with the help of ChatGPT) to different versions of CSS that work perfectly in the Obsidian note but don’t want to “pass” into the presentation (I’m pasting the most sophisticated version here)…
/* ==========================================================
   UNIVERSAL TEXT SIZE STYLES
   For: Obsidian, Slides (Reveal.js), Advanced Slides
   Responsive and consistent
   ========================================================== */

/* ==== Piccolo ==== */
.text-small,
.reveal .text-small,
.advslides .text-small {
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.4;
}

/* ==== Medio ==== */
.text-medium,
.reveal .text-medium,
.advslides .text-medium {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.5;
}

/* ==== Grande ==== */
.text-large,
.reveal .text-large,
.advslides .text-large {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.6;
}

/* ==== Molto grande (tipo titolo) ==== */
.text-xlarge,
.reveal .text-xlarge,
.advslides .text-xlarge {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.6;
  font-weight: 600;
}

/* ==== Compatibilità editor Live Preview ==== */
.markdown-source-view.mod-cm6 .cm-content span.text-small,
.markdown-source-view.mod-cm6 .cm-content span.text-medium,
.markdown-source-view.mod-cm6 .cm-content span.text-large,
.markdown-source-view.mod-cm6 .cm-content span.text-xlarge {
  font-size: inherit;
}

/* ==== Supporto anche su <p> o <div> con classi ==== */
p.text-small,
p.text-medium,
p.text-large,
p.text-xlarge,
div.text-small,
div.text-medium,
div.text-large,
div.text-xlarge {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

Can anyone help me?

2

Since Markdown is about indicating what things are rather than how they look, it might help us to know what the purpose of the different sizes is.

When you post example Markdown, HTML, or other code, please mark it as code to prevent the forum software from rendering or garbling it. Thanks! (I’ve edited your post to do this.)

3

Thanks for the clarification, CawlinTeffid.
I’m new to the forum and didn’t understand what was meant by “mark as code”… it’s clearer now, I won’t repeat the mistake.
The purpose of resizing text is to make the most of Advanced Slides; in fact, using different sizes would allow me to combine images and text more effectively (as I wrote, none of the methods I’ve tried seem to transfer the different font sizes to the slides… in Obsidian notes, however, more or less all work, some are better at preserving the formatting of lists, bold, etc.).
I hope to hear some good news or at least some helpful suggestions from the forum.

4

You could use one of Obsidian’s existing markdown elements as a container for your font sizes. That would help maintain markdown compatibility, which HTML typically doesn’t.

Here’s an example using callouts.

(Pretend I didn’t typo “large” twice in every image. The second one was supposed to say, “larger”.)

It looks like this in Slides presentation mode:

slides
slides1546×1355 69 KB

In Source, Live Preview, and Reading:

custom font sizes
custom font sizes1531×599 24.7 KB

And when you put your cursor on the line to edit:

image
image315×541 6.5 KB

CSS snippet:

[data-callout="size-smaller"] { --my-font-size: 0.5em; }
[data-callout="size-small"] { --my-font-size: 0.75em; }
[data-callout="size-large"] { --my-font-size: 1.25em; }
[data-callout="size-larger"] { --my-font-size: 1.5em; }

[data-callout^="size-"] {
	background-color: unset;
	padding: 0;
	.callout-title { display: none; }
	font-size: var(--my-font-size);
}

Note content to test:

> [!size-smaller]
> smaller

> [!size-small]
> small

regular

> [!size-large]
> large

> [!size-larger]
> larger

You can adjust additional things like spacing, choose different sizes, and rename the callouts.

5

Thanks Dawni,
your solution works beautifully in Slides, but not so well in Advanced Slides… I’ll continue my research.

6

Oh I didn’t realize Advanced Slides doesn’t use vault CSS snippets. Took a quick look at the plugin and presume you already know about

larger
<!-- element style="font-size:1.5em" -->

but don’t like it because it renders in only Advanced Slides, not in Slides or the note.

If it’s that you want it to work in all three and with markdown, then you might have to use both snippets and Advanced Slides’ Element Annotations on each styled element in your slide.

Or see if the successor plugin Slides Extended handles it better, since Advanced Slides was discontinued a while ago.

Or consider doing all HTML without trying to mix with markdown. Wouldn’t be my first choice, but does render in all three.