Menu icon Foundation
Responsive Typography

I have my own approach to this, but I was curious how everyone is handling it specifically in Foundation 5.

The issue is that by default the typography looks great on desktop, but on mobile the headers and body font size are disproportionate. If you resize for good mobile type you get type that is way to small on desktop.

I have been just been resizing specific elements per project in a media query. I was curious if anyone else has come up with a better bolt on solution.

FoundationResponsivetypography

I have my own approach to this, but I was curious how everyone is handling it specifically in Foundation 5.

The issue is that by default the typography looks great on desktop, but on mobile the headers and body font size are disproportionate. If you resize for good mobile type you get type that is way to small on desktop.

I have been just been resizing specific elements per project in a media query. I was curious if anyone else has come up with a better bolt on solution.

Karl Ward over 3 years ago

I also use custom media queries for this.

What do you mean disproportionate? On mobile, my experience is that headers need to be scaled down a fair amount. Big headers look nice on desktop, but they are too big for the screen on mobile, and it does not affect legibility by downsizing.

As for body font, this can often be kept the same as for desktop, but perhaps scale down 5-10% for mobile if you are using a large 14-16px font originally ...

I haven't seen that Foundation employs any special techniques for this, except default downscaling of header on mobile screens.

James Stone over 3 years ago

I think in my case it is also mostly the headers that I am scaling. I am handling it in media queries as well.

Josef Ulander about 3 years ago

Hi guy! In _type.scss you find these variables and they control how much the headers are reduced on smaller screens.

// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

I just copy these into my _settings.scss, remove the !default and change the value to whatever fits my theme.

Seems to work so far.