css different font sizes on different families

by

There is a way to do this, but it’s as of now very badly supported. The CSS property you are looking for is font-size-adjust – a new CSS3 property introduced specifically to address this problem. The specification says:

In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.

However, it is only supported in Firefox as of now, so you might want to look for alternatives.

For examples of how to use it, see:

http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

More Related Contents:

  1. Transparent text cut out of background
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Same font except its weight seems different on different browsers
  4. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  5. How to import Google Web Font in CSS file?
  6. Wait for fonts to load before rendering web page
  7. What does the forward slash mean in the CSS font shorthand?
  8. Why should we include ttf, eot, woff, svg,… in a font-face
  9. Is there any “font smoothing” in Google Chrome?
  10. Downloading a Google font and setting up an offline site that uses it
  11. How can I determine what font a browser is actually using to render some text?
  12. Create webfont with Unicode Supplementary Multilingual Plane symbols
  13. How is font size calculated?
  14. CSS: bolding some text without changing its container’s size
  15. Converting and rendering web fonts to base64 – keep original look
  16. Font size in CSS – % or em? [duplicate]
  17. Webfont Smoothing and Antialiasing in Firefox and Opera
  18. Webpack “OTS parsing error” loading fonts
  19. Fonts looks different in Firefox and Chrome
  20. Why would font names need quotes?
  21. Make text height 100% of div?
  22. Non-Standard fonts in web?
  23. How to add fonts to create-react-app based projects?
  24. When setting a font-size in CSS, what is the real height of the letters?
  25. Forcing anti-aliasing using css: Is this a myth?
  26. Font weight turns lighter on Mac/Safari
  27. How to prevent different browsers rendering fonts differently?
  28. How do I style a specific word with CSS in an HTML element?
  29. How to add a custom font to Rails app?
  30. -webkit-font-smoothing property has no effect in Chrome

Leave a Comment