web: proper text styling & semantics

web/src/routes/+layout.svelte

@@ -119,7 +119,6 @@
         border: none;
         border-radius: var(--border-radius);
         font-size: 14.5px;
-        font-weight: 500;
         cursor: pointer;
         background-color: var(--button);
         color: var(--button-text);
@@ -155,6 +154,39 @@
         justify-content: center;
     }
 
+    :global(button, .subtext) {
+        font-weight: 500;
+    }
+
+    :global(h1, h2, h3, h4, h5, h6) {
+        font-weight: 500;
+        margin-block: 0;
+    }
+
+    :global(h1) {
+        font-size: 24px;
+        letter-spacing: -1px;
+    }
+
+    :global(h2) {
+        font-size: 20px;
+        letter-spacing: -1px;
+    }
+
+    :global(h3) {
+        font-size: 16px;
+    }
+
+    :global(h4, h5, h6) {
+        font-size: 12px;
+    }
+
+    :global(.subtext) {
+        font-size: 13px;
+        color: var(--gray);
+        line-height: 1.4;
+    }
+
     #cobalt {
         height: 100vh;
         display: grid;

web/src/routes/settings/+layout.svelte

@@ -15,7 +15,7 @@
 
 <div id="settings-page">
     <div id="settings-sidebar">
-        <div class="page-title">settings</div>
+        <h1 id="settings-page-title">settings</h1>
         <nav id="settings-navigation">
             <SettingsSection sectionTitle="general">
                 <SettingsCategory
@@ -83,12 +83,6 @@
         padding-top: calc(60px - var(--padding));
     }
 
-    .page-title {
-        font-size: 24px;
-        font-weight: 500;
-        letter-spacing: -1px;
-    }
-
     #settings-sidebar {
         gap: 24px;
     }