frontend: implement responsive font-size using 62.5% trick

Tomasvrba · thisconnect · commit 60adbfb1f4dc · 2025-10-23T13:56:02.000+02:00
Set html { font-size: 62.5%; } to make 1rem = 10px for easier
responsive calculations. Convert all hardcoded px font-sizes to rem
units throughout the codebase.

This enables easier responsive font scaling by allowing components
to scale proportionally when the root font-size changes for different
screen sizes or user preferences.

Conversions:
- 10px → 1.0rem
- 11px → 1.1rem
- 12px → 1.2rem
- 14px → 1.4rem
- 16px → 1.6rem
- 18px → 1.8rem
- 19px → 1.9rem
- 20px → 2.0rem
- 22px → 2.2rem
- 24px → 2.4rem
- 32px → 3.2rem
- 35px → 3.5rem

This follows the standard '62.5% Font Size Trick' pattern where
setting the root font-size to 62.5% (of browser default 16px) makes
1rem equal to 10px, simplifying rem-to-pixel mental math.
diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css
@@ -1,5 +1,5 @@
 .container {
-  --size-default: 14px;
+  --size-default: 1.4rem;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
@@ -14,13 +14,13 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
-  font-size: 12px;
+  font-size: 1.2rem;
   flex-shrink: 0;
 }
 
diff --git a/frontends/web/src/components/aopp/aopp.module.css b/frontends/web/src/components/aopp/aopp.module.css
@@ -42,6 +42,6 @@
 }
 @media (min-width: 1200px) {
     .message {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
 }
diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
@@ -28,7 +28,7 @@
 
 @media (max-width: 382px) {
   .badge {
-      font-size: 10px;
+      font-size: 1rem;
   }
 }
 
diff --git a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
@@ -17,7 +17,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 12px;
+    font-size: 1.2rem;
     flex-direction: column;
     gap: 4px;
     justify-content: center;
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
@@ -8,13 +8,13 @@
 
 .progressInfo {
     display: flex;
-    font-size: 16px;
+    font-size: 1.6rem;
     justify-content: space-between;
     margin: 0 0 var(--space-default);
 }
 
 .additionalUpgrade {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-eight);
 }
@@ -23,7 +23,7 @@
     .content,
     .additionalUpgrade
     {
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
@@ -30,13 +30,13 @@
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
     .header .title {
-        --size-subheader: 16px;
+        --size-subheader: 1.6rem;
     }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
     .modal .contentContainer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css
@@ -1,5 +1,5 @@
 .radio {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     line-height: 1.5;
 }
 
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -63,7 +63,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -51,7 +51,7 @@
     animation: changeContent .8s linear infinite;
     display: block;
     content: "⠋";
-    font-size: 14px;
+    font-size: 1.4rem;
     margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/keystore/connected-keystore.module.css b/frontends/web/src/components/keystore/connected-keystore.module.css
@@ -15,6 +15,6 @@
 
 @media (min-width: 1200px) {
   .keystore {
-    --size-default: 20px;
+    --size-default: 2rem;
   }
 }
diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -36,7 +36,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .dialogButtonsContainer {
diff --git a/frontends/web/src/components/message/message.module.css b/frontends/web/src/components/message/message.module.css
@@ -24,10 +24,10 @@
 
 @media (max-width: 768px) {
     .message {
-      --size-default: 14px
+      --size-default: 1.4rem;
     }
     .message .title {
-        --size-subheader: 18px;
+        --size-subheader: 1.8rem;
     }
 }
 
diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
@@ -13,7 +13,7 @@
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
@@ -25,18 +25,18 @@
 }
 
 .title {
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 40px 0 0 0;
+  margin: 4rem 0 0 0;
 }
 
 .table {
@@ -45,7 +45,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: left;
 }
 
diff --git a/frontends/web/src/components/title/subtitle.module.css b/frontends/web/src/components/title/subtitle.module.css
@@ -7,6 +7,6 @@
 
 @media (min-width: 1200px) {
   .subtitle {
-    --size-subheader: 20px;
+    --size-subheader: 2rem;
   }
 }
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
@@ -59,7 +59,7 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
@@ -81,7 +81,7 @@
 
 .txAmount {
   align-items: baseline;
-  font-size: 16px;
+  font-size: 1.6rem;
   font-variant: tabular-nums;
   gap: 3px;
   justify-content: flex-end;
@@ -105,7 +105,7 @@
 
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
 }
 
@@ -116,7 +116,7 @@
 }
 .txNoteText {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 @media (max-width: 560px) {
@@ -130,7 +130,7 @@
   align-items: center;
   color: var(--color-secondary);
   display: flex;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding-bottom: 6px;
 }
@@ -174,13 +174,13 @@
 }
 .addresses {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.285714;
 }
 .txType {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 
diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
@@ -295,17 +295,17 @@
 
 @media (min-width: 1200px) {
     .title {
-        --size-subheader: 28px;
+        --size-subheader: 2.8rem;
     }
     .header,
     .inner p {
-        --size-default: 20px;
+        --size-default: 2rem;
     }
     .fullscreen {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
     .inner footer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
@@ -1,5 +1,5 @@
 .accountName {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0 var(--space-half) 0 0;
 }
 
@@ -9,7 +9,7 @@
 
 .address {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .itemText {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
@@ -205,7 +205,7 @@
     }
 
     .searchButton {
-        font-size: 14px;
+        font-size: 1.4rem;
         height: var(--item-height-small);
         text-align: left;
     }
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 14px;
+    font-size: 1.4rem;
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;
diff --git a/frontends/web/src/routes/account/info/buy-receive-cta.module.css b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
@@ -16,6 +16,6 @@
 @media (max-width: 425px) {
     .buttons button {
         padding: var(--space-quarter);
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 32px;
+  font-size: 3.2rem;
   display: flex;
   align-items: flex-end;
 }
@@ -91,7 +91,7 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 22px;
+  font-size: 2.2rem;
   padding: 0 4px;
 }
 
@@ -123,7 +123,7 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 16px;
+  font-size: 1.6rem;
   margin: 0 0 4px 0;
 }
 
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 19px;
+  font-size: 1.9rem;
 }
 
 .diffUnit {
-  font-size: 16px;
+  font-size: 1.6rem;
   padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -26,11 +26,11 @@
 }
 
 .accountName {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .receiveAddress {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
@@ -8,7 +8,7 @@
 
 .container p {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     line-height: 1.9;
     margin-bottom: 0;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css
diff --git a/frontends/web/src/routes/market/components/countryselect.module.css b/frontends/web/src/routes/market/components/countryselect.module.css
diff --git a/frontends/web/src/routes/market/components/vendor-deals.module.css b/frontends/web/src/routes/market/components/vendor-deals.module.css
diff --git a/frontends/web/src/routes/market/market.module.css b/frontends/web/src/routes/market/market.module.css
diff --git a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
diff --git a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css

Original file line number	Diff line number	Diff line change
`@@ -14,13 +14,13 @@`
`14`	`14`	`.txPrefix,`
`15`	`15`	`.txUnit {`
`16`	`16`	`color: var(--color-secondary);`
`17`		`- font-size: 14px;`
	`17`	`+ font-size: 1.4rem;`
`18`	`18`	`line-height: 1.285714;`
`19`	`19`	`white-space: nowrap;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.txConversionAmount .txUnit {`
`23`		`- font-size: 12px;`
	`23`	`+ font-size: 1.2rem;`
`24`	`24`	`flex-shrink: 0;`
`25`	`25`	`}`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,6 @@`
`42`	`42`	`}`
`43`	`43`	`@media (min-width: 1200px) {`
`44`	`44`	`.message {`
`45`		`- --size-default: 18px;`
	`45`	`+ --size-default: 1.8rem;`
`46`	`46`	`}`
`47`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`
`29`	`29`	`@media (max-width: 382px) {`
`30`	`30`	`.badge {`
`31`		`- font-size: 10px;`
	`31`	`+ font-size: 1rem;`
`32`	`32`	`}`
`33`	`33`	`}`
`34`	`34`
Original file line number	Diff line number	Diff line change
`@@ -8,13 +8,13 @@`
`8`	`8`
`9`	`9`	`.progressInfo {`
`10`	`10`	`display: flex;`
`11`		`- font-size: 16px;`
	`11`	`+ font-size: 1.6rem;`
`12`	`12`	`justify-content: space-between;`
`13`	`13`	`margin: 0 0 var(--space-default);`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.additionalUpgrade {`
`17`		`- font-size: 16px;`
	`17`	`+ font-size: 1.6rem;`
`18`	`18`	`margin: 0;`
`19`	`19`	`margin-top: var(--space-eight);`
`20`	`20`	`}`
`@@ -23,7 +23,7 @@`
`23`	`23`	`.content,`
`24`	`24`	`.additionalUpgrade`
`25`	`25`	`{`
`26`		`- font-size: 14px;`
	`26`	`+ font-size: 1.4rem;`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
Original file line number	Diff line number	Diff line change
`@@ -30,13 +30,13 @@`
`30`	`30`	`/* guard dialog and wait-dialog from view styles */`
`31`	`31`	`@media (min-width: 1200px) {`
`32`	`32`	`.header .title {`
`33`		`- --size-subheader: 16px;`
	`33`	`+ --size-subheader: 1.6rem;`
`34`	`34`	`}`
`35`	`35`	`.modal {`
`36`	`36`	`margin-left: var(--sidebar-width-large);`
`37`	`37`	`}`
`38`	`38`	`.modal .contentContainer p {`
`39`		`- --size-default: 14px;`
	`39`	`+ --size-default: 1.4rem;`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.radio {`
`2`		`- --size-default: 14px;`
	`2`	`+ --size-default: 1.4rem;`
`3`	`3`	`line-height: 1.5;`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`
`64`	`64`	`.header a {`
`65`	`65`	`cursor: pointer;`
`66`		`- font-size: 20px;`
	`66`	`+ font-size: 2rem;`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`.content {`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@`
`51`	`51`	`animation: changeContent .8s linear infinite;`
`52`	`52`	`display: block;`
`53`	`53`	`content: "⠋";`
`54`		`- font-size: 14px;`
	`54`	`+ font-size: 1.4rem;`
`55`	`55`	`margin-left: 3px;`
`56`	`56`	`}`
`57`	`57`