Font Responsive (Units)

I was working on a corporate website project and was involved in CSS and making fonts responsive. ✍️

One issue that really bothered me was the uniformity of font display on mobile.
For example, as a standard, we usually use a value of 1.6em for line-height.
But interestingly, on Apple phones, the display looks a little more compact and for a better experience, we should change the value to 1.8em.

🔎 This difference may also be related to the font type (Variant and Weight), but in the basic case it is better to know that such differences exist.

To always have it at hand, I brought this table that shows the types of units and their uses:
px → Absolute unit (fixed pixel); high precision but not scalable.
em → Relative to the font size of the current element; scalable but stacked.
rem → Relative to the size of the root (root); causes uniform scalability.
% → Relative to the size of the parent element; great for flexible layouts.
vw → 1% of the viewport width; useful for responsive typography/layouts.
vh → 1% of the viewport height; mostly used for full-screen sections.
vmin → 1% of the smallest viewport dimension; good for small screens.
vmax → 1% of the largest viewport dimension; good for large screens.

📐 For simplicity, here is a common map:
0.5em = 8px
1em = 16px
2em = 32px
3em = 48px

👨‍💻 The question I asked the AI ​​was:
“What would be the best size for H1 to P tags?”
The answer (which I tested in a WordPress project and it worked great):

/* Base styles for desktop/tablet */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { font-size: 1rem; }

/* Mobile styles for screens ≤ 480px /
@media (max-width: 480px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p { font-size: 0.9375rem; } / ~15px */
}

📱 And since we're talking about mobile, here's a tip for Flutter (Android) apps:
Best recommended size for main text: 14sp – 16sp
For headings (H1-H3): between 20sp – 24sp
For smaller headings (H4-H6): between 16sp – 18sp

🔧 Finally, an important difference in using Media Queries:
@media (condition) { } → Applies to all media types.
@media screen and (condition) { } → Applies only to screen devices.
@media only screen and (condition) { } → Same as before, but hides the styles from older browsers that don't understand Media Queries.

✅ Note: Using only screen is mostly for backward compatibility and does not make a difference on modern browsers, but it is still considered Best Practice.