Menu icon Foundation
How to adjust font for different screens

I am able to manage div adjustment using the foundation predefined classes, but the issue is coming with the font.
The font size is not that appropriate according to different screens. Is foundation have any solution to it?

fontsmobile

I am able to manage div adjustment using the foundation predefined classes, but the issue is coming with the font.
The font size is not that appropriate according to different screens. Is foundation have any solution to it?

Rafi Benkual over 4 years ago

There is already responsive methods built into to typography in Foundation.

Align classes also have media queries

// Text alignment class names
$align-class-names:
  small-only,
  small,
  medium-only,
  medium,
  large-only,
  large,
  xlarge-only,
  xlarge,
  xxlarge-only,
  xxlarge;

Headers have scaling:

// 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;