Search code examples
cssmobilefontsresponsive-designzurb-foundation-5

Increase fonts for mobile devices with Zurb Foundation

I've created a clean new web project with Zurb Foundation 5. On desktop and laptop it looks great. I use rem units for font sizes. On small devices the layout is responsive but the font is much smaller - I guess because of higher pixel density.

The solutions (this for example) provided on Zurb's forum didn't work for me.

Any any ideas will be very much appreciated.

Update:

Here's what I found working for many devices:

@media #{$retina} {
 font-size: 200%;
}

However it doesn't cover everything, for example Samsung Galaxy II device, for which the font stays small.

Solution

  • It appeared that starting with mobile-first is the way to go. So in my css something like this works with small devices:

    @media #{$small-up} {
 font-size: 200%;
}