Published by

Fluid type sizes and spacing

I’ve been using a fluid type and spacing system on the most recent builds I’ve completed. Here’s why I use it, and how I approach it. I mainly use SCSS (a Sass syntax), but it’s also very do-able with plain CSS.

Screencast of Gort Scott’s homepage, resizing it in Chrome’s inspector

The example above demonstrates the result on gortscott.com, resizing the window from about 2300px down to about 640px and back again. The type and spacing across the page begins scaling down when the window is 2095px wide and stops shrinking at 1047px wide. At that point the text begins to reflow as the CSS Grid layout continues to shrink. Eventually at 703px wide the layout shifts, and again at 543px wide.

Read more

Published by

Chinese web font research

Did some research on Chinese web font best practices a while back when working on Memory Machine for Tyler Coburn + Asia Art Archive with Luke Gould. It was an interesting challenge. This was my overall takeaway from the research:

  • Self-hosted fonts are out, the font files are prohibitively enormous due to the number of characters
  • The Great Firewall can cause issues with most font services, so no Google Fonts or Typekit
  • If you need to render a mixture of Latin and Chinese characters and want them to use different fonts, the font stack structure and naming is critical (see article by Kendra Schaefer for more info)
  • Bold and italic should never be used for emphasis on Chinese characters since it distorts their meaning

Read more