Anwar Montasir

Web Development + UX Design + Instruction

Case Study:
Responsive Type

Bar

visit project  GitHub

Project Overview

This project was built for the Devsign course I designed and taught in the winter of 2018 at Alchemy Code Lab. The goal was to introduce students to three web type-related concepts:


Prep Work

I didn’t have tons of time to prep for this one. The goal wasn’t a multipage interface with a complex navigation system, but rather something I could demo quickly and keep the focus on the JavaScript and CSS involved in making the app work.


Challenges Faced

I faced two major development challenges:

  1. The project broke as I attempted to migrate to Webpack 4. I had considerable trouble getting my webpack-cli install recognized. The solution turned out to be the order of my install: as suggested by one of the comments in this link, the solution required uninstalling webpack and webpack-cli dev dependencies, uninstalling both globally, reinstalling both globally, and finally reinstalling the dev dependencies, in that order.
  2. Initially the base font size grew too large on a very wide monitor, such as an iMac, even though the content has a max-width. Then I remembered that 100vw was part of my PostCSS formula for calculating the type size:

    $fluidFontSize: calc($minFontSize + ($maxFontVal - $minFontVal) * (100vw - $minViewportSize) / ($maxViewportVal - $minViewportVal));

    This was easily solved by a media query:

    @media screen and (min-width: $maxViewportSize) { body {font-size: $maxFontSize;} }

    Afterwards, I realized the max-width solution is part of this article on Fluid Typography at CSS Tricks. Oh well :\

Technologies Used

  • HTML5
  • CSS
  • JavaScript
  • Webpack
  • Node.js
  • PostCSS