Every so often a client points at a price or a phone number and says the digits look "off," like they are bouncing up and down instead of sitting in a neat row. It is rarely a layout bug. Most fonts ship two sets of numerals: lining figures, which are all the same height and sit on the baseline like the ones in a table, and old-style figures, which have ascenders and descenders designed to blend into running text. Some fonts default to the old-style set in places you would not expect, like prices or tables, and that is the bouncing you are seeing.
The fix
The fix is a single CSS rule that forces the lnum OpenType font feature, which tells the browser to use the lining numerals instead of whatever the font defaults to:
.yourclass {
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}How to use it
Give the element a class, then add the rule for that class to your stylesheet. In WordPress that can go under Appearance > Customize > Additional CSS, or in Elementor directly on the element's Custom CSS panel, scoped to selector so it only applies there.
One catch
This only works if the font actually includes lining figures as an OpenType feature, which is true of most modern web fonts but not a given. If the numbers do not change after applying it, the font itself is the limit, not the CSS.
Full source on GitHub: djaysan/digit-alignment-fix. Spotted uneven numbers somewhere on your own site? Get in touch and I will take a look.