When headings (like h1, h2, etc.) get split across lines in the Ohm theme, the heading text overlaps with itself, because the font-size is 34px (for h2, e.g.) while the line-height is only 20px. See the line-height-broken.png attachment. This is a result of the way the font size is set in ohm/sass/base/_typography.scss: 

h2, .beta {
  @include font-size(34px);
  font-weight: 700;
  color: $mid-blue;
}

The @font-size mixin (defined in ohm/sass/abstractions/_typography.scss) sets the font-size in rems, but doesn't touch the line-height, which is set to 20px in ohm/sass/variables/_typography.scss by setting the Compass Vertical Rhythm variable $base-line-height.

One way to fix this would be to use the Compass Vertical Rhythm mixin adjust-font-size-to(), like so:

h2, .beta {
  @include adjust-font-size-to(34px);
  font-weight: 700;
  color: $mid-blue;
}

This mixin also sets the line-height, taking the base-line-height into consideration. The line-height-fixed.png attachment shows what this looks like.

CommentFileSizeAuthor
line-height-fixed.png91.12 KBDavid Eisner
line-height-broken.png89.26 KBDavid Eisner
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

couloir007’s picture

couloir007 CreditAttribution: couloir007 commented

This adjusts the line-height, but removes the fallback px.

hawkdavis’s picture

hawkdavis CreditAttribution: hawkdavis commented

what about adding this function 

@function px2rem($size-in-px) {
	@return ($size-in-px/$base-font-size) + rem;
}

then changing the mixin to this?

// Use REMs with a pixel fallback for font sizing.
@mixin font-size($font-size){
  font-size: $font-size;
  font-size: px2rem($font-size);
  line-height: px2rem($font-size);
}