Deep dive CSS: font metrics, line-height and vertical-align

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

Deep dive CSS: font metrics, line-height and vertical-align

Responsive Typography

Mike Riethmuller:

It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.

The formula used is this one:

@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) {
    font-size: calc(#{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width})));
}

As 100vw resembles 100% of the viewport width, the font-size will adjust along with it (between the given min_width and max_width).

Looking for a more simple version, that only enforces a minimum font-size which isn’t limited by a given max_width? This way more simple viewport based typography method has got you covered.

It’s possible to also adjust the line-height, using the same formula. The full code then becomes:

// CONFIG
$min_width: 25;
$max_width: 50;

$min_font: 1;
$min_lineheight: 1.35;
$max_font: 1.2;
$max_lineheight: 1.8;

// DEFAULT (LOWER THAN MIN-WIDTH): USE MIN FONT-SIZE AND MIN LINEHEIGHT
:root {
  font-size: #{$min_font}em;
  line-height: #{$min_lineheight}em;
}

// BETWEEN MIN-WIDTH AND MAX-WIDTH: CALCULATE VALUES USING THE VARIANT 100VW
@media (min-width: #{$min_width}em) and (max-width: #{$max_width}em) {
  :root { 
    font-size: calc(#{$min_font}em + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}em) / ( #{$max_width} - #{$min_width})));
    line-height: calc(#{$min_lineheight}em + (#{$max_lineheight} - #{$min_lineheight}) * ( (100vw - #{$min_width}em) / ( #{$max_width} - #{$min_width})));
  }
}

// GREATER THAN MAX-WIDTH: USE MAX FONT-SIZE AND MAX LINEHEIGHT
@media (min-width: #{$max_width}em) {
  :root { 
    font-size: #{$max_font}em;
    line-height: #{$max_lineheight}em;
  }
}

If you’re looking for the Stylus variant (which is my preferred CSS Preprocessor), here’s one I’ve knocked up:

// CONFIG
$min_width = 10;
$max_width = 100;

$min_font = 1;
$min_lineheight = 1.35;
$max_font = 1.2;
$max_lineheight = 1.8;

// DEFAULT (LOWER THAN MIN-WIDTH) USE MIN FONT-SIZE AND MIN LINEHEIGHT
:root
  font-size unit($min_font, "em")
  line-height unit($min_lineheight, "em")


  // BETWEEN MIN-WIDTH AND MAX-WIDTH CALCULATE VALUES USING THE VARIANT 100VW
  @media (min-width: unit($min_width, "em")) and (max-width: unit($max_width, "em"))
    font-size "calc(%s + (%s - %s) * ((100vw - %s) / (%s - %s)))" % (unit($min_font, "em") $max_font $min_font unit($min_width, "em") $max_width $min_width)
    line-height "calc(%s + (%s - %s) * ((100vw - %s) / (%s - %s)))" % (unit($min_lineheight, "em") $max_lineheight $min_lineheight unit($min_width, "em") $max_width $min_width)

  // GREATER THAN MAX-WIDTH USE MAX FONT-SIZE AND MAX LINEHEIGHT
  @media (min-width: unit($max_width, "em"))
    font-size unit($max_font, "em")
    line-height unit($max_lineheight, "em")

Precise control over responsive typography →
Molten Leading in CSS →

Decorative CSS Text Underline

decorative-text-underline

Decorative Text Underline uses a combination of box-shadow and text-shadow to form a modest underline that preserves the element color and weaves between text descenders.

Neat, yet very intensive and only works with text that is rendered onto a fixed background color (no gradients or images!). I sure do hope we can get this natively – without any hacks or sorcery – in browsers (and operating systems, in general) soon.

Decorative CSS Text Underline →

Typography for User Interfaces

legibility

Viljami Salminen:

Since my early days in the industry, I’ve grown to love type and all the little nuances that go into setting it. In this article, I want to share some of the fundamentals that I’ve learned, and hopefully help you get better at setting type for user interfaces.

Typography for User Interfaces (Article) →
Typography for User Interfaces (Slides) →

Multicolor Fonts in the browser

colorfonts

Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication apps to provide a set of colorful emoji.

A more extensive post – in addition to the previously posted Color Emoji in Windows 8.1 —The Future of Color Fonts? – going more in depth on the matter.

Colorful typography on the web: get ready for multicolor fonts →

CSS3 text-align-last

text_align_last_center

.caption {
    text-align: justify;
    text-align-last: center;
}

The text-align-last property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is ‘justify’, which means you gain full control over the alignment of the last line of a block.

As seen in the example above it allows you to have the caption’s alignment set to justify;, except for the last line (normally it would end up left aligned). Available in Webkit (under a flag).

Improving your site’s visual details: CSS3 text-align-last →