Fluid Superscripts and Subscripts

Superscripts and subscripts are important components in tutorial and scientific content material — from quotation references to chemical formulation and mathematical expressions. But browsers deal with these components with a static method that may create vital issues: components turn into both too small on cell gadgets or disproportionately massive on desktop shows.

After years of wrestling with superscript and subscript scaling in CSS, I’m proposing a contemporary answer utilizing fluid calculations. On this article, I’ll present you why the static method falls brief and the way we will present higher typography throughout all viewports whereas sustaining accessibility. Better of all, this answer requires nothing however clear, pure CSS.

The issue with static scaling

The scaling concern is especially evident when evaluating skilled typography with browser defaults. Take this instance (tailored from Wikipedia), the place the primary “2” is professionally designed and included within the glyph set, whereas the second makes use of <sub> (prime) and <sup> (backside) components:

Browsers have traditionally used font-size: smaller for <sup> and <sub> components, which interprets to roughly 0.83x scaling. Whereas this made sense within the early days of CSS for easy paperwork, it may create issues in trendy responsive designs the place font sizes can differ dramatically. That is very true when utilizing fluid typography, the place textual content sizes can scale easily between extremes.

Fluid scaling: A greater answer

I’ve developed an answer that scales extra naturally throughout totally different sizes by combining fastened and proportional models. This method ensures legibility at small sizes whereas sustaining correct proportions at bigger sizes, eliminating the necessity for context-specific changes.

Right here’s the way it works:

sup, sub {
font-size: calc(0.5em + 4px);
vertical-align: baseline;
place: relative;
prime: calc(-0.5 * 0.83 * 2 * (1em – 4px));
/* Simplified prime: calc(-0.83em + 3.32px) */
}

sub {
prime: calc(0.25 * 0.83 * 2 * (1em – 4px));
/* Simplified prime: calc(0.42em – 1.66px) */
}

Pure scaling: The degressive formulation ensures that superscripts and subscripts stay proportional in any respect sizes

Baseline alignment: Through the use of vertical-align: baseline and relative positioning, we forestall the weather from affecting line peak and it offers us higher management over the offset to match your particular wants. You’re in all probability additionally questioning the place the heck these values come from — I’ll clarify within the following.

Breaking down the mathematics

Let’s have a look at how this works, piece by piece:

Calculating the font measurement (px)

At small sizes, the fastened 4px part has extra affect. At massive sizes, the 0.5em proportion turns into dominant. The result’s extra pure scaling throughout all sizes.

sup, sub {
font-size: calc(0.5em + 4px);
/* … */
}

sub {
/* … */
}

Calculating the mother or father font measurement (em)

Throughout the <sup> and <sub> components, we will calculate the mother or father’s font-size:

sup, sub {
font-size: calc(0.5em + 4px);
prime: calc(2 * (1em – 4px));
}

sub {
prime: calc(2 * (1em + 4px));
}

The fluid font measurement is outlined as calc(0.5em + 4px). To compensate for the 0.5em, we first want to resolve 0.5em * x = 1em which provides us x = 2. The 1em right here represents the font measurement of the <sup> and <sub> components themselves. We subtract the 4px fastened part from our present em worth earlier than multiplying.

The vertical offset

For the vertical offset, we begin with default CSS positioning values and regulate them to work with our fluid scaling:

sup, sub {
font-size: calc(0.5em + 4px);
prime: calc(-0.5 * 0.83 * 2 * (1em – 4px));
}

sub {
prime: calc(0.25 * 0.83 * 2 * (1em – 4px));
}

The formulation is fastidiously calibrated to match commonplace browser positioning:

0.5em (tremendous) and 0.25em (sub) are the default vertical offset values (e.g. utilized in frameworks like Tailwind CSS and Bootstrap).

We multiply by 0.83 to account for the browser’s font-size: smaller scaling issue, which is used per default for superscript and subscript.

This method ensures that our superscripts and subscripts keep acquainted vertical positions whereas benefiting from improved fluid scaling. The end result matches what customers count on from conventional browser rendering however scales extra naturally throughout totally different font sizes.

Useful ideas

The precise scaling issue font-size: (0.5em + 4px) is predicated on my evaluation of superscript Unicode characters in widespread fonts. Be happy to regulate these values to match your particular design wants. Listed below are a couple of methods the way you may need to customise this method:

For bigger scaling:

sup, sub {
font-size: calc(0.6em + 3px);
/* regulate offset calculations accordingly */
}

For smaller scaling:

sup, sub {
font-size: calc(0.4em + 5px);
/* regulate offset calculations accordingly */
}

For backward compatibility, you may need to wrap all of it in a @helps block:

@helps (font-size: calc(1em + 1px)) {
sup, sub {
…
}
}

Last demo

I constructed this small interactive demo to indicate totally different fluid scaling choices, evaluate them to the browser’s static scaling, and fine-tune the vertical positioning to see what works finest to your use case:

Give it a strive in your subsequent mission and blissful to listen to your ideas!

Fluid Superscripts and Subscripts initially revealed on CSS-Methods, which is a part of the DigitalOcean household. You need to get the publication.