Read more

subscript, superscript and line-heights

Bruno Sedler
December 13, 2022Software engineer at makandra GmbH

By default subscript (<sub></sub>) and superscript (<sup></sup>) tags are styled with vertical-align: sub, respectively vertical-align: super by most browsers.
However, without adaptations, this will probably break your line-heights.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

A common suggestion Show archive.org snapshot is to style those two tags accordingly:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;  /* can be adapted according to preferences */
}
sub {  
  top: 0.4em;  /* can be adapted according to preferences */
}

This works and looks good in all relevant browsers. However, it does not work in all relevant e-mail clients, because Gmail, and Outlook don't support the top-property Show archive.org snapshot (as of December 2022)

A good workaround that works in all relevant e-mail clients is to simply set the line-height to 0.

sup, sub {
  mso-line-height-rule: exactly;
  line-height: 0;
}   

Make sure to include mso-line-height-rule: exactly. Otherwise, MS Outlook will treat your line-height as a minimum Show archive.org snapshot and may increase it to its own liking.

Posted by Bruno Sedler to makandra dev (2022-12-13 10:30)