Nowadays I get a lot of designs with vertically centered text in it. Sometimes the text is only a word but it can be multiple lines long too. The problem was, I could not determine, wether the printed text will be broken into multiple lines or not. Luckily, I have found a solution to this problem in pure CSS. This is instantly added to my sitebuilding template for future use.
No matter how surprising it is, there was no solution to change the font size based on the font family. Until now. :)
What is the problem?
I used two different fonts on a webpage. One is a simple Arial, the other is a custom font. The custom font requires a much bigger font size, to get the same result as the Arial.
What needed to be done?
I needed a solution, to change font size CSS properties on some of the elements, if the custom font is loaded. For example IE could not load it, so there should be Arial everywhere, but with a correct font size.
How is it done?
Okay, this worked fine in the project, so lets look at the code: