Font stacks offer the possibility to suggest an ordered list of fonts a browser should display if it either is installed on the client system or if it is provided via an @font-inclusion over the server – so far so good. But sometimes optical similar fonts have big differences in display size. For example Lucida Grande would be a good choice as a substitute for Calibri. But the difference in size is more than 20%: The word TEST with font-size: 50px; and Calibri is 95px wide whereas it takes 118px with Lucida Grande.
So, here is the question: Is it somehow possible to detect the font which is actually displayed in the browser and adjust the font-size accordingly in CSS? I want to avoid JavaScript on this because it is just a layout problem.
Nice would be something like this:
font: 400 50px/1 'Calibri', 400 40px/1 'Lucida Grande';
or
font-family: 'Calibri', 'Lucida Grande';
font-size: 50px, 40px;
But too bad – this doesn't work!
Edit: This is a "academic" question. I know, I could use JavaScript and I know, I could just buy the web font and quit worrying and get a beer – but I just like to know if somebody has a smart workaround for this!
The answer is NO.
And I could only give the advice not to base your layout on "knowing how width and/ or height" any (text) element/ node would be!
Websites aren't meant to be pixel perfect drawings - it is not print design.
There are so many (unforeseeable) circumstances that may effect the used font and/ or font size, that any attempt to make them as intended, will most probably fail.
The only thing you may try is using Javascript to get the width/ height of an element and to adjust the font-size as long as the size fits your needs.
There are some scripts out there for this. One is FitText