Menu icon Foundation
Line-Height - how to change?

How can I change the line-height?

Tried to uncomment $base-line-height: 150% (in _settings-scss) and add another value, but does not affect the line-height in regular paragraphs (neither other parts of my site).

What have I missed?

line-heighttypography

How can I change the line-height?

Tried to uncomment $base-line-height: 150% (in _settings-scss) and add another value, but does not affect the line-height in regular paragraphs (neither other parts of my site).

What have I missed?

Rafi Benkual over 5 years ago

From the comments in the _settings file

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 150%;

// This is the default html and body font-size for the base em value.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16 !default;
I read this as compatibility settings, not to style individual elements. I have tested as well to see if font-size on the tag and line-height on the tag change, but they don't. $em-base does affect the grid size though.

You can set the line-height of individual text elements(as the $base variables don't take precedence over styling for text elements anyway) through the following variables:

// $header-line-height: 1.4;
// $subheader-line-height: 1.4;
// $paragraph-line-height: 1.6;
// $paragraph-aside-line-height: 1.35;
// $f-dropdown-line-height: emCalc(18);
// $price-desc-line-height: 1.4;
// $table-line-height: emCalc(18);
// $tooltip-line-height: 1.3;

Hope this helps.

Bardia over 5 years ago

Thanks. Used $paragraph-line-height to accomplish my goal. But somehow still does not understand how i can set a line-height value for global affection.