[ mixin ] adjust-font-size-to : font-size and line-height

1)

html {
  font-size: 100%;
  line-height: 1.5em;
}

* 16px is the default font size for most browsers, so 100% = 16px.
* A relative line-height is always relative to the font-size of the current element,
so in this case the line-height is set to 1.5 em ( 1.5 * 16px = 24px).

2) The fun starts when you begin setting font sizes on other elements.
Let’s say we want to make our <h1>s 42px. We do so using the adjust-font-size-to mixin.

Example :

h1 {
  @include adjust-font-size-to(42px);
}

2.1) First it sets our font-size relative to our element’s container, which in most cases will be our $base-font-size. So we get something like:

font-size: 2.625em;   // 2.625*16px=42px

2.2) Vertical Rhythm also sets line-height to a factor of our baseline grid, larger than the font-size.
So in the case of our 42px font-size, it sets the line-height to 48px or 2 baseline units or technically speaking

line-height: 1.142857143em;  // 1.142857143 * 42px = 48pxish

 

3) so what happens when you want to go down in font size?
Let’s say 12px on some meta data.
What we learned above would result in a line height of 24px, which would be akwardly large.
Easy! If we want a line height of 16px so that every 3rd line of our meta data lines up with every 2nd baseline.
We just pass the desired number of rhythm units to the same mixin.

In this case:

.meta {
  @include adjust-font-size-to(12px, 2/3);
}

 

ref : https://atendesigngroup.com/blog/vertical-rhythm-compass

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s