Type that responds to the user’s screen size, orientation and resolution is a holy grail of responsive design.
In this presentation, Mike Riethmuller will provide a general overview of unit types and values in CSS, with a specific focus on how viewport units and calc() expressions work. Armed with this understanding, we’re going to learn how to create a function with CSS that uses viewport units as a variable. Milke will then demonstrate some practical uses for this technique including:
- min and max font sizes,
- fluid typography,
- fluid modular scale headings, and more
Finally, let’s discuss the future of fluid design and through variable typography our relationship with media queries.
And we’ll see how each of the typography techniques can be used today and applied with progressive enhancement!
In some ways this is an alternative approach to responsive design. Move past breakpoints and media queries and look at things like relative units and the power they bring.
We do tend think in pixels. Everything is an abstraction of px! On the base of 16pxwe think of 1.5em as 24px.
Limitations shape our thinking. We also perceive limitations that aren’t really there. Like cats who will sit inside a circle of tape, we just sit where we think we have to. We take the limits of previous technology forwards into the next technology, just as early TV sounded like radio.
So it takes effort to break the paradigm of pixels.
Let’s start with some browser fundamentals. Unit types and values in CSS. There are 27 css units, but we mostly use about 2 or 3.
Browsers break down CSS in a three step process (look up “CSSOM”):
- specified value – author specified
- computed value – resolves the specified value as far as possible without rendering the page
- used value – used in actual rendering
Understanding calc() – it allows us to do simple calculations in native CSS (normal order of operations applies). Two key rules for calc():
- you can add and subtract units with a similar type (eg. length units, calc(10px + 2rem) resolves to 42px)
- you can multiply an divide real numbers with CSS units (eg. calc(3 * 2rem))
Which brings us to responsive typography. Existing techniques aren’t ideal – eg. relying on breakpoints.
Viewport units are different – vw, vh, vmin, vmax. On their own they can be difficult, eg. text becomes too small or large.
But you can set a minimum size via calc: calc(18px + 3vw) and you can set a max size via a breakpoint using font-size / (viewport units / 100) to calculate the breakpoint.
We can do better, using a function in CSS.
You can apply this to the HTML element, then selectively disable it simply by applying a fixed font size to a class or other selector. Or, you can set the fixed width to HTML and enable fluid type with a class. To make life easier you can just use a mixin in SCSS.
Now we have fluid type, we can move on to Fluid Modular Scales (eg. where each heading level is 1.2 times as large as the last).
To do this, we use a modular scale for small and large screens; calculate the values with a tool like type-scale.com or modularscale.com … then the scale will fluidly change as the screen size changes.
This technique has very high browser support. You can set a fixed fallback if you want to; you can add +100% to fix some bugs with mobile Safari and IE10.
This works with things other than typography. You can scale images and layout. Purely for fun, you can even change colours based on viewport.
Interpolation in design…
Media queries generally reflect limits of a design, that is where will the design stop coping with the content. They are fixed points along a scale, where some of the problems change more fluidly.
Mike talks about viewport sizes that apply higher or lower levels of pressure on the design – when things are in the ideal range, things look great, as you move out of that ideal range there is increasing pressure on the design. Then you hit a breakpoint and change to find another sweet spot.
Variable fonts: the future of fluid typography. Variable fonts allow you to scale the glyphs/shapes/weight of a single web font.
Article: Live Font Interpolation on the Web
Mike has an open issue with the CSSWG for a native interpolation function in CSS.
It’s easy to be caught thinking about new tech in the frame of the old tech. Remember to look for the new techniques, to break away from perceived limitations.
Always question constraints. Think about your intentions and how available technology can help you reach your goals.