In a recent design we needed a giant button that would scale well from mobile to desktop.
By combining viewport width scaling and pixel scaling with a calculation you can make a font size scale, but never scale smaller than a minimum size.
Demo:
Big Button Text
Both calc and viewport-units have wide support right now. Remember to set a fallback font-size for fringe browsers.
More information
By combining viewport width scaling and pixel scaling with a calculation you can make a font size scale, but never scale smaller than a minimum size.
<a href="#example" style="display: block; background-color: #5588aa; padding: 20px; color: #fff; text-align: center; font-size: 30px; font-size:calc(30px + 1.6vw);">Big Button Text</a>
Demo:
Big Button Text
Both calc and viewport-units have wide support right now. Remember to set a fallback font-size for fringe browsers.
More information
- Chris Coyier: Viewport sized typography
- David Walsh: A Couple of Use Cases for Calc()
- Jen Simmons: Progressing Our Layouts
- Vasilis van Gemert: Create the perfect website layout system
Comments