Forum Moderators: open

Message Too Old, No Replies

Responsive text not working

         

Gilead

7:35 pm on Jun 20, 2021 (gmt 0)

10+ Year Member



I recently started using google fonts for my projects with some success. I'm about to launch a redesigned site only when I checked it under mobile, I saw that text was not scaling as expected. I had used font-size: calc(15px + 1vw); in my css. What am I missing? Thanks!

Dimitri

9:58 pm on Jun 20, 2021 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



Avoid using mathematical expressions, especially with mixed units. Stick with em, rem, and try to avoid px (for font-size).

lucy24

11:27 pm on Jun 20, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In particular, the locution px + vw seems perilous in the extreme. Why can't you simply leave it at the user's default size--whatever it may be is none of the site owner's business--and use simple percentages for elements that are supposed to be larger or smaller?

If a given font happens to “read” noticeably larger or smaller than an ordinary font of the same type (generally serif or sans-serif), adjust all percentages accordingly. Or, better yet, don't use that particular font ;)

:: pause for irritated mutter that font-size-adjust [caniuse.com] never became standard across all browsers, although it has been around for at least a decade ::