Changing text size according to resolution in Zurb Fundation

Question

Foundation is cool, but i wanna ask one thing, how can we change size of the text when we for different devices with different scree res. thanks.

Answer 1

There is no direct support for that in Foundation 5.

You will have to use media queries for scaling your font sizes for different resolutions. There are many ways to implement that.

One possible approach is to specify font-size on container element in pixels and then use ems for sizes of child elements.

.homepage {

  font-size: 16px;

  @media #{$large-up} {
    font-size: 20px;
  }
}

.homepage p {
  font-size: 1em;
}

.homepage small {
  font-size: 0.75em; /* 12px on small and medium screens, 15px - on large */
}

Other approaches here Responsive Font Size