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.
See: Can I Use CSS Math Functions for currently aligned browser support.
For more details on these 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.
Update 2020 included:
- Variable property name
- CSS clamp option
- CSS min/max option
- Safari resize fix option
- Longhand calculation option
- Settings preserved with localStorage
- Improved HTML form semantics
- Prevent non-numeric inputs
- Grid and Flexbox layout
- Limited to 4 decimal places.
- Replaced key detection with KeyboardEvent API to resolve
- Negative values enabled on the range inputs
- Cut & Paste enabled on input fields
- Multi-keyboard types accomodated: Qwerty, Dvorak, Azerty, etc
- Numeric keypad enabled
- Added a comment referencing the tools' url
- A few Accessibility improvements.