frontend: implement responsive font-size using 62.5% trick

Tomasvrba · Tomasvrba · commit d9da08d5f977 · 2025-10-15T18:05:07.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/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/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/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/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/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/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/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
@@ -16,12 +16,12 @@
 .headerContainer p.receiveAddress { 
     color: var(--color-secondary);
     margin-top: var(--space-quarter);
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .noConnectedSessions {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-large);
     text-align: center;
@@ -41,7 +41,7 @@
 
 .allSessionsHeading {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-half);
 }
@@ -54,7 +54,7 @@
     }
 
     .headerContainer p {
-        font-size: 16px;
+        font-size: 1.6rem;
     }
     
     .headerContainer p.receiveAddress,
diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  font-size: 14px;
+  font-size: 1.4rem;
   gap: var(--space-half);
   width: 100%;
 }
@@ -57,7 +57,7 @@
   flex-basis: auto;
   flex-shrink: 0;
   flex-grow: 1;
-  font-size: 16px;
+  font-size: 1.6rem;
   justify-content: flex-end;
   margin-left: auto;
   overflow: hidden;
@@ -67,7 +67,7 @@
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 1.8rem;
   margin-left: 4px;
   margin-top: 6px;
   margin-right: -8px;
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
@@ -1,10 +1,10 @@
 .cardBody {
-  font-size: 16px;
+  font-size: 1.6rem;
   margin-bottom: calc(var(--space-half) + var(--space-quarter));
 }
 
 .cardBody2 {
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-bottom: var(--space-default);
 }
 
@@ -49,7 +49,7 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: 400;
   margin: 0;
   margin-bottom: var(--space-half);
@@ -84,6 +84,6 @@ ul.clean {
   }
 
   .title {
-    font-size: 16px;
+    font-size: 1.6rem;
   }
 }
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/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
`@@ -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
`@@ -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`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.text {`
`39`		`- font-size: 16px;`
	`39`	`+ font-size: 1.6rem;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.dialogButtonsContainer {`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`animation: changeContent .8s linear infinite;`
`14`	`14`	`display: block;`
`15`	`15`	`content: "⠋";`
`16`		`- font-size: 14px;`
	`16`	`+ font-size: 1.4rem;`
`17`	`17`	`margin-left: 3px;`
`18`	`18`	`}`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -25,18 +25,18 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.title {`
`28`		`- font-size: 14px;`
	`28`	`+ font-size: 1.4rem;`
`29`	`29`	`font-weight: bold;`
`30`	`30`	`text-align: left;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.disclaimer p {`
`34`		`- font-size: 14px;`
	`34`	`+ font-size: 1.4rem;`
`35`	`35`	`line-height: 1.5;`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.disclaimer p + .title {`
`39`		`- margin: 40px 0 0 0;`
	`39`	`+ margin: 4rem 0 0 0;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.table {`
`@@ -45,7 +45,7 @@`
`45`	`45`
`46`	`46`	`.table table {`
`47`	`47`	`border-collapse: collapse;`
`48`		`- font-size: 14px;`
	`48`	`+ font-size: 1.4rem;`
`49`	`49`	`text-align: left;`
`50`	`50`	`}`
`51`	`51`