CODEWITHSUNDEEP
htmlcsssvg
halfbit
halfbit

Reputation: 3939

is there a "small font" logic in HTML / SVG? (W3C)

Is there a logic to switch to "small fonts" that render better, when in small sizes?

I know, that I can do something like that with JavaScript (jQuery or other), but that isn't the question.

The question is: Is there (for example in CSS) method to tell a browser to switch to "small font typeface" if displayed size < 6px (or so)?

Upvotes: 1

Views: 86

Answers (2)

dlane
dlane

Reputation: 1131

The question is: Is there (for example in CSS) method to tell a browser to switch to "small font typeface" if displayed size < 6px (or so)?

Based on the question, it seems like you'd know if the font size is a certain size. At some point, via CSS or JS, you'd have to set the font size. At the point of applying the font-size, you could apply the new font-family as well.

That said, if you have set that font size, you could use media queries (both horizontal and vertical) to change the font-family as well as font-size.

JSFiddle

As Will and Stephen commented above, you'll need to use your Developer Tools to figure out where the font-size is being applied.

Upvotes: 0

thomaux
thomaux

Reputation: 19718

AFAIK there isn't such an option natively in CSS/HTML, but there are a few mechanics you could implement yourself:

  1. If you have two fonts (a default an a smaller variant) you could add a class on the body tag to switch between font-family
  2. A similar approach is to have all font-sizes expressed in em units and then use a class on the body tag to set the "root" em value. The default is 1.
  3. In case the font-sizes aren't expressed in em units, you could still ue the class and then use inheritance selectors to override the font-sizes. This isn't an approach I would recommend using plain CSS.

To be complete and to make these approaches easier, you could use a CSS preprocessor like LESS or SASS. Define the font-size as a variable and generate two CSS files, one for each font-size. Ofcourse, you should only duplicate the CSS rules that affect the font-size.

Upvotes: 1

Related Questions