The shifting page layout is a symptom of a broader problem, in that it's impossible to accurately predict or specify the rendered dimensions of text. Even measuring a container after the fact is unreliable because of the arbitrary amount of whitespace in different fonts. You'd have to generate a bitmap image and detect a bounding box around the pixels, which definitely won't help with loading times. This can't be done at development time because different browsers and system configurations all render the same fonts slightly differently. So, even sticking with system fonts to avoid this one symptom, we have this giant elephant in the room making it difficult to ensure anything but the most primitive layouts will be legible across devices.
Seems like it could at least be mitigated on the browser's side though: "This text was at the top of the viewport before the restyling, so let's scroll the document to the point where that text still appears at the top."
Yeah, so it clearly can't solve everything, hence "mitigate" instead of e.g. "completely solve". In any case, I'd argue that 90% of the time it's better than doing nothing at all.
Counting pixels is primitive; accepting text layout variance and making the web page look good with all variants and renderings of any reasonable font is less primitive.
Visually inspecting the output in a handful of environments and hoping it generalizes to all current and future environments, because there is no way to programmatically determine what the environment is actually doing with the content, is primitive. But it works well enough for blogs and shopping carts, so there must not be a problem.
Yes, but isn't it so that the system font is displayed in one step? I mean, if you just have HTML with images with their dimensions specified, I don't think the page will jump around.
Whatever you want to call it when text can barely be read, falls out of alignment, or disapears entirely because a font renders at a fraction or multiple of the size of the desired font, despite being the same "size" in "centimeters" or "pixels" or "ems", or when hair-thin text that looks great on an iRetina is rendered on low-density screens, etc.
