

Responsive typography with Modular Scale - loopj
https://bugsnag.com/blog/responsive-typography-with-modular-scale

======
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.

------
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...](http://compass-
style.org/reference/compass/typography/vertical_rhythm/)) 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.

------
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](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.

------
ommunist
Thank you very much. Actually web typography and its automation with SASS
deserve a book, even small one will have big impact. Funny thing canonical
proportion. India have a different one, as far as I read some buddhist scripts
on architecture.

------
baddox
> We designed the Bugsnag dashboard with a $ms-base of 1rem and a $ms-ratio of
> $major-third or 1.25

Nice music reference. Does it make your page feel sad if you use 1.2?

------
adam-f
is it

    
    
        $ms-ratio: $golden;
    

or

    
    
        $ms-ratio: golden;
    
    ?

~~~
max_luster
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](https://github.com/Team-Sass/modular-scale#ratios)

