Zooming and A11y

When building applications, it is very important to allow users to be able to make changes to the font size that works very well for them. This is common for elderly people or people that have problems with sight. For that reason, avoid fixed values such as px as it will break that functionality

/* ❌ Avoid this */  
body {  
  font-size: 16px; /* Fixed size, does not scale well and overrides value provided by a user in a browser */  
  width: 1200px;   /* Fixed width, breaks layout on zoom */  
  line-height: 20px; /* Px won't scale when zoomed in */  
}  
  
h1 {  
  font-size: 32px; /* Absolute size that won’t adjust with zoom */  
}  
  
p {  
  font-size: 14px; /* Fixed pixel size prevents scaling */  
  line-height: 1.5px; /* Px won't scale when zoomed in */  
}  

Instead, use relative values that can scale up and down with size and adjust with the size of the font.

/* ✅ Good practice */  
body {  
  max-width: 100%; /* Responsive width */  
  line-height: 1.5; /* Responsive line height */  
}  
  
h1 {  
  font-size: 2rem; /* Scales relative to the root */  
}  
  
p {  
  font-size: 1rem; /* 1rem = 16px by default but scales with zoom */  
  line-height: 1.6; /* Responsive line height */  
}  

Also, ensure that you have the following in your HTML and never set user-scalable to no!

<meta name="viewport" content="width=device-width, initial-scale=1.0">