diff --git a/res/css/_common.scss b/res/css/_common.scss
index ad64aced50..657fb21244 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -16,6 +16,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+:root {
+    font-size: 15px;
+}
+
 html {
     /* hack to stop overscroll bounce on OSX and iOS.
        N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +29,7 @@ html {
 
 body {
     font-family: $font-family;
-    font-size: 15px;
+    font-size: 1rem;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
     border: 0px;
@@ -60,7 +64,7 @@ b {
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 1.2rem;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -76,7 +80,7 @@ input[type=search],
 input[type=password] {
     padding: 9px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-weight: 600;
     min-width: 0;
 }
@@ -253,7 +257,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
-    font-size: 15px;
+    font-size: 1rem;
     position: relative;
     padding: 25px 30px 30px 30px;
     max-height: 80%;
@@ -321,8 +325,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: 1.467rem;
+    line-height: 2.400rem;
     color: $dialog-title-fg-color;
 }
 
@@ -350,7 +354,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_content {
     margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
@@ -446,7 +450,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: 1rem;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index fa2d87029d..67e7a7a8d6 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -36,7 +36,7 @@ limitations under the License.
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: 0.933rem;
     z-index: 5001;
 }
 
diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss
index 10f9e23a02..3a66805bfe 100644
--- a/res/css/structures/_CreateRoom.scss
+++ b/res/css/structures/_CreateRoom.scss
@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding: 9px;
     margin-top: 6px;
 }
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 87e885e668..eceeab2e1b 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
     display: flex;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $event-timestamp-color;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: 11px;
+    font-size: 0.733rem;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +80,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +90,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 72a1132c15..6eb5e33462 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -134,7 +134,7 @@ limitations under the License.
     overflow: hidden;
     color: $primary-fg-color;
     font-weight: bold;
-    font-size: 22px;
+    font-size: 1.467rem;
     padding-left: 19px;
     padding-right: 16px;
     /* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
     max-height: 42px;
     color: $settings-grey-fg-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
@@ -196,7 +196,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
-    font-size: 13px;
+    font-size: 0.867rem;
     margin-bottom: 10px;
 }
 
@@ -226,7 +226,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
     display: inline-block;
     vertical-align: top;
-    line-height: 24px;
+    line-height: 1.600rem;
     padding-left: 28px;
     color: $accent-color;
 }
@@ -258,7 +258,7 @@ limitations under the License.
 
 .mx_GroupView_membershipSection_description {
     /* To match textButton */
-    line-height: 34px;
+    line-height: 2.267rem;
 }
 
 .mx_GroupView_membershipSection_description .mx_BaseAvatar {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 85fdfa092d..6af4b54f91 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -147,7 +147,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: 0.933rem;
         margin: 4px 0 1px 9px;
         padding: 9px;
         padding-left: 42px;
diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss
index 36150c33a5..042994e48c 100644
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@@ -105,7 +105,7 @@ limitations under the License.
 .mx_MyGroups_placeholder {
     background-color: $info-plinth-bg-color;
     color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: 26.667rem;
     border-radius: 10px;
     text-align: center;
 }
@@ -149,11 +149,11 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_name {
     margin: 0px;
-    font-size: 15px;
+    font-size: 1rem;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: 0.867rem;
     opacity: 0.7;
 }
 
@@ -161,7 +161,7 @@ limitations under the License.
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: 0.867rem;
     max-height: 36px;
     overflow: hidden;
 }
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index c9e0261ec9..ff95cc2dba 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
-    font-size: 14px;
+    font-size: 0.933rem;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     color: $primary-fg-color;
-    font-size: 12px;
+    font-size: 0.8rem;
     display: inline;
     padding-left: 0px;
 }
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 3c373e8883..b0c2b4650f 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -96,7 +96,7 @@ limitations under the License.
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: 0.533rem;
     border-radius: 8px;
     color: $accent-fg-color;
     background-color: $accent-color;
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
index f3a7b0e243..b62f726d09 100644
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
-    font-size: 18px;
+    font-size: 1.2rem;
     font-weight: 600;
 }
 
@@ -124,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: 1.333rem;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $settings-grey-fg-color;
 }
 
@@ -150,7 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: 1rem;
     margin-top: 0;
 
     .mx_AccessibleButton {
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 090a40235f..1dc99b26f0 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_callBar {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
@@ -94,7 +94,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: 1.600rem;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -132,7 +132,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_connectionLostBar_desc {
     color: $primary-fg-color;
-    font-size: 13px;
+    font-size: 0.867rem;
     opacity: 0.5;
     padding-bottom: 20px;
 }
@@ -145,7 +145,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingBar {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -155,7 +155,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_isAlone {
     height: 50px;
-    line-height: 50px;
+    line-height: 3.333rem;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -174,11 +174,11 @@ limitations under the License.
 
     .mx_RoomStatusBar_callBar {
         height: 40px;
-        line-height: 40px;
+        line-height: 2.667rem;
     }
 
     .mx_RoomStatusBar_typingBar {
         height: 40px;
-        line-height: 40px;
+        line-height: 2.667rem;
     }
 }
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 1934e681c2..a76872a745 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -68,7 +68,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
+    font-size: 0.8rem;
     margin-left: 8px;
 }
 
@@ -76,7 +76,7 @@ limitations under the License.
     flex: 0 0 auto;
     border-radius: 8px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 0.8rem;
     padding: 0 5px;
     color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 5e826306c6..52de9384d7 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
-    font-size: 18px;
+    font-size: 1.2rem;
     text-align: center;
 
     pointer-events: none;
@@ -186,7 +186,7 @@ limitations under the License.
 
 .mx_RoomView_empty {
     flex: 1 1 auto;
-    font-size: 13px;
+    font-size: 0.867rem;
     padding-left: 3em;
     padding-right: 3em;
     margin-right: 20px;
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 7904df5a82..20e2120bfd 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -39,7 +39,7 @@ limitations under the License.
     cursor: pointer;
     display: block;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: 0.933rem;
     min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
     margin-bottom: 6px;
     position: relative;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 472831c0d9..5173358bcc 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -139,7 +139,7 @@ limitations under the License.
     background-color: $neutral-badge-color;
     color: #ffffff;
     font-weight: 600;
-    font-size: 10px;
+    font-size: 0.667rem;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -157,7 +157,7 @@ limitations under the License.
     border-radius: 8px;
     color: $accent-fg-color;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 0.933rem;
     padding: 0 5px;
     background-color: $roomtile-name-color;
 }
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index d1687743d6..07daf3f865 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -77,7 +77,7 @@ limitations under the License.
             grid-column: 1 / 3;
             grid-row: 1;
             margin: 0;
-            font-size: 15px;
+            font-size: 1rem;
             font-weight: 600;
         }
 
@@ -96,11 +96,11 @@ limitations under the License.
             white-space: nowrap;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
-            font-size: 12px;
+            font-size: 0.8rem;
         }
 
         .mx_Toast_deviceID {
-            font-size: 10px;
+            font-size: 0.667rem;
         }
     }
 }
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index ee03978f18..9bdffb530a 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_TopLeftMenuButton_name {
     margin: 0 7px;
-    font-size: 18px;
+    font-size: 1.2rem;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index b908861c6f..c84c48240e 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -29,7 +29,7 @@ limitations under the License.
 
 .mx_ViewSource pre {
     text-align: left;
-    font-size: 12px;
+    font-size: 0.8rem;
     padding: 0.5em 1em 0.5em 1em;
     word-wrap: break-word;
     white-space: pre-wrap;
diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
index 601492d43c..9367c2c996 100644
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_body {
-    font-size: 15px;
+    font-size: 1rem;
 }
 
 .mx_CompleteSecurity_waiting {
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 7c5b008535..219bf6d0e7 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_AuthBody {
     width: 500px;
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $authpage-secondary-color;
     background-color: $authpage-body-bg-color;
     border-radius: 0 4px 4px 0;
@@ -25,14 +25,14 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: 1.600rem;
         font-weight: 600;
         margin-top: 8px;
         color: $authpage-primary-color;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: 0.933rem;
         font-weight: 600;
         color: $authpage-primary-color;
     }
@@ -98,7 +98,7 @@ limitations under the License.
 
 .mx_AuthBody_editServerDetails {
     padding-left: 1em;
-    font-size: 12px;
+    font-size: 0.8rem;
     font-weight: normal;
 }
 
diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.scss
index 553adeee14..109a1f4670 100644
--- a/res/css/views/auth/_AuthButtons.scss
+++ b/res/css/views/auth/_AuthButtons.scss
@@ -43,7 +43,7 @@ limitations under the License.
 
     cursor: pointer;
 
-    font-size: 15px;
+    font-size: 1rem;
     padding: 0 11px;
     word-break: break-word;
 }
diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss
index ab169a6898..b1bdcb697e 100644
--- a/res/css/views/auth/_AuthFooter.scss
+++ b/res/css/views/auth/_AuthFooter.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthFooter {
     text-align: center;
     width: 100%;
-    font-size: 14px;
+    font-size: 0.933rem;
     opacity: 0.72;
     padding: 20px 0;
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss
index c7860fbe74..af0620c329 100644
--- a/res/css/views/auth/_CompleteSecurityBody.scss
+++ b/res/css/views/auth/_CompleteSecurityBody.scss
@@ -24,13 +24,13 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: 1.600rem;
         font-weight: 600;
         margin-top: 0;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: 0.933rem;
         font-weight: 600;
     }
 
diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss
index 6f7eac0cf6..e9ac8688ed 100644
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@@ -20,7 +20,7 @@ limitations under the License.
 
 .mx_AuthBody_language .mx_Dropdown_input {
     border: none;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-weight: 600;
     color: $authpage-lang-color;
 }
diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss
index ed781726b7..2042358b8a 100644
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ b/res/css/views/auth/_ServerTypeSelector.scss
@@ -65,5 +65,5 @@ limitations under the License.
 }
 
 .mx_ServerTypeSelector_description {
-    font-size: 10px;
+    font-size: 0.667rem;
 }
diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss
index 308cecfe1e..1e1a5f889f 100644
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ b/res/css/views/context_menus/_RoomTileContextMenu.scss
@@ -38,7 +38,7 @@ limitations under the License.
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: 1.067rem;
 }
 
 .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss
index 2c8d608950..b68d16281a 100644
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
 .mx_StatusMessageContextMenu_clear {
     @mixin mx_DialogButton;
     align-self: start;
-    font-size: 12px;
+    font-size: 0.8rem;
     padding: 6px 1em;
     border: 1px solid transparent;
     margin-right: 10px;
diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 46b279ce2d..20f95d7f84 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -22,7 +22,7 @@ limitations under the License.
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: 1.067rem;
 }
 
 .mx_TagTileContextMenu_item object {
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index ed0d0106bc..abcaa4fcb5 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -19,12 +19,12 @@ limitations under the License.
     border-radius: 4px;
 
     .mx_TopLeftMenu_greyedText {
-        font-size: 12px;
+        font-size: 0.8rem;
         opacity: 0.5;
     }
 
     .mx_TopLeftMenu_upgradeLink {
-        font-size: 12px;
+        font-size: 0.8rem;
 
         img {
             margin-left: 5px;
diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss
index 39a9260ba3..6b107b3253 100644
--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@@ -28,7 +28,7 @@ limitations under the License.
 .mx_AddressPickerDialog_input,
 .mx_AddressPickerDialog_input:focus {
     height: 26px;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-family: $font-family;
     padding-left: 12px;
     padding-right: 12px;
@@ -50,7 +50,7 @@ limitations under the License.
 .mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: 2.400rem;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 1px;
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
index b859d6bf4d..e589ef0450 100644
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@@ -26,22 +26,22 @@ limitations under the License.
 }
 
 .mx_ConfirmUserActionDialog_name {
-    font-size: 18px;
+    font-size: 1.2rem;
 }
 
 .mx_ConfirmUserActionDialog_userId {
-    font-size: 13px;
+    font-size: 0.867rem;
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
 
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: 2.400rem;
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 1px;
diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss
index 128eacc3ce..4159944e5d 100644
--- a/res/css/views/dialogs/_CreateGroupDialog.scss
+++ b/res/css/views/dialogs/_CreateGroupDialog.scss
@@ -25,7 +25,7 @@ limitations under the License.
 }
 
 .mx_CreateGroupDialog_input {
-    font-size: 15px;
+    font-size: 1rem;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
@@ -44,7 +44,7 @@ limitations under the License.
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
     padding: 0px 5px;
-    line-height: 37px;
+    line-height: 2.467rem;
     background-color: $input-darker-bg-color;
     border: 1px solid $input-border-color;
     text-align: center;
diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 7416ec2ef4..1cdbe99843 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -49,7 +49,7 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog_input {
-    font-size: 15px;
+    font-size: 1rem;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
index 500c46b5fd..399c7225f6 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -68,11 +68,11 @@ limitations under the License.
     width: 240px;
     color: $input-fg-color;
     font-family: $font-family;
-    font-size: 16px;
+    font-size: 1.067rem;
 }
 
 .mx_DevTools_textarea {
-    font-size: 12px;
+    font-size: 0.8rem;
     max-width: 684px;
     min-height: 250px;
     padding: 10px;
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 5e0893b8fd..22b1867002 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -40,8 +40,8 @@ limitations under the License.
         textarea,
         textarea:focus {
             height: 34px;
-            line-height: 34px;
-            font-size: 14px;
+            line-height: 2.267rem;
+            font-size: 0.933rem;
             padding-left: 12px;
             margin: 0 !important;
             border: 0 !important;
@@ -65,7 +65,7 @@ limitations under the License.
         min-width: 48px;
         margin-left: 10px;
         height: 25px;
-        line-height: 25px;
+        line-height: 1.667rem;
     }
 
     .mx_InviteDialog_buttonAndSpinner {
@@ -84,7 +84,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     h3 {
-        font-size: 12px;
+        font-size: 0.8rem;
         color: $muted-fg-color;
         font-weight: bold;
         text-transform: uppercase;
@@ -143,23 +143,23 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
-        font-size: 14px;
+        font-size: 0.933rem;
         color: $primary-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_userId {
-        font-size: 12px;
+        font-size: 0.8rem;
         color: $muted-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_time {
         text-align: right;
-        font-size: 12px;
+        font-size: 0.8rem;
         color: $muted-fg-color;
         float: right;
-        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+        line-height: 2.400rem; // Height of the avatar to keep the time vertically aligned
     }
 
     .mx_InviteDialog_roomTile_highlight {
@@ -176,7 +176,7 @@ limitations under the License.
         border-radius: 12px;
         display: inline-block;
         height: 24px;
-        line-height: 24px;
+        line-height: 1.600rem;
         padding-left: 8px;
         padding-right: 8px;
         color: #ffffff; // this is fine without a var because it's for both themes
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index 0066faccae..8d989f6a00 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -35,7 +35,7 @@ limitations under the License.
 
 .mx_MessageEditHistoryDialog_edits {
     list-style-type: none;
-    font-size: 14px;
+    font-size: 0.933rem;
     padding: 0;
     color: $primary-fg-color;
 
@@ -60,7 +60,7 @@ limitations under the License.
     }
 
     .mx_MessageActionBar .mx_AccessibleButton {
-        font-size: 10px;
+        font-size: 0.667rem;
         padding: 0 8px;
     }
 }
diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss
index 7e35fe941e..633b3a063b 100644
--- a/res/css/views/dialogs/_NewSessionReviewDialog.scss
+++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss
@@ -32,6 +32,6 @@ limitations under the License.
 }
 
 .mx_NewSessionReviewDialog_deviceID {
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $notice-secondary-color;
 }
diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss
index 9d09a208df..a5013f79b1 100644
--- a/res/css/views/dialogs/_SetEmailDialog.scss
+++ b/res/css/views/dialogs/_SetEmailDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $input-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: 1rem;
     width: 100%;
     max-width: 280px;
     margin-bottom: 10px;
diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss
index f7d8a3d001..8208a679fd 100644
--- a/res/css/views/dialogs/_SetMxIdDialog.scss
+++ b/res/css/views/dialogs/_SetMxIdDialog.scss
@@ -29,7 +29,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: 1rem;
     width: 100%;
     max-width: 280px;
 }
diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss
index 325ff6c6ed..cff11c8afb 100644
--- a/res/css/views/dialogs/_SetPasswordDialog.scss
+++ b/res/css/views/dialogs/_SetPasswordDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: 1rem;
     max-width: 280px;
     margin-bottom: 10px;
 }
diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss
index beb507e778..e9805d1b35 100644
--- a/res/css/views/dialogs/_TermsDialog.scss
+++ b/res/css/views/dialogs/_TermsDialog.scss
@@ -31,7 +31,7 @@ limitations under the License.
 }
 
 .mx_TermsDialog_termsTable {
-    font-size: 12px;
+    font-size: 0.8rem;
     width: 100%;
 }
 
diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss
index 2b0f8dceca..8bb0ed4ff4 100644
--- a/res/css/views/dialogs/_UnknownDeviceDialog.scss
+++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss
@@ -27,7 +27,7 @@ limitations under the License.
 // userid
 .mx_UnknownDeviceDialog p {
     font-weight: bold;
-    font-size: 16px;
+    font-size: 1.067rem;
 }
 
 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index 106392f880..2f0e3e6a17 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -47,9 +47,9 @@ limitations under the License.
 
     .mx_NetworkDropdown_server_title {
         padding: 0 10px;
-        font-size: 15px;
+        font-size: 1rem;
         font-weight: 600;
-        line-height: 20px;
+        line-height: 1.333rem;
         margin-bottom: 4px;
 
         // remove server button
@@ -77,16 +77,16 @@ limitations under the License.
 
     .mx_NetworkDropdown_server_subtitle {
         padding: 0 10px;
-        font-size: 10px;
-        line-height: 14px;
+        font-size: 0.667rem;
+        line-height: 0.933rem;
         margin-top: -4px;
         margin-bottom: 4px;
         color: $muted-fg-color;
     }
 
     .mx_NetworkDropdown_server_network {
-        font-size: 12px;
-        line-height: 16px;
+        font-size: 0.8rem;
+        line-height: 1.067rem;
         padding: 4px 10px;
         cursor: pointer;
         position: relative;
@@ -154,7 +154,7 @@ limitations under the License.
 
     .mx_NetworkDropdown_handle_server {
         color: $muted-fg-color;
-        font-size: 12px;
+        font-size: 0.8rem;
     }
 }
 
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index b87071745d..b7439d5856 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -27,7 +27,7 @@ limitations under the License.
     text-align: center;
     border-radius: 4px;
     display: inline-block;
-    font-size: 14px;
+    font-size: 0.933rem;
 }
 
 .mx_AccessibleButton_kind_primary {
diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss
index 0ecfb17c83..94028481d4 100644
--- a/res/css/views/elements/_AddressTile.scss
+++ b/res/css/views/elements/_AddressTile.scss
@@ -19,9 +19,9 @@ limitations under the License.
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
     border: solid 1px $input-border-color;
-    line-height: 26px;
+    line-height: 1.733rem;
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-weight: normal;
     margin-right: 4px;
 }
diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
index 75ef3fbabd..35fb80f5df 100644
--- a/res/css/views/elements/_DirectorySearchBox.scss
+++ b/res/css/views/elements/_DirectorySearchBox.scss
@@ -32,7 +32,7 @@ limitations under the License.
     background-repeat: no-repeat;
     text-indent: 18px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 0.8rem;
     user-select: none;
     cursor: pointer;
 }
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 102ac56bf9..64bcf7a33a 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -29,7 +29,7 @@ limitations under the License.
     position: relative;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
-    font-size: 12px;
+    font-size: 0.8rem;
     user-select: none;
 }
 
@@ -53,7 +53,7 @@ limitations under the License.
 
 .mx_Dropdown_option {
     height: 35px;
-    line-height: 35px;
+    line-height: 2.333rem;
     padding-left: 8px;
     padding-right: 8px;
 }
diff --git a/res/css/views/elements/_EventListSummary.scss b/res/css/views/elements/_EventListSummary.scss
index 99a5c06a5f..a40c1384d7 100644
--- a/res/css/views/elements/_EventListSummary.scss
+++ b/res/css/views/elements/_EventListSummary.scss
@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_TextualEvent.mx_EventListSummary_summary {
-    font-size: 14px;
+    font-size: 0.933rem;
     display: inline-flex;
 }
 
@@ -27,7 +27,7 @@ limitations under the License.
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
-    line-height: 12px;
+    line-height: 0.8rem;
 }
 
 .mx_EventListSummary_avatars .mx_BaseAvatar {
@@ -46,19 +46,19 @@ limitations under the License.
 .mx_EventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
-    line-height: 30px;
+    line-height: 2.000rem;
 }
 
 .mx_MatrixChat_useCompactLayout {
     .mx_EventListSummary {
-        font-size: 13px;
+        font-size: 0.867rem;
         .mx_EventTile_line {
-            line-height: 20px;
+            line-height: 1.333rem;
         }
     }
 
     .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: 1.467rem;
     }
 
     .mx_EventListSummary_toggle {
@@ -66,6 +66,6 @@ limitations under the License.
     }
 
     .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: 0.867rem;
     }
 }
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index b260d4b097..26d24dba3a 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -40,7 +40,7 @@ limitations under the License.
 .mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     border: none;
     // Even without a border here, we still need this avoid overlapping the rounded
     // corners on the field above.
@@ -102,7 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     color: $primary-fg-color;
     background-color: transparent;
-    font-size: 14px;
+    font-size: 0.933rem;
     position: absolute;
     left: 0px;
     top: 0px;
@@ -126,7 +126,7 @@ limitations under the License.
         color 0.25s ease-out 0s,
         top 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
-    font-size: 10px;
+    font-size: 0.667rem;
     top: -13px;
     padding: 0 2px;
     background-color: $field-focused-label-bg-color;
diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss
index 1483fe2091..c23ab6ee30 100644
--- a/res/css/views/elements/_FormButton.scss
+++ b/res/css/views/elements/_FormButton.scss
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 .mx_FormButton {
-    line-height: 16px;
+    line-height: 1.067rem;
     padding: 5px 15px;
-    font-size: 12px;
+    font-size: 0.8rem;
     height: min-content;
 
     &:not(:last-child) {
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 67b0d6d7df..cc7fca67d3 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -102,13 +102,13 @@ limitations under the License.
 }
 
 .mx_ImageView_name {
-    font-size: 18px;
+    font-size: 1.2rem;
     margin-bottom: 6px;
     word-wrap: break-word;
 }
 
 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: 1rem;
     opacity: 0.5;
 }
 
@@ -118,13 +118,13 @@ limitations under the License.
     margin-bottom: 6px;
     border-radius: 5px;
     background-color: $lightbox-bg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
     padding: 9px;
     border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: 0.733rem;
 }
 
 .mx_ImageView_link {
@@ -133,7 +133,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: 1rem;
     opacity: 0.5;
     margin-top: 18px;
     cursor: pointer;
diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index 17a76436e8..07441ef85d 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -24,7 +24,7 @@ limitations under the License.
     background-color: $interactive-tooltip-bg-color;
     color: $interactive-tooltip-fg-color;
     position: absolute;
-    font-size: 10px;
+    font-size: 0.667rem;
     font-weight: 600;
     padding: 6px;
     z-index: 5001;
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index 5066ee10f3..d821f52e3d 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -9,7 +9,7 @@
     border-radius: 16px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: 1.333rem;
     padding-left: 5px;
 }
 
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index cc4eb409df..61762ced92 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -58,8 +58,8 @@ limitations under the License.
     z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
     padding: 10px;
     pointer-events: none;
-    line-height: 14px;
-    font-size: 12px;
+    line-height: 0.933rem;
+    font-size: 0.8rem;
     font-weight: 600;
     color: $primary-fg-color;
     max-width: 200px;
@@ -82,7 +82,7 @@ limitations under the License.
     text-align: center;
     border: none;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: 0.933rem;
     line-height: 1.2;
     padding: 6px 8px;
 
diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.scss
index 6ea36c800e..c350fc22e2 100644
--- a/res/css/views/elements/_TooltipButton.scss
+++ b/res/css/views/elements/_TooltipButton.scss
@@ -28,7 +28,7 @@ limitations under the License.
     transition: opacity 0.2s ease-in;
     opacity: 0.6;
 
-    line-height: 11px;
+    line-height: 0.733rem;
     text-align: center;
 
     cursor: pointer;
@@ -47,6 +47,6 @@ limitations under the License.
 .mx_TooltipButton_helpText {
     width: 400px;
     text-align: start;
-    line-height: 17px !important;
+    line-height: 1.133rem !important;
 }
 
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 5d9b3f2687..64b27b9ab3 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -163,7 +163,7 @@ limitations under the License.
 
 .mx_EmojiPicker_item {
     display: inline-block;
-    font-size: 20px;
+    font-size: 1.333rem;
     padding: 5px;
     width: 100%;
     height: 100%;
@@ -183,7 +183,7 @@ limitations under the License.
 }
 
 .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
-    font-size: 16px;
+    font-size: 1.067rem;
     font-weight: 600;
     margin: 0;
 }
@@ -197,7 +197,7 @@ limitations under the License.
 }
 
 .mx_EmojiPicker_preview_emoji {
-    font-size: 32px;
+    font-size: 2.133rem;
     padding: 8px 16px;
 }
 
@@ -212,7 +212,7 @@ limitations under the License.
 
 .mx_EmojiPicker_shortcode {
     color: $light-fg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
 
     &::before, &::after {
         content: ":";
diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss
index 935ee1aba3..b02e72814f 100644
--- a/res/css/views/messages/_DateSeparator.scss
+++ b/res/css/views/messages/_DateSeparator.scss
@@ -19,7 +19,7 @@ limitations under the License.
     margin: 4px 0;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $roomtopic-color;
 }
 
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index c032051c36..66ba0b227d 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -21,7 +21,7 @@ limitations under the License.
     cursor: pointer;
     display: flex;
     height: 24px;
-    line-height: 24px;
+    line-height: 1.600rem;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
     top: -18px;
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss
index e5c228aa68..3a2a8d6336 100644
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@@ -16,5 +16,5 @@ limitations under the License.
 
 .mx_MessageTimestamp {
     color: $event-timestamp-color;
-    font-size: 10px;
+    font-size: 0.667rem;
 }
diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index 57c02ed3e5..ee816e0fc0 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .mx_ReactionsRow_showAll {
     text-decoration: none;
-    font-size: 10px;
+    font-size: 0.667rem;
     font-weight: 600;
     margin-left: 6px;
     vertical-align: top;
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index e54201d963..7160c223be 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_ReactionsRowButton {
     display: inline-flex;
     height: 20px;
-    line-height: 21px;
+    line-height: 1.400rem;
     margin-right: 6px;
     padding: 0 6px;
     border: 1px solid $reaction-row-button-border-color;
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index a15924e759..088b66445d 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EventTile_content.mx_ViewSourceEvent {
     display: flex;
     opacity: 0.6;
-    font-size: 12px;
+    font-size: 0.8rem;
 
     pre, code {
         flex: 1;
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 98e1e97e39..c9499b763f 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -45,7 +45,7 @@ limitations under the License.
 
     .mx_cryptoEvent_title {
         font-weight: 600;
-        font-size: 15px;
+        font-size: 1rem;
         grid-column: 2;
         grid-row: 1;
     }
@@ -56,7 +56,7 @@ limitations under the License.
     }
 
     .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
-        font-size: 12px;
+        font-size: 0.8rem;
     }
 
     .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 0e4b1bda9e..acc5e4641f 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -20,7 +20,7 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-    font-size: 12px;
+    font-size: 0.8rem;
 
     .mx_UserInfo_cancel {
         cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     h2 {
-        font-size: 18px;
+        font-size: 1.2rem;
         font-weight: 600;
         margin: 18px 0 0 0;
     }
@@ -109,7 +109,7 @@ limitations under the License.
         justify-content: center;
 
         // override the calculated sizes so that the letter isn't HUGE
-        font-size: 56px !important;
+        font-size: 3.733rem !important;
         width: 100% !important;
         transition: font-size 0.5s;
     }
@@ -122,7 +122,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $notice-secondary-color;
         font-weight: bold;
-        font-size: 12px;
+        font-size: 0.8rem;
         margin: 4px 0;
     }
 
@@ -134,8 +134,8 @@ limitations under the License.
         text-align: center;
 
         h2 {
-            font-size: 18px;
-            line-height: 25px;
+            font-size: 1.2rem;
+            line-height: 1.667rem;
             flex: 1;
             justify-content: center;
             align-items: center;
@@ -197,7 +197,7 @@ limitations under the License.
     .mx_UserInfo_field {
         cursor: pointer;
         color: $accent-color;
-        line-height: 16px;
+        line-height: 1.067rem;
         margin: 8px 0;
 
         &.mx_UserInfo_destructive {
@@ -206,7 +206,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_statusMessage {
-        font-size: 11px;
+        font-size: 0.733rem;
         opacity: 0.5;
         overflow: hidden;
         white-space: nowrap;
@@ -282,6 +282,6 @@ limitations under the License.
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar_initial {
-        font-size: 40px !important; // override the other override because here the avatar is smaller
+        font-size: 2.667rem !important; // override the other override because here the avatar is smaller
     }
 }
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 459622b277..4a10dcbbcd 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -95,7 +95,7 @@ limitations under the License.
             }
 
             .mx_VerificationPanel_QRPhase_helpText {
-                font-size: 14px;
+                font-size: 0.933rem;
                 margin-top: 71px;
                 text-align: center;
             }
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index a3fe573ad0..171cf49ba5 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -46,7 +46,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 0;
     margin: 5px auto 5px auto;
     color: $accent-color;
-    font-size: 12px;
+    font-size: 0.8rem;
 }
 
 .mx_AddWidget_button_full_width {
@@ -59,7 +59,7 @@ $AppsDrawerBodyHeight: 273px;
     padding: 9px;
     color: $primary-hairline-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: 1rem;
 }
 
 .mx_AppTile {
@@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppTileMenuBar {
     margin: 0;
-    font-size: 12px;
+    font-size: 0.8rem;
     background-color: $widget-menu-bar-bg-color;
     display: flex;
     flex-direction: row;
@@ -272,7 +272,7 @@ form.mx_Custom_Widget_Form div {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: 1.067rem;
 }
 
 .mx_AppPermissionWarning_row {
@@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarning_smallText {
-    font-size: 12px;
+    font-size: 0.8rem;
 }
 
 .mx_AppPermissionWarning_bolder {
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index ce519b1ea7..c1f9663ea3 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -63,8 +63,8 @@ limitations under the License.
                 border-radius: 8px;
                 text-align: center;
                 font-weight: normal;
-                line-height: 16px;
-                font-size: 10.4px;
+                line-height: 1.067rem;
+                font-size: 0.667rem;
             }
         }
     }
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index a2867de3a7..d66e4efe5c 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
 .mx_GroupRoomTile_name {
     flex: 1 1 0;
     overflow: hidden;
-    font-size: 14px;
+    font-size: 0.933rem;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -116,7 +116,7 @@ limitations under the License.
 }
 
 .mx_EntityTile_subtext {
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_EntityTile_power {
     padding-inline-start: 6px;
-    font-size: 10px;
+    font-size: 0.667rem;
     color: $notice-secondary-color;
     max-width: 6em;
     overflow: hidden;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2fa9994155..436b158644 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 100%;
     clear: both;
     padding-top: 18px;
-    font-size: 14px;
+    font-size: 0.933rem;
     position: relative;
 }
 
@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
@@ -72,7 +72,7 @@ limitations under the License.
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: 17px;
+    line-height: 1.133rem;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -117,7 +117,7 @@ limitations under the License.
     padding-bottom: 2px;
     border-radius: 4px;
     min-height: 24px;
-    line-height: 22px;
+    line-height: 1.467rem;
 }
 
 .mx_RoomView_timeline_rr_enabled {
@@ -152,8 +152,8 @@ limitations under the License.
 
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px !important;
-    line-height: 57px !important;
+    font-size: 3.200rem !important;
+    line-height: 3.800rem !important;
 }
 
 .mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
@@ -312,7 +312,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_readAvatarRemainder {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: 0.733rem;
     position: absolute;
 }
 
@@ -341,7 +341,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_spoiler_reason {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: 0.733rem;
 }
 
 .mx_EventTile_spoiler_content {
@@ -393,7 +393,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_keyRequestInfo {
-    font-size: 12px;
+    font-size: 0.8rem;
 }
 
 .mx_EventTile_keyRequestInfo_text {
@@ -471,7 +471,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_content .mx_EventTile_edited {
     user-select: none;
-    font-size: 12px;
+    font-size: 0.8rem;
     color: $roomtopic-color;
     display: inline-block;
     margin-left: 9px;
@@ -489,7 +489,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     white-space: normal !important;
     line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
-    font-size: 14px;
+    font-size: 0.933rem;
 
     pre, code {
         font-family: $monospace-font-family !important;
@@ -589,9 +589,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     .mx_EventTile.mx_EventTile_info {
         // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
         padding-top: 0px;
-        font-size: 13px;
+        font-size: 0.867rem;
         .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: 20px;
+            line-height: 1.333rem;
         }
         .mx_EventTile_avatar {
             top: 4px;
@@ -599,7 +599,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     }
 
     .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: 0.867rem;
     }
 
     .mx_EventTile.mx_EventTile_emote {
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 7f458092fb..2c44eed1b8 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -34,8 +34,8 @@ limitations under the License.
     top: -12px;
     border-radius: 16px;
     font-weight: bold;
-    font-size: 12px;
-    line-height: 14px;
+    font-size: 0.8rem;
+    line-height: 0.933rem;
     text-align: center;
     // to be able to get it centered
     // with text-align in parent
diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index 15b4832dc5..fe5a4b7659 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -59,7 +59,7 @@ limitations under the License.
 
 .mx_MemberDeviceInfo_deviceId {
     word-break: break-word;
-    font-size: 13px;
+    font-size: 0.867rem;
 }
 
 .mx_MemberDeviceInfo_deviceInfo {
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index e3f746e9d3..d4c8fbb097 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -48,7 +48,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo h2 {
-    font-size: 18px;
+    font-size: 1.2rem;
     font-weight: 600;
     margin: 16px 0 16px 15px;
 }
@@ -94,12 +94,12 @@ limitations under the License.
     text-transform: uppercase;
     color: $input-darker-fg-color;
     font-weight: bold;
-    font-size: 12px;
+    font-size: 0.8rem;
     margin: 4px 0;
 }
 
 .mx_MemberInfo_profileField {
-    font-size: 15px;
+    font-size: 1rem;
     position: relative;
 }
 
@@ -109,10 +109,10 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    font-size: 15px;
+    font-size: 1rem;
     color: $primary-fg-color;
     margin-left: 8px;
-    line-height: 23px;
+    line-height: 1.533rem;
 }
 
 .mx_MemberInfo_createRoom {
@@ -128,7 +128,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo label {
-    font-size: 13px;
+    font-size: 0.867rem;
 }
 
 .mx_MemberInfo label .mx_MemberInfo_label_text {
@@ -144,7 +144,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_statusMessage {
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 6e4465583c..0f676645a9 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -30,7 +30,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $h3-color;
         font-weight: 600;
-        font-size: 13px;
+        font-size: 0.867rem;
         padding-left: 3px;
         padding-right: 12px;
         margin-top: 8px;
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index a05b4c0c0e..3777acf423 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -105,7 +105,7 @@ limitations under the License.
     min-height: 60px;
     justify-content: flex-start;
     align-items: flex-start;
-    font-size: 14px;
+    font-size: 0.933rem;
     margin-right: 6px;
 }
 
@@ -161,7 +161,7 @@ limitations under the License.
     box-shadow: none;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
     max-height: 120px;
     overflow: auto;
     /* needed for FF */
@@ -242,7 +242,7 @@ limitations under the License.
 
     flex-direction: row;
     align-items: center;
-    font-size: 10px;
+    font-size: 0.667rem;
     color: $greyed-fg-color;
 }
 
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index 1b5a21bed0..0558cd48cf 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -97,13 +97,13 @@ limitations under the License.
 
 .mx_MessageComposerFormatBar_buttonTooltip {
     white-space: nowrap;
-    font-size: 13px;
+    font-size: 0.867rem;
     font-weight: 600;
     min-width: 54px;
     text-align: center;
 
     .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: 9px;
+        font-size: 0.600rem;
         opacity: 0.7;
     }
 }
diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss
index 26ed1aa6a3..6d044a69b5 100644
--- a/res/css/views/rooms/_PresenceLabel.scss
+++ b/res/css/views/rooms/_PresenceLabel.scss
@@ -15,6 +15,6 @@ limitations under the License.
 */
 
 .mx_PresenceLabel {
-    font-size: 11px;
+    font-size: 0.733rem;
     opacity: 0.5;
 }
diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss
index 1076a0563a..1ae8f73e88 100644
--- a/res/css/views/rooms/_RoomDropTarget.scss
+++ b/res/css/views/rooms/_RoomDropTarget.scss
@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget {
-    font-size: 13px;
+    font-size: 0.867rem;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_RoomDropTarget_label {
     position: relative;
     margin-top: 3px;
-    line-height: 21px;
+    line-height: 1.400rem;
     z-index: 1;
     text-align: center;
 }
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 47b8131ef0..1737014248 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -77,9 +77,9 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 52px;
+    line-height: 3.467rem;
     color: $roomheader-color;
-    font-size: 18px;
+    font-size: 1.2rem;
     font-weight: 600;
     overflow: hidden;
     margin-left: 63px;
@@ -102,7 +102,7 @@ limitations under the License.
     overflow: hidden;
     color: $roomheader-color;
     font-weight: 600;
-    font-size: 18px;
+    font-size: 1.2rem;
     margin: 0 7px;
     border-bottom: 1px solid transparent;
     display: flex;
@@ -161,7 +161,7 @@ limitations under the License.
     flex: 1;
     color: $roomtopic-color;
     font-weight: 400;
-    font-size: 13px;
+    font-size: 0.867rem;
     margin: 0 7px;
     margin-top: 4px; // to align baseline of topic with room name
     overflow: hidden;
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 5ed22f997d..b9cb2dc8e4 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -47,13 +47,13 @@ limitations under the License.
 }
 
 .mx_RoomList_emptySubListTip {
-    font-size: 13px;
+    font-size: 0.867rem;
     padding: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
-    line-height: 16px;
+    line-height: 1.067rem;
 }
 
 .mx_RoomList_emptySubListTip .mx_RoleButton {
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 981cf06c69..8e61524fda 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -23,7 +23,7 @@ limitations under the License.
     -webkit-align-items: center;
 
     h3 {
-        font-size: 18px;
+        font-size: 1.2rem;
         font-weight: 600;
 
         &.mx_RoomPreviewBar_spinnerTitle {
@@ -48,8 +48,8 @@ limitations under the License.
     }
 
     .mx_RoomPreviewBar_footer {
-        font-size: 12px;
-        line-height: 20px;
+        font-size: 0.8rem;
+        line-height: 1.333rem;
 
         .mx_Spinner {
             vertical-align: middle;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 31d887cbbb..57d42f6be2 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_RoomTile_subtext {
     display: inline-block;
-    font-size: 11px;
+    font-size: 0.733rem;
     padding: 0 0 0 7px;
     margin: 0;
     overflow: hidden;
@@ -112,7 +112,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_name {
-    font-size: 14px;
+    font-size: 0.933rem;
     padding: 0 4px;
     color: $roomtile-name-color;
     white-space: nowrap;
@@ -126,7 +126,7 @@ limitations under the License.
     padding: 0 0.4em;
     color: $roomtile-badge-fg-color;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 0.8rem;
 }
 
 .collapsed {
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index b6748e5ad2..5b80585cef 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -22,7 +22,7 @@ limitations under the License.
 
     .mx_SearchBar_input {
         // border: 1px solid $input-border-color;
-        // font-size: 15px;
+        // font-size: 1rem;
         flex: 1 1 0;
         margin-left: 22px;
     }
@@ -45,7 +45,7 @@ limitations under the License.
         border: 0;
         margin: 0 0 0 22px;
         padding: 5px;
-        font-size: 15px;
+        font-size: 1rem;
         cursor: pointer;
         color: $primary-fg-color;
         border-bottom: 2px solid $accent-color;
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index d20f7107b3..7233d373a3 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    font-size: 14px;
+    font-size: 0.933rem;
     justify-content: center;
     margin-right: 6px;
     // don't grow wider than available space
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 579ea7e73e..a1e6f3a3bf 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -49,7 +49,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: 1.600rem;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -57,7 +57,7 @@ limitations under the License.
 
 .mx_WhoIsTypingTile_label {
     flex: 1;
-    font-size: 14px;
+    font-size: 0.933rem;
     font-weight: 600;
     color: $eventtile-meta-color;
 }
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 01a1d94956..03bd3221cd 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_SettingsTab_heading {
-    font-size: 20px;
+    font-size: 1.333rem;
     font-weight: 600;
     color: $primary-fg-color;
 }
@@ -29,7 +29,7 @@ limitations under the License.
 }
 
 .mx_SettingsTab_subheading {
-    font-size: 16px;
+    font-size: 1.067rem;
     display: block;
     font-family: $font-family;
     font-weight: 600;
@@ -40,7 +40,7 @@ limitations under the License.
 
 .mx_SettingsTab_subsectionText {
     color: $settings-subsection-fg-color;
-    font-size: 14px;
+    font-size: 0.933rem;
     display: block;
     margin: 10px 100px 10px 0; // Align with the rest of the view
 }
@@ -61,7 +61,7 @@ limitations under the License.
 .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
     vertical-align: middle;
     display: inline-block;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $primary-fg-color;
     max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
     box-sizing: border-box;
diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss
index e00dcf31d1..1f9ea7a33d 100644
--- a/res/css/views/terms/_InlineTermsAgreement.scss
+++ b/res/css/views/terms/_InlineTermsAgreement.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_InlineTermsAgreement_cbContainer {
     margin-bottom: 10px;
-    font-size: 14px;
+    font-size: 0.933rem;
 
     a {
         color: $accent-color;
diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 5038d40b73..fd83bf7ad4 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -48,14 +48,14 @@ limitations under the License.
 }
 
 .mx_VerificationShowSas_emojiSas_emoji {
-    font-size: 32px;
+    font-size: 2.133rem;
 }
 
 .mx_VerificationShowSas_emojiSas_label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: 12px;
+    font-size: 0.8rem;
 }
 
 .mx_VerificationShowSas_emojiSas_break {
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index b01fbf8c66..06c9f7bed6 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -21,5 +21,5 @@ limitations under the License.
     text-align: center;
     padding: 6px;
     font-weight: bold;
-    font-size: 13px;
+    font-size: 0.867rem;
 }
diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss
index 64eac25d01..3c8ed46639 100644
--- a/res/css/views/voip/_IncomingCallbox.scss
+++ b/res/css/views/voip/_IncomingCallbox.scss
@@ -54,7 +54,7 @@ limitations under the License.
     vertical-align: middle;
     width: 80px;
     height: 36px;
-    line-height: 36px;
+    line-height: 2.400rem;
     border-radius: 36px;
     color: $accent-fg-color;
     margin: auto;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bfa2272283..1f11fd5620 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -185,7 +185,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     border: 0px;
     border-radius: 4px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $button-fg-color;
     background-color: $button-bg-color;
     width: auto;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 9bdd712e07..2a993a7934 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     border: 0px;
     border-radius: 4px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: 0.933rem;
     color: $button-fg-color;
     background-color: $button-bg-color;
     width: auto;
@@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 @define-mixin mx_DialogButton_small {
     @mixin mx_DialogButton;
-    font-size: 15px;
+    font-size: 1rem;
     padding: 0px 1.5em 0px 1.5em;
 }