1

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!
AvL
  • 3,083
  • 1
  • 28
  • 39
  • 1
    What you are looking for is `font-size-adjust` though, not much support, better go for JavaScript solution – Mr. Alien Feb 15 '14 at 20:36

1 Answers1

0

Is it somehow possible to detect the font which is actually displayed in the browser and adjust the font-size accordingly in CSS?

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

Netsurfer
  • 5,543
  • 2
  • 29
  • 34
  • 1
    I am not trying to be "pixel perfect", but 20% difference is a lot. I have written such scripts myself in a couple lines (no need for bloated frameworks like jQuery). But I was wondering if there is a pure CSS solution? – AvL Feb 15 '14 at 20:59
  • @AvL Fine. Yes, the differences can be enormous. But imho this is still an unsolved problem in web design. There are some properties in CSS like e.g. [font-size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust). But this doesn't really help you, as long as you don't know which font is used by the brwoser in the end. So using some alternative fonts which do not have such big differences like the ones in your example might increase chances ...! – Netsurfer Feb 15 '14 at 21:10
  • Actually (like so many times) Microsoft is causing this very problem: Changing their default sans-serif fonts in Office from `Arial` to `Calibri` and not matching the font-size is negligently. A lot of small businesses just use those fonts for their business cards and demand the same font on the website… – AvL Feb 15 '14 at 21:25
  • 1
    Have you seen:"In 2013, as part of Chrome, Google released a freely-licensed font called Carlito, which is metric-compatible to Calibri (i.e. can replace it in a document without changing the layout)."? (from: http://en.wikipedia.org/wiki/Calibri#Availability) – Netsurfer Feb 15 '14 at 22:28