Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Responsive typography with Modular Scale

bugsnag.com

Post reply on HN
Print view View original

1–9 of 9 posts

Re: Responsive typography with Modular Scale

#3

Post by Rumudiez »

Well, it's a good idea, but in typography sizing and spacing is entirely based on a slightly more abstracted approach: the baseline grid. The baseline is the imaginary line which runs across the bottom of type, and the grid's vertical spacing is equal to the leading, or line-height. Therefore, body type set at 10pt/14pt will always align with a 14pt baseline grid so that elements on opposite sides of the page will always align and various type sizes will flow more naturally into the design.

Logically, type sizes from there (and this harkens back to manually setting type) should only be whole or half increments of the base type size (from my earlier example, this is 10pt), meaning appropriate sizes are 10pt, 15pt, 20pt, 30pt, etc, with agreeable modifications when necessary. However, good proportions would dictate that 10, 15, and 20 are too close together and as such designers would not use each, but probably restrict their designs to the highest and lowest point values.

I think it's important to remember that just because there are six included hX elements doesn't mean they should each be a different size. To create hierarchy, try changing capitalization, tracking (spacing between letters), weight, and other available styles in the type family you're working with.

Re: Responsive typography with Modular Scale

#5

Post by max_luster »

adam-f wrote: post #2

is it $ms-ratio: $golden; or $ms-ratio: golden; ?

It's $ms-ratio: $golden;

When you bring Modular Scale into your project it will include a number of global variables including $golden with commonly used ratios in design. They're useful to try out when you're experimenting with different $ms-ratios. Check out the list here https://github.com/Team-Sass/modular-scale#ratios

Re: Responsive typography with Modular Scale

#6

Post by harlanlewis »

Awesome, this is almost exactly the same approach I've adopted, right down to the double-stranded scale and breakpoint adjustments to font size. Looking forward to article 3.

The only notable differences in my approach have been using Compass's Vertical Rhythm (http://compass-style.org/reference/compass/typography/vertic...) and some mixins to opt out entirely or re-initialize scale for individual components. As a side benefit, using a preprocessor allows for a rem-like approach for all browsers.

Re: Responsive typography with Modular Scale

#7

Post by jjgreen »

The default ms-ratio used here (the golden ratio) has been criticized in recent years for being little more than wishful thinking -- see http://www.maa.org/external_archive/devlin/devlin_05_07.html for example. May be worthwhile playing with other values when looking for the best typographic results.
Post reply on HN