diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/inline/TextTransform.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/inline/TextTransform.kt
index fd1f9e40..176e4d0e 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/inline/TextTransform.kt
+++ b/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/inline/TextTransform.kt
@@ -32,7 +32,9 @@ class TextTransformData(
         SMALL,
         NORMAL,
         MEDIUM,
+        LARGER,
         LARGE,
+        HUGE,
         ;
 
         override fun <T> accept(visitor: RenderRepresentableVisitor<T>): T = visitor.visit(this)
diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/CssRepresentableVisitor.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/CssRepresentableVisitor.kt
index f2c98ea9..0a7e483c 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/CssRepresentableVisitor.kt
+++ b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/CssRepresentableVisitor.kt
@@ -69,14 +69,7 @@ class CssRepresentableVisitor : RenderRepresentableVisitor<String> {
             SlidesFragment.Behavior.SHOW_HIDE -> "fade-in-then-out"
         }
 
-    override fun visit(size: TextTransformData.Size) =
-        when (size) {
-            TextTransformData.Size.TINY -> "0.5em"
-            TextTransformData.Size.SMALL -> "0.75em"
-            TextTransformData.Size.NORMAL -> "1em"
-            TextTransformData.Size.MEDIUM -> "1.5em"
-            TextTransformData.Size.LARGE -> "2em"
-        }
+    override fun visit(size: TextTransformData.Size) = "size-${size.kebabCaseName}"
 
     override fun visit(weight: TextTransformData.Weight) = weight.kebabCaseName
 
diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
index 2230ccc6..66474db2 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
+++ b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -176,8 +176,10 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
     override fun visit(node: TextTransform) =
         buildTag("span") {
             +node.children
+
+            `class`(node.data.size?.asCSS) // e.g. 'size-small' class
+
             style {
-                "font-size" value node.data.size
                 "font-weight" value node.data.weight
                 "font-style" value node.data.style
                 "font-variant" value node.data.variant
diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
index d16a9af6..6010d866 100644
--- a/core/src/main/resources/render/theme/global.css
+++ b/core/src/main/resources/render/theme/global.css
@@ -118,6 +118,34 @@ code.focus-lines .hljs-ln-line:not(.focused) {
     clip-path: circle();
 }
 
+.size-tiny {
+    font-size: 0.5em;
+}
+
+.size-small {
+    font-size: 0.75em;
+}
+
+.size-normal {
+    font-size: 1em;
+}
+
+.size-medium {
+    font-size: 1.25em;
+}
+
+.size-larger {
+    font-size: 1.5em;
+}
+
+.size-large {
+    font-size: 2em;
+}
+
+.size-huge {
+    font-size: 3em;
+}
+
 .codespan-content {
     display: inline-flex;
     align-items: center;