Merge pull request #4305 from JorikSchellekens/joriks/font-scaling

Make all 'font-size's and 'line-height's rem
2024-11-15 20:54:59 +08:00 · 2020-04-02 17:40:39 +01:00 · 2020-04-02 17:40:39 +01:00 · 3ed457ea7d
commit 3ed457ea7d
parent 9944ce71b6 202ad9f98a
97 changed files with 295 additions and 221 deletions
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+@import "./_font-sizes.scss";
+
+: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 +31,7 @@ html {

 body {
    font-family: $font-family;
-    font-size: 15px;
+    font-size: $font-15px;
    background-color: $primary-bg-color;
    color: $primary-fg-color;
    border: 0px;
@ -60,7 +66,7 @@ b {
 h2 {
    color: $primary-fg-color;
    font-weight: 400;
-    font-size: 18px;
+    font-size: $font-18px;
    margin-top: 16px;
    margin-bottom: 16px;
 }
@ -76,7 +82,7 @@ input[type=search],
 input[type=password] {
    padding: 9px;
    font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: 600;
    min-width: 0;
 }
@ -253,7 +259,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: $font-15px;
    position: relative;
    padding: 25px 30px 30px 30px;
    max-height: 80%;
@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }

 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: $font-22px;
+    line-height: $font-36px;
    color: $dialog-title-fg-color;
 }

@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {

 .mx_Dialog_content {
    margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $primary-fg-color;
    word-wrap: break-word;
 }
@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }

 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
    border-radius: 3px;
    border: 1px solid $input-border-color;
    padding: 9px;
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -1,5 +1,6 @@
 // autogenerated by rethemendex.sh
@import "./_common.scss";
+@import "./_font-sizes.scss";
@import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
--- a/res/css/_font-sizes.scss
+++ b/res/css/_font-sizes.scss
@ -0,0 +1,63 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$font-8px: 0.533rem;
+$font-9px: 0.600rem;
+$font-10px: 0.667rem;
+$font-10-4px: 0.693rem;
+$font-11px: 0.733rem;
+$font-12px: 0.800rem;
+$font-13px: 0.867rem;
+$font-14px: 0.933rem;
+$font-15px: 1.000rem;
+$font-16px: 1.067rem;
+$font-17px: 1.133rem;
+$font-18px: 1.200rem;
+$font-19px: 1.267rem;
+$font-20px: 1.333rem;
+$font-21px: 1.400rem;
+$font-22px: 1.467rem;
+$font-23px: 1.533rem;
+$font-24px: 1.600rem;
+$font-25px: 1.667rem;
+$font-26px: 1.733rem;
+$font-27px: 1.800rem;
+$font-28px: 1.867rem;
+$font-29px: 1.933rem;
+$font-30px: 2.000rem;
+$font-31px: 2.067rem;
+$font-32px: 2.133rem;
+$font-33px: 2.200rem;
+$font-34px: 2.267rem;
+$font-35px: 2.333rem;
+$font-36px: 2.400rem;
+$font-37px: 2.467rem;
+$font-38px: 2.533rem;
+$font-39px: 2.600rem;
+$font-40px: 2.667rem;
+$font-41px: 2.733rem;
+$font-42px: 2.800rem;
+$font-43px: 2.867rem;
+$font-44px: 2.933rem;
+$font-45px: 3.000rem;
+$font-46px: 3.067rem;
+$font-47px: 3.133rem;
+$font-48px: 3.200rem;
+$font-49px: 3.267rem;
+$font-50px: 3.333rem;
+$font-51px: 3.400rem;
+$font-52px: 3.467rem;
+$font-400px: 26.667rem;
--- 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: $font-14px;
    z-index: 5001;
 }

--- 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: $font-13px;
    padding: 9px;
    margin-top: 6px;
 }
--- 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: $font-14px;
    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: $font-11px;
    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: $font-11px;
    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: $font-11px;
    opacity: 1.0;
    color: $event-timestamp-color;
 }
--- 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: $font-22px;
    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: $font-13px;
    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: $font-13px;
    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: $font-24px;
    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: $font-34px;
 }

 .mx_GroupView_membershipSection_description .mx_BaseAvatar {
--- 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: $font-14px;
        margin: 4px 0 1px 9px;
        padding: 9px;
        padding-left: 42px;
--- 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: $font-400px;
    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: $font-15px;
 }

 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: $font-13px;
    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: $font-13px;
    max-height: 36px;
    overflow: hidden;
 }
--- 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: $font-14px;
 }

 .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: $font-12px;
    display: inline;
    padding-left: 0px;
 }
--- 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: $font-8px;
    border-radius: 8px;
    color: $accent-fg-color;
    background-color: $accent-color;
--- 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: $font-12px;
    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: $font-18px;
    font-weight: 600;
 }

@ -124,7 +124,7 @@ limitations under the License.
    border-radius: 10px;
    display: inline-block;
    height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
    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: $font-12px;
    color: $settings-grey-fg-color;
 }

@ -150,7 +150,7 @@ limitations under the License.
 }

 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: $font-15px;
    margin-top: 0;

    .mx_AccessibleButton {
--- 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: $font-50px;
 }

 .mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
    border-radius: 40px;
    width: 24px;
    height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
    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: $font-13px;
    opacity: 0.5;
    padding-bottom: 20px;
 }
@ -145,7 +145,7 @@ limitations under the License.

 .mx_RoomStatusBar_typingBar {
    height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;

    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: $font-50px;

    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: $font-40px;
    }

    .mx_RoomStatusBar_typingBar {
        height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
    }
 }
--- 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: $font-12px;
    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: $font-12px;
    padding: 0 5px;
    color: $roomtile-badge-fg-color;
    background-color: $roomtile-name-color;
--- 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: $font-18px;
    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: $font-13px;
    padding-left: 3em;
    padding-right: 3em;
    margin-right: 20px;
--- 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: $font-14px;
    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
    margin-bottom: 6px;
    position: relative;
--- 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: #000;
    font-weight: 600;
-    font-size: 10px;
+    font-size: $font-10px;
    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: $font-14px;
    padding: 0 5px;
    background-color: $roomtile-name-color;
 }
--- 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: $font-15px;
            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: $font-12px;
        }

        .mx_Toast_deviceID {
-            font-size: 10px;
+            font-size: $font-10px;
        }
    }
 }
--- 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: $font-18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
--- 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: $font-12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
    white-space: pre-wrap;
--- 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: $font-15px;
 }

 .mx_CompleteSecurity_waiting {
--- 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: $font-12px;
    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: $font-24px;
        font-weight: 600;
        margin-top: 8px;
        color: $authpage-primary-color;
    }

    h3 {
-        font-size: 14px;
+        font-size: $font-14px;
        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: $font-12px;
    font-weight: normal;
 }

--- 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: $font-15px;
    padding: 0 11px;
    word-break: break-word;
 }
--- 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: $font-14px;
    opacity: 0.72;
    padding: 20px 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
--- 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: $font-24px;
        font-weight: 600;
        margin-top: 0;
    }

    h3 {
-        font-size: 14px;
+        font-size: $font-14px;
        font-weight: 600;
    }

--- 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: $font-14px;
    font-weight: 600;
    color: $authpage-lang-color;
 }
--- 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: $font-10px;
 }
--- 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: $font-16px;
 }

 .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
--- 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: $font-12px;
    padding: 6px 1em;
    border: 1px solid transparent;
    margin-right: 10px;
--- 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: $font-16px;
 }

 .mx_TagTileContextMenu_item object {
--- 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: $font-12px;
        opacity: 0.5;
    }

    .mx_TopLeftMenu_upgradeLink {
-        font-size: 12px;
+        font-size: $font-12px;

        img {
            margin-left: 5px;
--- 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: $font-14px;
    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: $font-36px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
--- 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: $font-18px;
 }

 .mx_ConfirmUserActionDialog_userId {
-    font-size: 13px;
+    font-size: $font-13px;
 }

 .mx_ConfirmUserActionDialog_reasonField {
    font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;

    border-radius: 3px;
    border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 1px;
--- 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: $font-15px;
    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: $font-37px;
    background-color: $input-darker-bg-color;
    border: 1px solid $input-border-color;
    text-align: center;
--- 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: $font-15px;
    border-radius: 3px;
    border: 1px solid $input-border-color;
    padding: 9px;
--- 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: $font-16px;
 }

 .mx_DevTools_textarea {
-    font-size: 12px;
+    font-size: $font-12px;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
--- 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: $font-34px;
+            font-size: $font-14px;
            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: $font-25px;
    }

    .mx_InviteDialog_buttonAndSpinner {
@ -84,7 +84,7 @@ limitations under the License.
    padding-bottom: 10px;

    h3 {
-        font-size: 12px;
+        font-size: $font-12px;
        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: $font-14px;
        color: $primary-fg-color;
        margin-left: 7px;
    }

    .mx_InviteDialog_roomTile_userId {
-        font-size: 12px;
+        font-size: $font-12px;
        color: $muted-fg-color;
        margin-left: 7px;
    }

    .mx_InviteDialog_roomTile_time {
        text-align: right;
-        font-size: 12px;
+        font-size: $font-12px;
        color: $muted-fg-color;
        float: right;
-        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+        line-height: $font-36px; // 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: $font-24px;
        padding-left: 8px;
        padding-right: 8px;
        color: #ffffff; // this is fine without a var because it's for both themes
--- 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: $font-14px;
    padding: 0;
    color: $primary-fg-color;

@ -60,7 +60,7 @@ limitations under the License.
    }

    .mx_MessageActionBar .mx_AccessibleButton {
-        font-size: 10px;
+        font-size: $font-10px;
        padding: 0 8px;
    }
 }
--- 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: $font-12px;
    color: $notice-secondary-color;
 }
--- 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: $font-15px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
--- 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: $font-15px;
    width: 100%;
    max-width: 280px;
 }
--- 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: $font-15px;
    max-width: 280px;
    margin-bottom: 10px;
 }
--- 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: $font-12px;
    width: 100%;
 }

--- 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: $font-16px;
 }

 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
--- 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: $font-15px;
        font-weight: 600;
-        line-height: 20px;
+        line-height: $font-20px;
        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: $font-10px;
+        line-height: $font-14px;
        margin-top: -4px;
        margin-bottom: 4px;
        color: $muted-fg-color;
    }

    .mx_NetworkDropdown_server_network {
-        font-size: 12px;
-        line-height: 16px;
+        font-size: $font-12px;
+        line-height: $font-16px;
        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: $font-12px;
    }
 }

--- 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: $font-14px;
 }

 .mx_AccessibleButton_kind_primary {
--- 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: $font-26px;
    color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    font-weight: normal;
    margin-right: 4px;
 }
--- 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: $font-12px;
    user-select: none;
    cursor: pointer;
 }
--- 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: $font-12px;
    user-select: none;
 }

@ -53,7 +53,7 @@ limitations under the License.

 .mx_Dropdown_option {
    height: 35px;
-    line-height: 35px;
+    line-height: $font-35px;
    padding-left: 8px;
    padding-right: 8px;
 }
--- 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: $font-14px;
    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: $font-12px;
 }

 .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: $font-30px;
 }

 .mx_MatrixChat_useCompactLayout {
    .mx_EventListSummary {
-        font-size: 13px;
+        font-size: $font-13px;
        .mx_EventTile_line {
-            line-height: 20px;
+            line-height: $font-20px;
        }
    }

    .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: $font-22px;
    }

    .mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
    }

    .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: $font-13px;
    }
 }
--- 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: $font-14px;
    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: $font-14px;
    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: $font-10px;
    top: -13px;
    padding: 0 2px;
    background-color: $field-focused-label-bg-color;
--- 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: $font-16px;
    padding: 5px 15px;
-    font-size: 12px;
+    font-size: $font-12px;
    height: min-content;

    &:not(:last-child) {
--- 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: $font-18px;
    margin-bottom: 6px;
    word-wrap: break-word;
 }

 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: $font-15px;
    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: $font-14px;
    padding: 9px;
    border: 1px solid $lightbox-border-color;
 }

 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: $font-11px;
 }

 .mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
 }

 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: $font-15px;
    opacity: 0.5;
    margin-top: 18px;
    cursor: pointer;
--- 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: $font-10px;
    font-weight: 600;
    padding: 6px;
    z-index: 5001;
--- 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: $font-20px;
    padding-left: 5px;
 }

--- 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: $font-14px;
+    font-size: $font-12px;
    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: $font-14px;
    line-height: 1.2;
    padding: 6px 8px;

--- 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: $font-11px;
    text-align: center;

    cursor: pointer;
--- 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: $font-20px;
    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: $font-16px;
    font-weight: 600;
    margin: 0;
 }
@ -197,7 +197,7 @@ limitations under the License.
 }

 .mx_EmojiPicker_preview_emoji {
-    font-size: 32px;
+    font-size: $font-32px;
    padding: 8px 16px;
 }

@ -212,7 +212,7 @@ limitations under the License.

 .mx_EmojiPicker_shortcode {
    color: $light-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;

    &::before, &::after {
        content: ":";
--- 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: $font-14px;
    color: $roomtopic-color;
 }

--- 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: $font-24px;
    border-radius: 4px;
    background: $message-action-bar-bg-color;
    top: -18px;
--- 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: $font-10px;
 }
--- 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: $font-10px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: top;
--- 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: $font-21px;
    margin-right: 6px;
    padding: 0 6px;
    border: 1px solid $reaction-row-button-border-color;
--- 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: $font-12px;

    pre, code {
        flex: 1;
--- 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: $font-15px;
        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: $font-12px;
    }

    .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
--- 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: $font-12px;

    .mx_UserInfo_cancel {
        cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
    }

    h2 {
-        font-size: 18px;
+        font-size: $font-18px;
        font-weight: 600;
        margin: 18px 0 0 0;
    }
@ -122,7 +122,7 @@ limitations under the License.
        text-transform: uppercase;
        color: $notice-secondary-color;
        font-weight: bold;
-        font-size: 12px;
+        font-size: $font-12px;
        margin: 4px 0;
    }

@ -134,8 +134,8 @@ limitations under the License.
        text-align: center;

        h2 {
-            font-size: 18px;
-            line-height: 25px;
+            font-size: $font-18px;
+            line-height: $font-25px;
            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: $font-16px;
        margin: 8px 0;

        &.mx_UserInfo_destructive {
@ -206,7 +206,7 @@ limitations under the License.
    }

    .mx_UserInfo_statusMessage {
-        font-size: 11px;
+        font-size: $font-11px;
        opacity: 0.5;
        overflow: hidden;
        white-space: nowrap;
--- 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: $font-14px;
                margin-top: 71px;
                text-align: center;
            }
--- 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: $font-12px;
 }

 .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: $font-15px;
 }

 .mx_AppTile {
@ -102,7 +102,7 @@ $AppsDrawerBodyHeight: 273px;

 .mx_AppTileMenuBar {
    margin: 0;
-    font-size: 12px;
+    font-size: $font-12px;
    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: $font-16px;
 }

 .mx_AppPermissionWarning_row {
@ -280,7 +280,7 @@ form.mx_Custom_Widget_Form div {
 }

 .mx_AppPermissionWarning_smallText {
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_AppPermissionWarning_bolder {
--- 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: $font-16px;
+                font-size: $font-10-4px;
            }
        }
    }
--- 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: $font-14px;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
@ -116,7 +116,7 @@ limitations under the License.
 }

 .mx_EntityTile_subtext {
-    font-size: 11px;
+    font-size: $font-11px;
    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: $font-10px;
    color: $notice-secondary-color;
    max-width: 6em;
    overflow: hidden;
--- 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: $font-14px;
    position: relative;
 }

@ -64,7 +64,7 @@ limitations under the License.

 .mx_EventTile .mx_SenderProfile {
    color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
    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: $font-17px;
    /* 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: $font-22px;
 }

 .mx_RoomView_timeline_rr_enabled,
@ -314,7 +314,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_readAvatarRemainder {
    color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
    position: absolute;
 }

@ -343,7 +343,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_spoiler_reason {
    color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: $font-11px;
 }

 .mx_EventTile_spoiler_content {
@ -395,7 +395,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }

 .mx_EventTile_keyRequestInfo {
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_EventTile_keyRequestInfo_text {
@ -473,7 +473,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {

 .mx_EventTile_content .mx_EventTile_edited {
    user-select: none;
-    font-size: 12px;
+    font-size: $font-12px;
    color: $roomtopic-color;
    display: inline-block;
    margin-left: 9px;
@ -491,7 +491,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: $font-14px;

    pre, code {
        font-family: $monospace-font-family !important;
@ -591,9 +591,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: $font-13px;
        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: 20px;
+            line-height: $font-20px;
        }
        .mx_EventTile_avatar {
            top: 4px;
@ -601,7 +601,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
    }

    .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: $font-13px;
    }

    .mx_EventTile.mx_EventTile_emote {
--- 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: $font-12px;
+    line-height: $font-14px;
    text-align: center;
    // to be able to get it centered
    // with text-align in parent
--- 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: $font-13px;
 }

 .mx_MemberDeviceInfo_deviceInfo {
--- 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: $font-18px;
    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: $font-12px;
    margin: 4px 0;
 }

 .mx_MemberInfo_profileField {
-    font-size: 15px;
+    font-size: $font-15px;
    position: relative;
 }

@ -109,10 +109,10 @@ limitations under the License.

 .mx_MemberInfo_field {
    cursor: pointer;
-    font-size: 15px;
+    font-size: $font-15px;
    color: $primary-fg-color;
    margin-left: 8px;
-    line-height: 23px;
+    line-height: $font-23px;
 }

 .mx_MemberInfo_createRoom {
@ -128,7 +128,7 @@ limitations under the License.
 }

 .mx_MemberInfo label {
-    font-size: 13px;
+    font-size: $font-13px;
 }

 .mx_MemberInfo label .mx_MemberInfo_label_text {
@ -144,7 +144,7 @@ limitations under the License.
 }

 .mx_MemberInfo_statusMessage {
-    font-size: 11px;
+    font-size: $font-11px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
--- 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: $font-13px;
        padding-left: 3px;
        padding-right: 12px;
        margin-top: 8px;
--- 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: $font-14px;
    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: $font-14px;
    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: $font-10px;
    color: $greyed-fg-color;
 }

--- 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: $font-13px;
    font-weight: 600;
    min-width: 54px;
    text-align: center;

    .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: 9px;
+        font-size: $font-9px;
        opacity: 0.7;
    }
 }
--- 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: $font-11px;
    opacity: 0.5;
 }
--- 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: $font-13px;
    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: $font-21px;
    z-index: 1;
    text-align: center;
 }
--- 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: $font-52px;
    color: $roomheader-color;
-    font-size: 18px;
+    font-size: $font-18px;
    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: $font-18px;
    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: $font-13px;
    margin: 0 7px;
    margin-top: 4px; // to align baseline of topic with room name
    overflow: hidden;
--- 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: $font-13px;
    padding: 5px;
    border: 1px dashed $accent-color;
    color: $primary-fg-color;
    background-color: $droptarget-bg-color;
    border-radius: 4px;
-    line-height: 16px;
+    line-height: $font-16px;
 }

 .mx_RoomList_emptySubListTip .mx_RoleButton {
--- 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: $font-18px;
        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: $font-12px;
+        line-height: $font-20px;

        .mx_Spinner {
            vertical-align: middle;
--- 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: $font-11px;
    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: $font-14px;
    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: $font-12px;
 }

 .collapsed {
--- 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: $font-15px;
        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: $font-15px;
        cursor: pointer;
        color: $primary-fg-color;
        border-bottom: 2px solid $accent-color;
--- 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: $font-14px;
    justify-content: center;
    margin-right: 6px;
    // don't grow wider than available space
--- 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: $font-24px;
    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: $font-14px;
    font-weight: 600;
    color: $eventtile-meta-color;
 }
--- 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: $font-20px;
    font-weight: 600;
    color: $primary-fg-color;
 }
@ -29,7 +29,7 @@ limitations under the License.
 }

 .mx_SettingsTab_subheading {
-    font-size: 16px;
+    font-size: $font-16px;
    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: $font-14px;
    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: $font-14px;
    color: $primary-fg-color;
    max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
    box-sizing: border-box;
--- 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: $font-14px;

    a {
        color: $accent-color;
--- 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: $font-32px;
 }

 .mx_VerificationShowSas_emojiSas_label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
-    font-size: 12px;
+    font-size: $font-12px;
 }

 .mx_VerificationShowSas_emojiSas_break {
--- 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: $font-13px;
 }
--- 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: $font-36px;
    border-radius: 36px;
    color: $accent-fg-color;
    margin: auto;
--- a/res/themes/dark-custom/css/dark-custom.scss
+++ b/res/themes/dark-custom/css/dark-custom.scss
@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
--- 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: $font-14px;
    color: $button-fg-color;
    background-color: $button-bg-color;
    width: auto;
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
--- a/res/themes/light-custom/css/light-custom.scss
+++ b/res/themes/light-custom/css/light-custom.scss
@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
--- 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: $font-14px;
    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: $font-15px;
    padding: 0px 1.5em 0px 1.5em;
 }

--- a/res/themes/light/css/light.scss
+++ b/res/themes/light/css/light.scss
@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
@import "_paths.scss";
@import "_fonts.scss";
@import "_light.scss";