Menu
I've created a site using the Zurb Foundation 3 grid. Each page has a large h1:
body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; }<div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row -->When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text.
I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.
Am I missing something really obvious? How do I achieve this?
682
To make font size responsive in steps, set the base font size at each breakpoint. To create fluid text that smoothly changes size, use the calc() function to calculate a ratio between pixels and viewport widths, this will make the base font size grow at the correct rate relative to the screen width.
At a viewport width of 414px , 3.6vw will be 3.6% or about 15px . So the calculated font-size will be 21px + 15px , or about 36px . At a device width of 1440px , 3.6vw will end up being about 52px , so the font-size will be 21px + 52px or about 73px .
Of all these units, rem is the most reliable for font sizing, allowing you to style text responsively so that it scales whenever users change their preferred browser font size.
You can use the viewport value instead of ems, pxs, or pts:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } From CSS-Tricks: Viewport Sized Typography
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
