Specifying Different Font-Sizes for Different Font-Families

Assigining different font-size per each font in one font-family

You cannot set font size so that it would depend on the font family.

Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).

If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.

css different font sizes on different families

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

CSS specify font-size for each font in font-family?

Consider supplying similar fonts as alternatives. For instance:

font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;

That way, the alternative font won't make the layout break.

Fonts inside a font family display different in size

What you are looking for is the font-size-adjust property — a nearly perfect solution to this problem. Of course, browser support is terrible: it only works on Firefox.

Here's an example (open in Firefox): http://jsfiddle.net/zL6vL/1/

CSS: Specific fonts for different sizes

Not possible with font-face, but possible with LESS using mixins and guards. As you can see, you need to define your font sizes slightly different - but that's it. Font-family declarations are based off this value.

I would highly recommend transitioning to LESS (or SASS). LESS runs client side, but there are ways to compile it server side and deliver it as CSS. See Compile a referenced LESS file into CSS with PHP automatically

.fontSize (@a) when (@a >= 100) {
    font-family: Impact, Charcoal, sans-serif;
}
.fontSize (@a) when (@a < 100) {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.fontSize (@a) {
    font-size: @a;
}

.cs {
    .fontSize(50px) 
}
.imp {
    .fontSize(110px)      
}

---

<div class="cs">comic sans font family</div>    

<div class="imp">Impact font family</div>

How to set different sizes for individual fonts in CSS?

Katex uses a default font size of 1.2xem where em is the size of the em of the surrounding text's font. i.e. it renders slightly bigger to help make sub and superscripts more readable.

The problem in the question is that therefore the equations' font size changes with the various fonts in use, one of which renders naturally smaller than another so needs to have its size increased - thus making the equations too large.

It is possible to fix the Katex font size, making it independent of the surrounding text's size, by including a font-size setting in the head of the document.

This may of course cause a different problem, for example if it was required to have much smaller Katex in a footnote so I am not sure it is a full answer to the question. Here's the snippet in case the code is useful for trying different settings out.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  <style>
  .katex {
    font-size: 20px;
  }
  
  p {
  margin: 20px;
  }
  </style>
  </head>
  <body>

  <div style="text-align:center;font-size: 20px;">
  The equations' font-size has been set by including:<br><p style="text-align:center"><style>
  .katex {
    font-size: 20px;
  }
  </style></p> in the head of the document after everything else.
  
    <br>-------------------
  
    <p style="font-size: 20px;">
      This text has font-size: 20px and here is the equation 
      <div id="eqn1" style="text-align: center;"></div>
    </p>
    -------------------
    <p style="font-size: 16px;">
      This text has font-size: 16px but the equation size is the same as above
      <div id="eqn2" style="text-align: center;"></div>
    </p>
  </div>

  <script>

  function start() {
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn1"), {
    throwOnError: false
    });
  
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn2"), {
    throwOnError: false
    });
  }
  window.onload=start;
  </script> 
  </body>
</html>

---

Related Topics