Update font to inter feature branch (#16782)

2025-12-05 19:17:06 -06:00 · 2025-11-03 15:17:07 -05:00
parent 6265fc2d46
commit cba47e4abd
49 changed files with 318 additions and 89 deletions
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -0,0 +1,21 @@
+<!-- preload the inter font to avoid a flash of fallback font when first loading storybook -->
+<!-- href matches the inter build artifact from webpack -->
+<link
+  rel="preload"
+  href="/inter.0336a89fb4e7fc1d.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
+
+<!-- load inter font from the source cdn so that chromatic snapshots render in the correct font -->
+<link rel="preconnect" href="https://rsms.me/" />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+
+<!-- manually specify inter as the font here for chromatic snapshots -->
+<style>
+  :root {
+    font-family: Inter;
+    font-weight: 100 900;
+  }
+</style>
--- a/apps/browser/src/autofill/content/components/constants/styles.ts
+++ b/apps/browser/src/autofill/content/components/constants/styles.ts
@@ -144,17 +144,17 @@ export const border = {
 export const typography = {
  body1: `
    line-height: 24px;
-    font-family: Roboto, sans-serif;
+    font-family: Inter, sans-serif;
    font-size: 16px;
  `,
  body2: `
    line-height: 20px;
-    font-family: Roboto, sans-serif;
+    font-family: Inter, sans-serif;
    font-size: 14px;
  `,
  helperMedium: `
    line-height: 16px;
-    font-family: Roboto, sans-serif;
+    font-family: Inter, sans-serif;
    font-size: 12px;
  `,
 };
--- a/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts
+++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/message.ts
@@ -29,7 +29,7 @@ const baseTextStyles = css`
  text-align: left;
  text-overflow: ellipsis;
  line-height: 24px;
-  font-family: Roboto, sans-serif;
+  font-family: Inter, sans-serif;
  font-size: 16px;
 `;

--- a/apps/browser/src/autofill/content/components/notification/confirmation/message.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation/message.ts
@@ -84,7 +84,7 @@ const baseTextStyles = css`
  text-align: left;
  text-overflow: ellipsis;
  line-height: 24px;
-  font-family: Roboto, sans-serif;
+  font-family: Inter, sans-serif;
  font-size: 16px;
 `;

--- a/apps/browser/src/autofill/content/components/notification/header-message.ts
+++ b/apps/browser/src/autofill/content/components/notification/header-message.ts
@@ -19,7 +19,7 @@ const notificationHeaderMessageStyles = (theme: Theme) => css`
  line-height: 28px;
  white-space: nowrap;
  color: ${themes[theme].text.main};
-  font-family: Roboto, sans-serif;
+  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
 `;
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-source-code-pro: "Source Code Pro", monospace;
 $font-size-base: 14px;

--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -8,7 +8,7 @@
        <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none tw-relative">
          <button
            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-px-0.5 tw-py-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 tw-group/tab-nav-btn hover:tw-bg-hover-default tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
-            [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
+            [ngClass]="rla.isActive ? 'tw-font-medium tw-text-primary-600' : 'tw-text-muted'"
            title="{{ button.label | i18n }}"
            [routerLink]="button.page"
            [appA11yTitle]="buttonTitle(button)"
--- a/apps/browser/src/popup/images/loading.svg
+++ b/apps/browser/src/popup/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Inter\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 16px;
 $font-size-large: 18px;
--- a/apps/desktop/src/app/components/avatar.component.ts
+++ b/apps/desktop/src/app/components/avatar.component.ts
@@ -132,7 +132,7 @@ export class AvatarComponent implements OnChanges, OnInit {
    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
    textTag.setAttribute(
      "font-family",
-      'Roboto,"Helvetica Neue",Helvetica,Arial,' +
+      'Inter,"Helvetica Neue",Helvetica,Arial,' +
        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
    );
    textTag.textContent = character;
--- a/apps/desktop/src/images/loading.svg
+++ b/apps/desktop/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Inter\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/desktop/src/scss/left-nav.scss
+++ b/apps/desktop/src/scss/left-nav.scss
@@ -72,7 +72,7 @@

  &.active {
    .filter-button {
-      font-weight: bold;
+      font-weight: 500;
      @include themify($themes) {
        color: themed("primaryColor");
      }
@@ -114,7 +114,7 @@
      .filter-button {
        @include themify($themes) {
          color: themed("primaryColor");
-          font-weight: bold;
+          font-weight: 500;
        }
        max-width: 90%;
      }
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
 $font-size-large: 18px;
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -226,7 +226,7 @@ export class StripeService {
        base: {
          color: null,
          fontFamily:
-            'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+            'Inter, "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
            '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
          fontSize: "16px",
          fontSmoothing: "antialiased",
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -18,7 +18,7 @@
  <div bitTypography="body2">
    {{ "accessing" | i18n }}:
    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
-      <b class="tw-text-primary-600 tw-font-semibold">{{ currentRegion?.domain }}</b>
+      <b class="tw-text-primary-600 tw-font-medium">{{ currentRegion?.domain }}</b>
      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
    </a>
  </div>
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -12,7 +12,7 @@
      <h1
        bitTypography="h1"
        noMargin
-        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
+        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1 tw-font-medium"
        [title]="title || (routeData.titleId | i18n)"
      >
        <div class="tw-truncate">
--- a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
+++ b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
@@ -29,7 +29,7 @@
            [href]="more.marketingRoute.route"
            target="_blank"
            rel="noreferrer"
-            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
          >
            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
            <div>
@@ -47,7 +47,7 @@
            *ngIf="!more.marketingRoute.external"
            [routerLink]="more.marketingRoute.route"
            rel="noreferrer"
-            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-medium !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
          >
            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
            <div>
--- a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
@@ -14,7 +14,7 @@
        [routerLink]="product.appRoute"
        [ngClass]="
          product.isActive
-            ? 'tw-bg-primary-600 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
+            ? 'tw-bg-primary-600 tw-font-medium !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
            : ''
        "
        class="tw-group/product-link tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-600 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
--- a/apps/web/src/images/loading-white.svg
+++ b/apps/web/src/images/loading-white.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Inter\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text> 
--- a/apps/web/src/images/loading.svg
+++ b/apps/web/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Inter\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -86,11 +86,11 @@
 */
@layer components {
  .tw-h1 {
-    @apply tw-text-3xl tw-font-semibold;
+    @apply tw-text-3xl tw-font-medium;
  }

  .tw-btn {
-    @apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
+    @apply tw-font-medium tw-py-1.5 tw-px-3 tw-rounded-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
  }

  .tw-btn-secondary {
@@ -100,7 +100,7 @@
  }

  .tw-link {
-    @apply tw-font-semibold hover:tw-underline hover:tw-decoration-1;
+    @apply tw-font-medium hover:tw-underline hover:tw-decoration-1;

    @apply tw-text-primary-600 hover:tw-text-primary-700 focus-visible:before:tw-ring-primary-600;
  }
--- a/apps/web/src/scss/vault-filters.scss
+++ b/apps/web/src/scss/vault-filters.scss
@@ -30,7 +30,7 @@
        color: rgb(var(--color-primary-600));
      }
      &.active {
-        font-weight: bold;
+        font-weight: 500;
      }
    }
  }
@@ -59,7 +59,7 @@
    > .filter-buttons {
      .filter-button {
        color: rgb(var(--color-primary-600));
-        font-weight: bold;
+        font-weight: 500;
      }

      .edit-button {
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -77,20 +77,20 @@ export default {
          [hideBackgroundIllustration]="hideBackgroundIllustration"
        >
          <ng-container [ngSwitch]="contentLength">
-            <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-bold">Thin Content</div></div>
+            <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-medium">Thin Content</div></div>
            <div *ngSwitchCase="'long'">
-              <div class="tw-font-bold">Long Content</div>
+              <div class="tw-font-medium">Long Content</div>
              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
            </div>
            <div *ngSwitchDefault>
-              <div class="tw-font-bold">Normal Content</div>
+              <div class="tw-font-medium">Normal Content</div>
              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
            </div>
          </ng-container>

          <div *ngIf="showSecondary" slot="secondary" class="tw-text-center">
-            <div class="tw-font-bold tw-mb-2">
+            <div class="tw-font-medium tw-mb-2">
              Secondary Projected Content (optional)
            </div>
            <button type="button" bitButton>Perform Action</button>
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -41,7 +41,7 @@ const SizeClasses: Record<SizeTypes, string[]> = {
          [attr.fill]="textColor()"
          [style.fontWeight]="svgFontWeight"
          [style.fontSize.px]="svgFontSize"
-          font-family='Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
+          font-family='Inter,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
        >
          {{ displayChars() }}
        </text>
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -69,7 +69,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
 export class ButtonComponent implements ButtonLikeAbstraction {
  @HostBinding("class") get classList() {
    return [
-      "tw-font-semibold",
+      "tw-font-medium",
      "tw-rounded-full",
      "tw-transition",
      "tw-border-2",
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -15,7 +15,7 @@
  }
  <div class="tw-flex tw-flex-col tw-gap-0.5">
    @if (title) {
-      <header id="{{ titleId }}" class="tw-text-base tw-font-semibold">
+      <header id="{{ titleId }}" class="tw-text-base tw-font-medium">
        {{ title }}
      </header>
    }
--- a/libs/components/src/color-password/color-password.stories.ts
+++ b/libs/components/src/color-password/color-password.stories.ts
@@ -4,7 +4,7 @@ import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for

 import { ColorPasswordComponent } from "./color-password.component";

-const examplePassword = "Wq$Jk😀7j  DX#rS5Sdi!z ";
+const examplePassword = "Wq$Jk😀7jlI  DX#rS5Sdi!z ";

 export default {
  title: "Component Library/Color Password",
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -126,7 +126,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE

  @HostBinding("class") get classList() {
    return [
-      "tw-font-semibold",
+      "tw-font-medium",
      "tw-leading-[0px]",
      "tw-border-none",
      "tw-transition",
--- a/libs/components/src/link/link.directive.ts
+++ b/libs/components/src/link/link.directive.ts
@@ -25,7 +25,7 @@ const commonStyles = [
  "tw-leading-none",
  "tw-px-0",
  "tw-py-0.5",
-  "tw-font-semibold",
+  "tw-font-medium",
  "tw-bg-transparent",
  "tw-border-0",
  "tw-border-none",
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -17,7 +17,7 @@
        <ng-template #anchorAndButtonContent>
          <div
            [title]="text()"
-            class="tw-gap-2 tw-flex tw-items-center tw-font-bold tw-h-full"
+            class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full"
            [ngClass]="{ 'tw-justify-center': !open }"
          >
            <i
--- a/libs/components/src/no-items/no-items.component.html
+++ b/libs/components/src/no-items/no-items.component.html
@@ -3,7 +3,7 @@
    <div class="tw-size-24 tw-content-center">
      <bit-icon [icon]="icon()" aria-hidden="true"></bit-icon>
    </div>
-    <h3 class="tw-font-semibold tw-text-center tw-mt-4">
+    <h3 class="tw-font-medium tw-text-center tw-mt-4">
      <ng-content select="[slot=title]"></ng-content>
    </h3>
    <p class="tw-text-center">
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -12,7 +12,7 @@
        class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-primary-100 tw-pb-4 tw-pt-2 tw-text-main"
      >
        <div class="tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
-          <h2 bitTypography="h5" class="tw-font-semibold tw-mt-1">
+          <h2 bitTypography="h5" class="tw-font-medium tw-mt-1">
            {{ title() }}
          </h2>
          <button
--- a/libs/components/src/progress/progress.component.ts
+++ b/libs/components/src/progress/progress.component.ts
@@ -51,7 +51,7 @@ export class ProgressComponent {
      "tw-items-center",
      "tw-whitespace-nowrap",
      "tw-text-xs",
-      "tw-font-semibold",
+      "tw-font-medium",
      "tw-text-contrast",
      "tw-transition-all",
    ]
--- a/libs/components/src/radio-button/radio-group.component.html
+++ b/libs/components/src/radio-button/radio-group.component.html
@@ -1,6 +1,6 @@
@if (label()) {
  <fieldset>
-    <legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
+    <legend class="tw-mb-1 tw-block tw-text-sm tw-font-medium tw-text-main">
      <ng-content select="bit-label"></ng-content>
      @if (required) {
        <span class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
--- a/libs/components/src/stepper/stepper.component.html
+++ b/libs/components/src/stepper/stepper.component.html
@@ -18,13 +18,13 @@
          >
            @if (step.completed) {
              <span
-                class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
+                class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-medium tw-leading-9 tw-text-contrast"
              >
                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
              </span>
            } @else {
              <span
-                class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-bold tw-leading-9"
+                class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-medium tw-leading-9"
                [ngClass]="{
                  'tw-bg-primary-600 tw-text-contrast': selectedIndex === $index,
                  'tw-bg-secondary-300 tw-text-main':
@@ -83,13 +83,13 @@
      >
        @if (step.completed) {
          <span
-            class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
+            class="tw-me-3.5 tw-size-9 tw-rounded-full tw-bg-primary-600 tw-font-medium tw-leading-9 tw-text-contrast"
          >
            <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
          </span>
        } @else {
          <span
-            class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-bold tw-leading-9"
+            class="tw-me-3.5 tw-size-9 tw-rounded-full tw-font-medium tw-leading-9"
            [ngClass]="{
              'tw-bg-primary-600 tw-text-contrast': selectedIndex === $index,
              'tw-bg-secondary-300 tw-text-main':
--- a/libs/components/src/stories/migration.mdx
+++ b/libs/components/src/stories/migration.mdx
@@ -61,14 +61,14 @@ This is easy to verify. Bitwarden prefixes all Tailwind classes with `tw-`. If y
 without this prefix, it probably shouldn't be there.

 <div class="tw-bg-danger-600/10 tw-p-4">
-  <span class="tw-font-bold tw-text-danger">Bad (Bootstrap)</span>
+  <span class="tw-font-medium tw-text-danger">Bad (Bootstrap)</span>
  ```html
  <div class="mb-2"></div>
  ```
 </div>

 <div class="tw-bg-success-600/10 tw-p-4">
-  <span class="tw-font-bold tw-text-success">Good (Tailwind)</span>
+  <span class="tw-font-medium tw-text-success">Good (Tailwind)</span>
  ```html
  <div class="tw-mb-2"></div>
  ```
@@ -77,7 +77,7 @@ without this prefix, it probably shouldn't be there.
 **Exception:** Icon font classes, prefixed with `bwi`, are allowed.

 <div class="tw-bg-success-600/10 tw-p-4">
-  <span class="tw-font-bold tw-text-success">Good (Icons)</span>
+  <span class="tw-font-medium tw-text-success">Good (Icons)</span>
  ```html
  <i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
  ```
@@ -91,7 +91,7 @@ reactive forms to make use of these components. Review the
 [form component docs](?path=/docs/component-library-form--docs).

 <div class="tw-bg-danger-600/10 tw-p-4">
-    <span class="tw-text-danger tw-font-bold">Bad</span>
+    <span class="tw-text-danger tw-font-medium">Bad</span>
    ```html
    <form #form (ngSubmit)="submit()">
        ...
@@ -100,7 +100,7 @@ reactive forms to make use of these components. Review the
 </div>

 <div class="tw-bg-success-600/10 tw-p-4">
-    <span class="tw-text-success tw-font-bold">Good</span>
+    <span class="tw-text-success tw-font-medium">Good</span>
    ```html
    <form [formGroup]="formGroup" [bitSubmit]="submit">
        ...
--- a/libs/components/src/table/sortable.component.ts
+++ b/libs/components/src/table/sortable.component.ts
@@ -106,7 +106,7 @@ export class SortableComponent implements OnInit {
  get classList() {
    return [
      "tw-min-w-max",
-      "tw-font-bold",
+      "tw-font-medium",

      // Below is copied from BitIconButtonComponent
      "tw-border",
--- a/libs/components/src/table/table-scroll.component.html
+++ b/libs/components/src/table/table-scroll.component.html
@@ -5,7 +5,7 @@
 >
  <table [ngClass]="tableClass">
    <thead
-      class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
+      class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-medium tw-text-muted"
    >
      <tr>
        <ng-content select="[header]"></ng-content>
--- a/libs/components/src/table/table.component.html
+++ b/libs/components/src/table/table.component.html
@@ -1,6 +1,6 @@
 <table [ngClass]="tableClass">
  <thead
-    class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
+    class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-medium tw-text-muted"
  >
    <ng-content select="[header]"></ng-content>
  </thead>
--- a/libs/components/src/tabs/shared/tab-list-item.directive.ts
+++ b/libs/components/src/tabs/shared/tab-list-item.directive.ts
@@ -60,7 +60,7 @@ export class TabListItemDirective implements FocusableOption {
      "tw-relative",
      "tw-py-2",
      "tw-px-4",
-      "tw-font-semibold",
+      "tw-font-medium",
      "tw-transition",
      "tw-rounded-t-lg",
      "tw-border-0",
--- a/libs/components/src/theme.css
+++ b/libs/components/src/theme.css
@@ -7,10 +7,10 @@
 * Font faces
 */
@font-face {
-  font-family: Roboto;
+  font-family: Inter;
  src:
-    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2 supports variations"),
-    url("~@bitwarden/components/src/webfonts/roboto.woff2") format("woff2-variations");
+    url("~@bitwarden/components/src/webfonts/inter.woff2") format("woff2 supports variations"),
+    url("~@bitwarden/components/src/webfonts/inter.woff2") format("woff2-variations");
  font-display: swap;
  font-weight: 100 900;
 }
@@ -20,7 +20,7 @@
 */
 :root {
  --font-sans:
-    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    Inter, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Menlo, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--- a/libs/components/src/toast/toast.component.html
+++ b/libs/components/src/toast/toast.component.html
@@ -9,7 +9,7 @@
    <div>
      <span class="tw-sr-only">{{ variant() | i18n }}</span>
      @if (title(); as title) {
-        <p data-testid="toast-title" class="tw-font-semibold tw-mb-0">{{ title }}</p>
+        <p data-testid="toast-title" class="tw-font-medium tw-mb-0">{{ title }}</p>
      }
      @for (m of messageArray; track m) {
        <p bitTypography="body2" data-testid="toast-message" class="tw-mb-2 last:tw-mb-0">
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -56,7 +56,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
      "tw-items-center",
      "tw-justify-center",
      "tw-gap-1.5",
-      "!tw-font-semibold",
+      "!tw-font-medium",
      "tw-leading-5",
      "tw-transition",
      "tw-text-center",
--- a/libs/components/src/tw-theme-preflight.css
+++ b/libs/components/src/tw-theme-preflight.css
@@ -14,22 +14,22 @@
  }

  h1 {
-    @apply tw-text-3xl tw-font-semibold tw-text-main tw-mb-2;
+    @apply tw-text-3xl tw-text-main tw-mb-2;
  }
  h2 {
-    @apply tw-text-2xl tw-font-semibold tw-text-main tw-mb-2;
+    @apply tw-text-2xl tw-text-main tw-mb-2;
  }
  h3 {
-    @apply tw-text-xl tw-font-semibold tw-text-main tw-mb-2;
+    @apply tw-text-xl tw-text-main tw-mb-2;
  }
  h4 {
-    @apply tw-text-lg tw-font-semibold tw-text-main tw-mb-2;
+    @apply tw-text-lg tw-text-main tw-mb-2;
  }
  h5 {
-    @apply tw-text-base tw-font-bold tw-text-main tw-mb-1.5;
+    @apply tw-text-base tw-text-main tw-mb-1.5;
  }
  h6 {
-    @apply tw-text-sm tw-font-bold tw-text-main tw-mb-1.5;
+    @apply tw-text-sm tw-text-main tw-mb-1.5;
  }

  code {
@@ -59,7 +59,7 @@
  }

  dt {
-    @apply tw-font-bold;
+    @apply tw-font-medium;
  }

  hr {
@@ -78,4 +78,8 @@
  svg {
    display: inline;
  }
+
+  th {
+    @apply tw-font-medium;
+  }
 }
--- a/libs/components/src/typography/typography.directive.ts
+++ b/libs/components/src/typography/typography.directive.ts
@@ -3,12 +3,12 @@ import { booleanAttribute, Directive, HostBinding, input } from "@angular/core";
 type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";

 const styles: Record<TypographyType, string[]> = {
-  h1: ["!tw-text-3xl", "tw-font-semibold", "tw-text-main"],
-  h2: ["!tw-text-2xl", "tw-font-semibold", "tw-text-main"],
-  h3: ["!tw-text-xl", "tw-font-semibold", "tw-text-main"],
-  h4: ["!tw-text-lg", "tw-font-semibold", "tw-text-main"],
-  h5: ["!tw-text-base", "tw-font-bold", "tw-text-main"],
-  h6: ["!tw-text-sm", "tw-font-bold", "tw-text-main"],
+  h1: ["!tw-text-3xl", "tw-text-main"],
+  h2: ["!tw-text-2xl", "tw-text-main"],
+  h3: ["!tw-text-xl", "tw-text-main"],
+  h4: ["!tw-text-lg", "tw-text-main"],
+  h5: ["!tw-text-base", "tw-text-main"],
+  h6: ["!tw-text-sm", "tw-text-main"],
  body1: ["!tw-text-base"],
  body2: ["!tw-text-sm"],
  helper: ["!tw-text-xs"],
--- a/libs/components/src/typography/typography.stories.ts
+++ b/libs/components/src/typography/typography.stories.ts
@@ -1,28 +1,226 @@
-import { Meta, StoryObj } from "@storybook/angular";
+import { Meta, moduleMetadata } from "@storybook/angular";
+
+import { TableModule, TableDataSource } from "../table";

 import { TypographyDirective } from "./typography.directive";

 export default {
  title: "Component Library/Typography",
  component: TypographyDirective,
+  decorators: [
+    moduleMetadata({
+      imports: [TableModule],
+    }),
+  ],
 } as Meta;

-export const Default: StoryObj<TypographyDirective & { text: string }> = {
-  render: (args) => ({
+type TypographyData = {
+  id: string;
+  typography: string;
+  classes?: string;
+  weight: string;
+  size: number;
+  lineHeight: string;
+};
+
+const typographyProps: TypographyData[] = [
+  {
+    id: "h1",
+    typography: "h1",
+    weight: "Regular",
+    size: 30,
+    lineHeight: "150%",
+  },
+  {
+    id: "h2",
+    typography: "h2",
+    weight: "Regular",
+    size: 24,
+    lineHeight: "150%",
+  },
+  {
+    id: "h3",
+    typography: "h3",
+    weight: "Regular",
+    size: 20,
+    lineHeight: "150%",
+  },
+  {
+    id: "h4",
+    typography: "h4",
+    weight: "Regular",
+    size: 18,
+    lineHeight: "150%",
+  },
+  {
+    id: "h5",
+    typography: "h5",
+    weight: "Regular",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "h6",
+    typography: "h6",
+    weight: "Regular",
+    size: 14,
+    lineHeight: "150%",
+  },
+  {
+    id: "body",
+    typography: "body1",
+    weight: "Regular",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-med",
+    typography: "body1",
+    classes: "tw-font-medium",
+    weight: "Medium",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-semi",
+    typography: "body1",
+    classes: "tw-font-semibold",
+    weight: "Semibold",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-underline",
+    typography: "body1",
+    classes: "tw-underline",
+    weight: "Regular",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-sm",
+    typography: "body2",
+    weight: "Regular",
+    size: 14,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-sm-med",
+    typography: "body2",
+    classes: "tw-font-medium",
+    weight: "Medium",
+    size: 14,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-sm-semi",
+    typography: "body2",
+    classes: "tw-font-semibold",
+    weight: "Semibold",
+    size: 14,
+    lineHeight: "150%",
+  },
+  {
+    id: "body-sm-underline",
+    typography: "body2",
+    classes: "tw-underline",
+    weight: "Regular",
+    size: 14,
+    lineHeight: "150%",
+  },
+  {
+    id: "helper",
+    typography: "helper",
+    weight: "Regular",
+    size: 12,
+    lineHeight: "150%",
+  },
+  {
+    id: "helper-med",
+    typography: "helper",
+    classes: "tw-font-medium",
+    weight: "Medium",
+    size: 12,
+    lineHeight: "150%",
+  },
+  {
+    id: "helper-semi",
+    typography: "helper",
+    classes: "tw-font-semibold",
+    weight: "Semibold",
+    size: 12,
+    lineHeight: "150%",
+  },
+  {
+    id: "helper-underline",
+    typography: "helper",
+    classes: "tw-underline",
+    weight: "Regular",
+    size: 12,
+    lineHeight: "150%",
+  },
+  {
+    id: "code",
+    typography: "body1",
+    classes: "tw-font-mono tw-text-code",
+    weight: "Regular",
+    size: 16,
+    lineHeight: "150%",
+  },
+  {
+    id: "code-sm",
+    typography: "body2",
+    classes: "tw-font-mono tw-text-code",
+    weight: "Regular",
+    size: 14,
+    lineHeight: "150%",
+  },
+
+  {
+    id: "code-helper",
+    typography: "helper",
+    classes: "tw-font-mono tw-text-code",
+    weight: "Regular",
+    size: 12,
+    lineHeight: "150%",
+  },
+];
+
+const typographyData = new TableDataSource<TypographyData>();
+typographyData.data = typographyProps;
+
+export const Default = {
+  render: (args: { text: string; dataSource: typeof typographyProps }) => ({
    props: args,
    template: /*html*/ `
-      <div bitTypography="h1">h1 - {{ text }}</div>
-      <div bitTypography="h2">h2 - {{ text }}</div>
-      <div bitTypography="h3">h3 - {{ text }}</div>
-      <div bitTypography="h4">h4 - {{ text }}</div>
-      <div bitTypography="h5">h5 - {{ text }}</div>
-      <div bitTypography="h6">h6 - {{ text }}</div>
-      <div bitTypography="body1" class="tw-text-main">body1 - {{ text }}</div>
-      <div bitTypography="body2" class="tw-text-main">body2 - {{ text }}</div>
-      <div bitTypography="helper" class="tw-text-main">helper - {{ text }}</div>
+      <bit-table [dataSource]="dataSource">
+        <ng-container header>
+          <tr>
+            <th bitCell>Rendered Text</th>
+            <th bitCell>bitTypography Variant</th>
+            <th bitCell>Additional Classes</th>
+            <th bitCell>Weight</th>
+            <th bitCell>Size</th>
+            <th bitCell>Line Height</th>
+          </tr>
+        </ng-container>
+        <ng-template body let-rows$>
+          @for (row of rows$ | async; track row.id) {
+            <tr bitRow alignContent="middle">
+              <td bitCell><div [bitTypography]="row.typography" [ngClass]="row.classes">{{text}}</div></td>
+              <td bitCell bitTypography="body2">{{row.typography}}</td>
+              <td bitCell bitTypography="body2">{{row.classes}}</td>
+              <td bitCell bitTypography="body2">{{row.weight}}</td>
+              <td bitCell bitTypography="body2">{{row.size}}</td>
+              <td bitCell bitTypography="body2">{{row.lineHeight}}</td>
+            </tr>
+          }
+        </ng-template>
+      </bit-table>
    `,
  }),
  args: {
    text: `Sphinx of black quartz, judge my vow.`,
+    dataSource: typographyData,
  },
 };
--- a/libs/components/src/webfonts/inter.woff2
+++ b/libs/components/src/webfonts/inter.woff2
--- a/libs/components/src/webfonts/roboto.woff2
+++ b/libs/components/src/webfonts/roboto.woff2
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -155,8 +155,14 @@ module.exports = {
        "90vw": "90vw",
      }),
      fontSize: {
-        xs: [".8125rem", "1rem"],
-        "3xl": ["1.75rem", "2rem"],
+        "3xl": ["1.875rem", "150%"],
+        "2xl": ["1.5rem", "150%"],
+        xl: ["1.25rem", "150%"],
+        lg: ["1.125rem", "150%"],
+        md: ["1rem", "150%"],
+        base: ["1rem", "150%"],
+        sm: ["0.875rem", "150%"],
+        xs: [".75rem", "150%"],
      },
      container: {
        "@5xl": "1100px",