Fluid-responsive property, and responsive font-size typography, calculator
What are fluid-responsive properties, fonts, fluid typography?
They all leverage the viewport width, and / or height, to smoothly scale the font-size, or property, rather than switch at specific breakpoints.
Some versions address the whole page, others manipulate individual selectors but all use a calculation based upon the
VW unit to generate the scaling behaviour.
Supported by all modern browsers: Can I Use Viewport units.
This website has been fully fluid-reponsive since 2014, without issue.
CSS methods: clamp and min-max
The upside of both these methods is they remove the requirement to use media queries.
Unfortunately, at present, they don't have the level of browser support that the media-query version has. This will change with time, see: Can I Use CSS Math Functions for currently aligned browser support.
For more details on these newer methods please see Chris Coyer's article Simplified Fluid Typography.
If you experience SASS issues with min-max, try capitalising Min and Max. SASS is case-sensitive while CSS is not. Thanks to Ana Tudor for that tip.
Fluid typography (or property) calculations
This calculator generates the figures for the math equation:
VW is used which supplies a different font-size on devices spun between portrait to landscape. Personally, I do not consider this an issue but if you do, drop me a line and I'll see what I can work up.
The alternative is to use
vmin (or eventually
vmax once IE plays catch-up). See Responsive fonts - auto-scaling the root font-size for more detail.
Accessibility of fluid-responsive typography
Adjustment of the base font-size, usually 16px, is an accessibility feature which allows users to enlarge text content on a web page. Using absolute units (px, pt) or screen-relative units (vw, vh, vmin, vmax) for font-sizes will override that setting. Most calculation methods I see ignore this issue, and actually hinder accessibility, which is quite shameful given it's so easily avoided.
The calculation provided does not reset user-defined preferences, it compliments, thereby maintaining this accessibility feature.
The secret sauce is the calculations minimum font-size (or property value). It is stated in REM, which reads any user-defined setting before applying the math. This is why the unit on this value does not change with the selected preference. Why not use a percentage value? Unfortunately, percentage values fail in IE and Edge.
Safari resize issue
The simplest fix for Safari fluid-typography appears to be adding
min-height: 0vw. See Martin Wolf's Codepen Fluid Typography Safari 11 Issue Fixed.