Is there a way to import a font at a larger or smaller size relative to other fonts?

Question

I'm working on a site which uses one font for most locales, in Japan the site uses a specific font for Japanese characters, both are imported using the @font-face rule and a controlled using the font stack, the Latin font does not contain Japanese characters so the Japanese font is used instead.

@font-face {
  font-family: "Latin-font";
  src: url("./latin-font.woff") format("woff");
}
@font-face {
  font-family: "Japanese-font";
  src: url("./japanese-font.woff") format("woff");
}

body {
    font-family: "Latin-font", "Japanese-font", sans-serif;
}

These characters are often mixed throughout the site, we might have the text for example: Fooフーbarバー. Our designers have noticed that, due the to the fonts that we are using, the size of the Latin characters is disproportionate to the Japanese characters. They would like all Latin characters to be displayed slightly larger across the site.

Here is a visual example of what they would like:

screenshot of before and after showing Latin characters increased by 120%

To achieve this I have wrapped the Latin characters in a span, which works here for demonstration but with the number of individual contributors to the site, it would be impossible to achieve this at scale. Instead it would be best if the fonts were imported at a specific size if possible.

I have tried looking through MDN documentation and tried a few prototypes with properties like font-stretch and font-variation-settings but I have not been able to make one font larger than the other.

Is there any way to achieve this? The only option I can see right now would be to make updates to the font file itself, increasing the size of each character.

kennethormandy kennethormandy · Accepted Answer · 2020-12-28T16:29:40

I think you’ve done a good job of assessing this already. You could:

choose a type family that was designed to handle both Japanese and Latin glyphs, or
try and create the language-based spans in code as part of your CMS or build process, or
try and modify the font itself, if your license allows this

Option 1

If the site you’re working on is going to have a lot of Japanese and Latin text together, the best way to solve this would probably be to switch to a type family that can handle both Latin and Japanese. Then, things like the weight and line height metrics will also match in addition to the relative size of the glyphs.

Option 2

font-size-adjust was intended for this sort of situation, but in practice it only really works in Firefox on desktop at the time of writing: https://caniuse.com/font-size-adjust The MDN page is a little misleading, as it is behind a feature flag for most browsers.

Even when that is supported, you might still need spans as you’ve described it.

Depending on your CMS or build process, you could try doing that with a library like this: https://github.com/patrickschur/language-detection

Your situation also sounds similar to this answer, where you are only looking to differentiate between a finite amount of languages: https://stackoverflow.com/a/22403736

Using those, you’d generate the spans you need, without your authors having to think about it.

Option 3

Try and modify the font itself, if your license allows this. You might need to open a dedicated question for this, as it will depend a lot on the format of the source files you have access to. As an example, here’s a quick outline of what it would like like to make this modification in FontForge. That also depends on having access to the source files, with an open source license for the fonts or other license that allows derivate works.

Is there a way to import a font at a larger or smaller size relative to other fonts?

2 Answers

Option 1

Option 2

Option 3