Responsive, Progressive Fluid Typography

About this presentation

<span style="font-weight: 400;">Type that responds to the user's screen size, orientation and resolution is a holy grail of responsive design.</span> <span style="font-weight: 400;">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:</span> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">min and max font sizes,</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">fluid typography,</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">fluid modular scale headings, and more</span></li> </ul> <span style="font-weight: 400;">Finally, let's discuss the future of fluid design and through variable typography our relationship with media queries.</span> <span style="font-weight: 400;">And we'll see how each of the typography techniques can be used today and applied with progressive enhancement!</span>