Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Advanced Responsive Typography

Mike Riethmuller at Web Directions 2015
  • typography
  • responsive design
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • References
  • Keypoints

There was a time when pixels were pixels and even relative units such as em and rem were just comfortable abstractions of a base font size, that was usually 16 pixels. We became so familiar with this paradigm, we may have overlooked the potential of viewport units and calc expressions to provide a holy grail of responsive design techniques.

Mike will provide a general overview of unit types and values in CSS, with a specific focus on how viewport units, calc expressions and other computed values work. Armed with an understanding of how computed units are resolved in the browsers, you’re going to learn how to create a “pure function” in CSS that uses vw as a variable. Then we are going to learn how to apply this technique to a number of practical use cases including: min and max font sizes, advanced fluid typography, elastic widths and fluid modular scale headings and more. Each of these techniques can be used today and can be applied with progressive enhancement.

Fluid Type Calc Examples | madebymike

CSS values to know about…

  • Specified value – what you write in the CSS
  • Calculated value – what the result is expected to be
  • Used value – what actually got used when all was done and rendered

Calc() can…

  • add and subtract units with a similar type
    • eg. 10px-3 is not valid
  • multiply units by real numbers only

So with that crash course… responsive typography can be complex and jerky, with piles of media queries. You can smooth it out a lot at larger sizes by using things like viewport width units, which smoothly scale; but at small screen sizes they get too small.

So… You can set a base px width, then use vw above a minimum width.

html { font-size: 18px }
(media query min width 600px)
   html { font-size: 3vw; }

How about a maximum font size? Calculate your media query… 18/(3/100) – use the value as the media query.

A chart is much easier to read than doing lots of calculations.

font-size: calc( 12px + (24-12) * (100vw – 400px) / (800-400);

Modular scale headings: eg. each heading 1.2 times the size of the previous level. That scale is the minor third, “endorsed by nature”.

These techniques are also great for icons and other scalable images.

This is all a bit hard to remember… so let’s forget everything we just learned and use Sass!

There is a Sass mixin, check Mike’s blog for the code or links.

Follow

Mike Riethmuller @MikeRiethmuller

Hey! I just uploaded slides from #WD15 replaced videos with interactive examples on @codepen https://slides.com/mikeriethmuller/wd15/ …https://codepen.io/MadeByMike/pens/tags/?selected_tag=wd15 …

1:59 PM – 1 Nov 2015

Web Directions 2015 – Advanced Responsive Typography

Stop thinking in pixels!

slides.com

  • 22 Retweets
  • 99 likes

Twitter Ads info and privacy

You may also be interested in

Thumbnail for Responsive, Progressive Fluid Typography

Responsive, Progressive Fluid Typography

Mike Riethmuller

Thumbnail for Q&A Responsive, Progressive Fluid Typography

Q&A Responsive, Progressive Fluid Typography

Mike Riethmuller

Thumbnail for Responsible Responsive Design

Responsible Responsive Design

Scott Jehl

Thumbnail for Simple Responsive Typography

Simple Responsive Typography

Nabeelah Ali

Thumbnail for A Quest for Responsive Imagery

A Quest for Responsive Imagery

Simon Elvery

Thumbnail for Responding to Responsive Design

Responding to Responsive Design

Craig Sharkie

Thumbnail for Datatium – Radiation Free Responsive Experiences

Datatium – Radiation Free Responsive Experiences

Andrew Fisher

Thumbnail for Adapting to Responsive Design

Adapting to Responsive Design

Mark Boulton

More presentations from Web Directions 2015

    Thumbnail for The Website Obesity Crisis

    The Website Obesity Crisis

    Maciej Ceglowski

    Thumbnail for Financial Inclusion in the Solomon Islands

    Financial Inclusion in the Solomon Islands

    Rose Matthews

    Thumbnail for Enough Lipstick on Pigs

    Enough Lipstick on Pigs

    Tom Loosemore

    Thumbnail for The New Age of Indie

    The New Age of Indie

    Kai Brach

    Thumbnail for Designing Connected Products

    Designing Connected Products

    Martin Charlier

    Thumbnail for Customer Service as a Core Feature

    Customer Service as a Core Feature

    Mathew Patterson

    Thumbnail for Souls and Machines: Designing the Future of Content

    Souls and Machines: Designing the Future of Content

    Hannah Donovan

    Thumbnail for Hacking the Creative Brain

    Hacking the Creative Brain

    Denise Jacobs

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2025