style(general) Replaced fixed values for font-size and line-height with rem (#15917)

* style(general) Replaced font-size fixed units with rem

* style(general) Replaced font-size fixed units with rem in the tokens

* style(general) Replaced line-height fixed units with rem

css/404.scss

@@ -4,12 +4,12 @@
     text-align: center;
 
     h2 {
-        font-size: 48px;
+        font-size: 3rem;
         color : #f2f2f2;
     }
 
     &__message {
-        font-size: 24px;
+        font-size: 1.5rem;
         margin-top: 20px;
     }
 }

css/_base.scss

@@ -28,7 +28,7 @@ body {
     margin: 0px;
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 400;
     overflow: hidden;
     color: #F1F1F1;
@@ -139,7 +139,7 @@ form {
     position: absolute;
     left: 25;
     bottom: 7;
-    font-size: 11pt;
+    font-size: 0.875rem;
     color: rgba(255,255,255,.50);
     text-decoration: none;
     z-index: $watermarkZ;

css/_chat.scss

@@ -11,9 +11,9 @@
 #chatconversation {
     box-sizing: border-box;
     flex: 1;
-    font-size: 10pt;
+    font-size: 0.75rem;
     height: calc(100% - 10px);
-    line-height: 20px;
+    line-height: 1.25rem;
     overflow: auto;
     padding: 16px;
     text-align: left;
@@ -72,7 +72,7 @@
 #nickname {
     text-align: center;
     color: #9d9d9d;
-    font-size: 16px;
+    font-size: 1rem;
     margin: auto 0;
     padding: 0 16px;
 
@@ -86,7 +86,7 @@
     }
 
     label {
-        line-height: 24px;
+        line-height: 1.5rem;
     }
 }
 
@@ -98,7 +98,7 @@
     }
 
     .chatmessage .usermessage {
-        font-size: 16px;
+        font-size: 1rem;
     }
 }
 
@@ -124,7 +124,7 @@
 }
 
 #smileys {
-    font-size: 20pt;
+    font-size: 1.625rem;
     margin: auto;
     cursor: pointer;
 }
@@ -168,7 +168,7 @@
 }
 
 #smileysContainer .smiley {
-    font-size: 20pt;
+    font-size: 1.625rem;
 }
 
 .smileyContainer {
@@ -219,8 +219,8 @@
         box-sizing: border-box;
         color: #fff;
         font-weight: 600;
-        font-size: 24px;
-        line-height: 32px;
+        font-size: 1.5rem;
+        line-height: 2rem;
 
         .jitsi-icon {
             cursor: pointer;

css/_chrome-extension-banner.scss

@@ -34,8 +34,8 @@
     }
 
     &__checkbox-label {
-        font-size: 14px;
-        line-height: 18px;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
         display: flex;
         align-items: center;
         letter-spacing: -0.006em;
@@ -51,8 +51,8 @@
     }
 
     &__text-container {
-      font-size: 14px;
-      line-height: 18px;
+      font-size: 0.875rem;
+      line-height: 1.125rem;
       display: flex;
       align-items: center;
       letter-spacing: -0.006em;
@@ -84,8 +84,8 @@
 
     &__button-text {
       font-weight: 600;
-      font-size: 14px;
-      line-height: 40px;
+      font-size: 0.875rem;
+      line-height: 2.5rem;
       text-align: center;
       letter-spacing: -0.006em;
       color: #FFFFFF;

css/_inlay.scss

@@ -10,7 +10,7 @@
         margin: 17px 0;
         padding-bottom: 17px;
         color: #ffffff;
-        font-size: 21px;
+        font-size: 1.25rem;
         letter-spacing: 0.3px;
         border-bottom: 1px solid lighten(#FFFFFF, 10%);
     }
@@ -19,12 +19,12 @@
         color: #ffffff;
         display: block;
         margin-top: 22px;
-        font-size: 16px;
+        font-size: 1rem;
     }
 
     &__icon {
         margin: 0 10px;
-        font-size: 50px;
+        font-size: 3.125rem;
     }
 
 }

css/_meetings_list.scss

@@ -1,7 +1,7 @@
 .meetings-list {
-    font-size: 14px;
+    font-size: 0.875rem;
     color: #253858;
-    line-height: 20px;
+    line-height: 1.25rem;
     text-align: left;
     text-overflow: ellipsis;
     display: flex;
@@ -20,8 +20,8 @@
 
         .description {
             color: #2f3237;
-            font-size: 14px;
-            line-height: 18px;
+            font-size: 0.875rem;
+            line-height: 1.125rem;
             margin-bottom: 16px;
             max-width: 436px;
         }
@@ -37,8 +37,8 @@
         color: #0163FF;
         cursor: pointer;
         display: flex;
-        font-size: 14px;
-        line-height: 18px;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
         margin: 24px 0 32px 0;
     }
 
@@ -101,17 +101,17 @@
         }
 
         .title {
-            font-size: 12px;
+            font-size: 0.75rem;
             font-weight: 600;
-            line-height: 16px;
+            line-height: 1rem;
             margin-bottom: 4px;
         }
 
         .subtitle {
             color: #5E6D7A;
             font-weight: normal;
-            font-size: 12px;
-            line-height: 16px;
+            font-size: 0.75rem;
+            line-height: 1rem;
         }
 
 

css/_navigate_section_list.scss

@@ -1,7 +1,7 @@
 %navigate-section-list-text {
     width: 100%;
-    font-size: 14px;
-    line-height: 20px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
     color: $welcomePageTitleColor;
     text-align: left;
     font-family: 'open_sanslight', Helvetica, sans-serif;
@@ -52,7 +52,7 @@
 .navigate-section-tile-body {
     @extend %navigate-section-list-tile-text;
     font-weight: normal;
-    line-height: 24px;
+    line-height: 1.5rem;
 }
 .navigate-section-list-tile-info {
     flex: 1;
@@ -61,7 +61,7 @@
 .navigate-section-tile-title {
     @extend %navigate-section-list-tile-text;
     font-weight: bold;
-    line-height: 24px;
+    line-height: 1.5rem;
 }
 .navigate-section-section-header {
     @extend %navigate-section-list-text;

css/_policy.scss

@@ -8,8 +8,8 @@
 
     &__text {
         text-align: center;
-        font-size: 14px;
-        line-height: 21px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
         font-weight: 300;
     }
 }

css/_reactions-menu.scss

@@ -55,7 +55,7 @@
 		span.emoji {
 			width: 40px;
 			height: 40px;
-			font-size: 22px;
+			font-size: 1.375rem;
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -63,7 +63,7 @@
 
 			@for $i from 1 through 12 {
 				&.increase-#{$i}{
-					font-size: calc(20px + #{$i}px);
+					font-size: calc(1.25rem + #{$i}px);
 				}
 			}
 		}
@@ -96,8 +96,8 @@
 			span.text {
 				font-style: normal;
 				font-weight: 600;
-				font-size: 14px;
-				line-height: 24px;
+				font-size: 0.875rem;
+				line-height: 1.5rem;
 				margin-left: 8px;
 			}
 		}
@@ -132,8 +132,8 @@ $reactionCount: 20;
 
 .reaction-emoji {
 	position: absolute;
-	font-size: 24px;
-	line-height: 32px;
+	font-size: 1.5rem;
+	line-height: 2rem;
 	width: 32px;
 	height: 32px;
 	top: 0;

css/_recording.scss

@@ -12,7 +12,7 @@
         .recording-title {
             display: inline-flex;
             align-items: center;
-            font-size: 14px;
+            font-size: 0.875rem;
             margin-left: 16px;
             max-width: 70%;
 
@@ -35,8 +35,8 @@
     .local-recording-warning {
         margin-top: 8px;
         display: block;
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
         padding: 8px 16px;
 
         &.text {
@@ -126,7 +126,7 @@
 
     .recording-info-title {
         display: inline-flex;
-        font-size: 14px;
+        font-size: 0.875rem;
         width: 290px
     }
 
@@ -150,7 +150,7 @@
     /**
      * Set font-size to be consistent with Atlaskit FieldText.
      */
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .broadcast-dropdown {
         text-align: left;
@@ -194,6 +194,6 @@
 
     .warning-text {
         color:#FFD740;
-        font-size: 12px;
+        font-size: 0.75rem;
     }
 }

css/_redirect_page.scss

@@ -2,7 +2,7 @@
     width: 30%;
     margin: 20% auto;
     text-align: center;
-    font-size: 24px;
+    font-size: 1.5rem;
 
     .thanks-msg {
         border-bottom: 1px solid #FFFFFF;
@@ -10,16 +10,16 @@
         padding-right: 30px;
         p {
             margin: 30px auto;
-            font-size: 24px;
-            line-height: 24px;
+            font-size: 1.5rem;
+            line-height: 1.5rem;
         }
     }
     .hint-msg {
         p {
             margin: 26px auto;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 18px;
+            font-size: 1rem;
+            line-height: 1.125rem;
             .hint-msg__holder{
                 font-weight: 200;
             }
@@ -33,7 +33,7 @@
     }
     .forbidden-msg {
         p {
-            font-size: 16px;
+            font-size: 1rem;
             margin-top: 15px;
         }
     }

css/_reset.scss

@@ -70,7 +70,7 @@ input[type="reset"] {
 body {
   color: #333;
   font-family: Arial, sans-serif;
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.42857142857143;
 }
 /* International Font Stacks*/
@@ -113,7 +113,7 @@ pre:first-child {
 /* Headings: desired line height in px / font size = unitless line height */
 h1 {
   color: #333;
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: normal;
   line-height: 1.25;
   text-transform: none;
@@ -121,7 +121,7 @@ h1 {
 }
 h2 {
   color: #333;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: normal;
   line-height: 1.25;
   text-transform: none;
@@ -129,14 +129,14 @@ h2 {
 }
 h3 {
   color: #333;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: normal;
   line-height: 1.5;
   text-transform: none;
   margin: 30px 0 0 0;
 }
 h4 {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: bold;
   line-height: 1.25;
   text-transform: none;
@@ -144,7 +144,7 @@ h4 {
 }
 h5 {
   color: #333;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.42857143;
   text-transform: none;
@@ -152,7 +152,7 @@ h5 {
 }
 h6 {
   color: #707070;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: bold;
   line-height: 1.66666667;
   text-transform: uppercase;
@@ -179,7 +179,7 @@ h5 + h6 {
 /* Other typographical elements */
 small {
   color: #707070;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33333333333333;
 }
 code,

css/_responsive.scss

@@ -4,7 +4,7 @@
 
         #enter_room {
             .welcome-page-button {
-                font-size: 16px;
+                font-size: 1rem;
                 left: 0;
                 text-align: center;
                 width: 100%;

css/_toolbars.scss

@@ -9,9 +9,9 @@
     // Do not inherit the font-family from the toolbar button, because it's an
     // icon style.
     font-family: $baseFontFamily;
-    font-size: 9px;
+    font-size: 0.5rem;
     font-weight: 700;
-    line-height: 13px;
+    line-height: 0.75rem;
     min-width: 13px;
     overflow: hidden;
     text-align: center;
@@ -69,8 +69,8 @@
 
     .badge-round {
         bottom: -5px;
-        font-size: 12px;
-        line-height: 20px;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
         min-width: 20px;
         pointer-events: none;
         position: absolute;

css/_variables.scss

@@ -50,11 +50,11 @@ $filmstripVideosZ: $toolbarZ + 1;
 $primaryUnsupportedBrowserButtonBgColor: #0052CC;
 $unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
 $unsupportedBrowserTextColor: #4a4a4a;
-$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTextSmallFontSize: 1rem;
 $unsupportedBrowserTitleColor: #fff;
-$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedBrowserTitleFontSize: 1.5rem;
 $unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
-$unsupportedDesktopBrowserTextFontSize: 21px;
+$unsupportedDesktopBrowserTextFontSize: 1.25rem;
 
 /**
  * The size of the default watermark.
@@ -89,7 +89,7 @@ $welcomePageHeaderContainerDisplay: flex;
 $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
 
 $welcomePageHeaderTextTitleMarginBottom: 0;
-$welcomePageHeaderTextTitleFontSize: 42px;
+$welcomePageHeaderTextTitleFontSize: 2.625rem;
 $welcomePageHeaderTextTitleFontWeight: normal;
 $welcomePageHeaderTextTitleLineHeight: 50px;
 $welcomePageHeaderTextTitleOpacity: 1;

css/_videolayout_default.scss

@@ -160,7 +160,7 @@
 }
 
 #alwaysOnTop .displayname {
-    font-size: 15px;
+    font-size: 0.875rem;
     position: inherit;
     width: 100%;
     left: 0px;
@@ -294,7 +294,7 @@
     width: auto;
     z-index: $zindex2;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 0.875rem;
     text-align: center;
     color: #FFF;
     left: 50%;
@@ -340,7 +340,7 @@
 
 .presence-label {
     color: #fff;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 100;
     left: 0;
     margin: 0 auto;

css/_welcome_page.scss

@@ -53,9 +53,9 @@ body.welcome-page {
 
         .header-text-subtitle {
             color: #fff;
-            font-size: 20px;
+            font-size: 1.25rem;
             font-weight: 600;
-            line-height: 26px;
+            line-height: 1.625rem;
             margin: 16px 0 32px 0;
             text-align: $welcomePageHeaderTextAlign;
 
@@ -64,7 +64,7 @@ body.welcome-page {
         .not-allow-title-character-div {
             color: #f03e3e;
             background-color: #fff;
-            font-size: 12px;
+            font-size: 0.75rem;
             font-weight: 600;
             margin: 10px 0px 5px 0px;
             text-align: $welcomePageHeaderTextAlign;
@@ -147,7 +147,7 @@ body.welcome-page {
                     display: inline-block;
                     height: 50px;
                     width: 100%;
-                    font-size: 14px;
+                    font-size: 0.875rem;
                     padding-left: 10px;
 
                     &.focus-visible {
@@ -172,7 +172,7 @@ body.welcome-page {
     }
 
     .tab-container {
-        font-size: 16px;
+        font-size: 1rem;
         position: relative;
         text-align: left;
         display: $welcomePageTabContainerDisplay;
@@ -191,8 +191,8 @@ body.welcome-page {
             background-color: #c7ddff;
             border-radius: 6px;
             color: #0163FF;
-            font-size: 14px;
-            line-height: 18px;
+            font-size: 0.875rem;
+            line-height: 1.125rem;
             margin: 4px;
             display: $welcomePageTabButtonsDisplay;
 
@@ -218,7 +218,7 @@ body.welcome-page {
 
     .welcome-page-button {
         border: 0;
-        font-size: 14px;
+        font-size: 0.875rem;
         background: $welcomePageButtonBg;
         border-radius: 3px;
         color: #FFFFFF;
@@ -246,7 +246,7 @@ body.welcome-page {
 
         * {
             cursor: pointer;
-            font-size: 32px;
+            font-size: 2rem;
         }
 
         .toolbox-icon {

css/modals/invite/_add-people.scss

@@ -20,7 +20,7 @@
             width: 28px;
 
             i {
-                line-height: 28px;
+                line-height: 1.75rem;
                 margin: auto;
             }
         }
@@ -35,7 +35,7 @@
             padding-left: 10px;
 
             i {
-                line-height: 20px;
+                line-height: 1.25rem;
                 margin: auto;
             }
         }

css/modals/invite/_info.scss

@@ -1,7 +1,7 @@
 .info-dialog {
     cursor: default;
     display: flex;
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .info-dialog-column {
         margin-right: 10px;
@@ -53,8 +53,8 @@
     max-width: 334px;
     width: 100%;
     margin-top: 20px;
-    font-size: 12px;
-    line-height: 24px;
+    font-size: 0.75rem;
+    line-height: 1.5rem;
     border-collapse: collapse;
 
     * {
@@ -107,7 +107,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: 12px;
+    font-size: 0.75rem;
     max-height: 100%;
     overflow: auto;
     padding: 15pt;

css/modals/invite/_invite_more.scss

@@ -1,8 +1,8 @@
 .invite-more {
     &-dialog {
         color: #fff;
-        font-size: 15px;
-        line-height: 24px;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
 
         &.separator {
             margin: 24px 0 24px -20px;

css/modals/screen-share/_share-screen-warning.scss

@@ -1,5 +1,5 @@
 .share-screen-warn-dialog {
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .separator-line {
         margin: 24px 0 24px -20px;

css/modals/security/_security.scss

@@ -1,15 +1,15 @@
 .security {
     &-dialog {
         color: #fff;
-        font-size: 15px;
-        line-height: 24px;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
 
         &.password-section {
             display: flex;
             flex-direction: column;
 
             .description {
-                font-size: 13px;
+                font-size: 0.75rem;
             }
 
             .password {
@@ -24,7 +24,7 @@
                     button {
                         cursor: pointer;
                         text-decoration: none;
-                        font-size: 14px;
+                        font-size: 0.875rem;
                         color: #6FB1EA;
                     }
 

css/premeeting/_lobby.scss

@@ -1,7 +1,7 @@
 .lobby-screen {
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 400;
-    line-height: 26px;
+    line-height: 1.625rem;
 
     &-content {
         align-items: center;
@@ -43,7 +43,7 @@
     flex-direction: column;
 
     .description {
-        font-size: 13px;
+        font-size: 0.75rem;
     }
 
     .control-row {
@@ -53,7 +53,7 @@
         margin-top: 15px;
 
         label {
-            font-size: 14px;
+            font-size: 0.875rem;
             font-weight: bold;
         }
     }
@@ -191,9 +191,9 @@
                 .title {
                     flex: 1;
                     color: #fff;
-                    font-size: 20px;
+                    font-size: 1.25rem;
                     font-weight: 600;
-                    line-height: 28px;
+                    line-height: 1.75rem;
                     letter-spacing: -1.2%;
                 }
             }
@@ -214,8 +214,8 @@
     border-radius: 6px;
     box-sizing: border-box;
     color: white;
-    font-size: 12px;
-    line-height: 16px;
+    font-size: 0.75rem;
+    line-height: 1rem;
     margin-bottom: 16px;
     margin-top: -8px;
     padding: 4px;

css/premeeting/_premeeting-screens.scss

@@ -5,9 +5,9 @@
         color: #fff;
         cursor: pointer;
         display: inline-block;
-        font-size: 14px;
+        font-size: 0.875rem;
         font-weight: 600;
-        line-height: 24px;
+        line-height: 1.5rem;
         margin-bottom: 16px;
         padding: 7px 16px;
         position: relative;
@@ -26,7 +26,7 @@
 
         &.text {
             width: auto;
-            font-size: 13px;
+            font-size: 0.75rem;
             margin: 0;
             padding: 0;
         }
@@ -98,7 +98,7 @@
         }
 
         .action-btn {
-            font-size: 16px;
+            font-size: 1rem;
             margin-bottom: 8px;
             padding: 11px 16px;
         }

css/reload_overlay/_reload_overlay.scss

@@ -1,13 +1,13 @@
 .reload_overlay_title {
     display: block;
-    font-size: 16px;
-    line-height: 20px;
+    font-size: 1rem;
+    line-height: 1.25rem;
 }
 
 .reload_overlay_text {
     display: block;
-    font-size: 12px;
-    line-height: 30px;
+    font-size: 0.75rem;
+    line-height: 1.875rem;
 }
 
 #reloadProgressBar {

css/ringing/_ringing.scss

@@ -34,12 +34,12 @@
 
     &__status{
         margin-top: 15px;
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
     }
 
     &__name {
-        font-size: 24px;
-        line-height: 32px;
+        font-size: 1.5rem;
+        line-height: 2rem;
     }
 }

css/third-party-branding/google.scss

@@ -8,7 +8,7 @@
     cursor: pointer;
     display: inline-flex;
     font-family: Roboto, arial, sans-serif;
-    font-size: 14px;
+    font-size: 0.875rem;
     padding: 1px;
 
     .google-cta {
@@ -17,7 +17,7 @@
         /**
          * Hack the line height for vertical centering of text.
          */
-        line-height: 32px;
+        line-height: 2rem;
         margin: 0 15px;
     }
 

css/third-party-branding/microsoft.scss

@@ -17,8 +17,8 @@
     .microsoft-cta {
         display: inline-block;
         color: #5E5E5E;
-        font-size: 15px;
-        line-height: 41px;
+        font-size: 0.875rem;
+        line-height: 2.5rem;
     }
 
     .microsoft-logo {

react/features/base/ui/Tokens.ts

@@ -138,64 +138,64 @@ export const typography = {
     labelBold: 'labelBold01',
 
     bodyShortRegularSmall: {
-        fontSize: 10,
-        lineHeight: 16,
+        fontSize: '0.625rem',
+        lineHeight: '1rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortRegular: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBold: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyShortRegularLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBoldLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongRegular: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongRegularLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongBold: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongBoldLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
@@ -205,29 +205,29 @@ export const typography = {
     heading2: 'heading02',
 
     heading3: {
-        fontSize: 32,
-        lineHeight: 40,
+        fontSize: '2rem',
+        lineHeight: '2.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading4: {
-        fontSize: 28,
-        lineHeight: 36,
+        fontSize: '1.75rem',
+        lineHeight: '2.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading5: {
-        fontSize: 20,
-        lineHeight: 28,
+        fontSize: '1.25rem',
+        lineHeight: '1.75rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading6: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     }

static/offline.html

@@ -21,18 +21,18 @@
       align-items: center;
       flex-direction: column;
       font-family: Arial, Helvetica, sans-serif;
-      font-size: 14px;
+      font-size: 0.875rem;
       font-weight: 400;
-      line-height: 19px;
+      line-height: 1.125rem;
       margin: auto;
       max-width: 376px;
       text-align: center;
     }
 
     h4 {
-      font-size: 24px;
+      font-size: 1.5rem;
       font-weight: 600;
-      line-height: 32px;
+      line-height: 2rem;
       margin: 24px auto;
     }