Adopt the M3 type scale on self-hosted Roboto Flex

JournalApp/Data/MaterialTheme.cs

@@ -143,16 +143,122 @@ public static MudTheme FromSeed(uint seed)
                 DefaultBorderRadius = "8px",
             },
 
+            // The M3 type scale on self-hosted Roboto Flex, mapped H1-H3 = display, H4-H6 = headline, Subtitle = title, Body = body, Button/Caption/Overline = label.
             Typography = new()
             {
+                Default = new DefaultTypography()
+                {
+                    FontFamily = ["Roboto Flex", "Roboto", "system-ui", "sans-serif"],
+                    FontSize = "14px",
+                    FontWeight = "400",
+                    LineHeight = "1.43",
+                    LetterSpacing = "0.25px",
+                },
+
+                H1 = new H1Typography()
+                {
+                    FontSize = "57px",
+                    FontWeight = "400",
+                    LineHeight = "1.12",
+                    LetterSpacing = "-0.25px",
+                },
+
+                H2 = new H2Typography()
+                {
+                    FontSize = "45px",
+                    FontWeight = "400",
+                    LineHeight = "1.16",
+                    LetterSpacing = "0",
+                },
+
+                H3 = new H3Typography()
+                {
+                    FontSize = "36px",
+                    FontWeight = "400",
+                    LineHeight = "1.22",
+                    LetterSpacing = "0",
+                },
+
+                H4 = new H4Typography()
+                {
+                    FontSize = "32px",
+                    FontWeight = "400",
+                    LineHeight = "1.25",
+                    LetterSpacing = "0",
+                },
+
+                H5 = new H5Typography()
+                {
+                    FontSize = "28px",
+                    FontWeight = "400",
+                    LineHeight = "1.29",
+                    LetterSpacing = "0",
+                },
+
+                H6 = new H6Typography()
+                {
+                    FontSize = "24px",
+                    FontWeight = "400",
+                    LineHeight = "1.33",
+                    LetterSpacing = "0",
+                },
+
+                Subtitle1 = new Subtitle1Typography()
+                {
+                    FontSize = "16px",
+                    FontWeight = "500",
+                    LineHeight = "1.5",
+                    LetterSpacing = "0.15px",
+                },
+
+                Subtitle2 = new Subtitle2Typography()
+                {
+                    FontSize = "14px",
+                    FontWeight = "500",
+                    LineHeight = "1.43",
+                    LetterSpacing = "0.1px",
+                },
+
+                Body1 = new Body1Typography()
+                {
+                    FontSize = "16px",
+                    FontWeight = "400",
+                    LineHeight = "1.5",
+                    LetterSpacing = "0.5px",
+                },
+
+                Body2 = new Body2Typography()
+                {
+                    FontSize = "14px",
+                    FontWeight = "400",
+                    LineHeight = "1.43",
+                    LetterSpacing = "0.25px",
+                },
+
                 Button = new ButtonTypography()
                 {
+                    FontSize = "14px",
+                    FontWeight = "500",
+                    LineHeight = "1.43",
+                    LetterSpacing = "0.1px",
                     TextTransform = "none",
                 },
 
                 Caption = new CaptionTypography()
                 {
+                    FontSize = "12px",
+                    FontWeight = "500",
                     LineHeight = "1",
+                    LetterSpacing = "0.5px",
+                },
+
+                Overline = new OverlineTypography()
+                {
+                    FontSize = "11px",
+                    FontWeight = "500",
+                    LineHeight = "1.45",
+                    LetterSpacing = "0.5px",
+                    TextTransform = "none",
                 },
             },
         };

JournalApp/wwwroot/app.css

@@ -1,4 +1,23 @@
-* {
+/* Self-hosted Roboto Flex variable font (weight axis 100-1000) so typography doesn't depend on the WebView's system fonts. */
+@font-face {
+  font-family: "Roboto Flex";
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(fonts/roboto-flex-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Roboto Flex";
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(fonts/roboto-flex-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -24,7 +43,7 @@ body {
 }
 
 #loading-text {
-  font-family: "Roboto", system-ui, sans-serif;
+  font-family: "Roboto Flex", "Roboto", system-ui, sans-serif;
   font-size: 6vw;
 }
 
@@ -285,12 +304,6 @@ label.mud-switch.mud-disabled .mud-switch-span {
   justify-content: flex-start;
 }
 
-.mud-dialog-title .mud-typography-h6 {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-}
-
 /* M3 dialog supporting text reads on onSurfaceVariant; inputs keep their own stronger ink. */
 .mud-dialog-content {
   color: var(--mud-palette-text-secondary);