0

I have a product named with an acronym and the name of the product is repeated many times on the page.

In Spanish, typographic style rules suggest using acronyms in small-caps, but the font I have does not provide the small-caps option.

What is the best way to code a simulation of small-caps in this case?

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

h1,p{font-family: Nunito;}

h1{font-size: 2em;
font-weight: 600;}

p{font-size: 1em;}
<h1>Cual es el mejor <abbr>SOAP</abbr> para bañar a tu perro</h1>
<p>Bañar a tu perro con <abbr>SOAP</abbr> no debería ser difícil. Sin embargo, es posible que el <abbr>SOAP</abbr> que consigas huela a gato, con lo cual afectes seriamente la personalidad de tu mascota. Es necesario probar el <abbr>SOAP</abbr> que vas a usar sobre tu perro en una persona antes de aplicárselo, asegurándote de que el <abbr>SOAP</abbr> no atraiga otras alimañas. Sigue a la persona a la que engañaste al cambiarle el <abbr>SOAP</abbr> y anota su interacción con otras formas de vida<p>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
ganar
  • 627
  • 8
  • 17

1 Answers1

1

This is a good solution in any context given a font with enough font-weight options.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

h1,p{font-family: Nunito;}

h1{font-size: 2em;
font-weight: 700;}

p{font-size: 1em;
font-weight:300}

abbr{
    font-size: 1.5ex;
    font-weight: bolder;
}
<h1>Cual es el mejor <abbr>SOAP</abbr> para bañar a tu perro</h1>
<p>Bañar a tu perro con <abbr>SOAP</abbr> no debería ser difícil. Sin embargo, es posible que el <abbr>SOAP</abbr> que consigas huela a gato, con lo cual afectes seriamente la personalidad de tu mascota. Es necesario probar el <abbr>SOAP</abbr> que vas a usar sobre tu perro en una persona antes de aplicárselo, asegurándote de que el <abbr>SOAP</abbr> no atraiga otras alimañas. Sigue a la persona a la que engañaste al cambiarle el <abbr>SOAP</abbr> y anota su interacción con otras formas de vida<p>
ganar
  • 627
  • 8
  • 17
  • It turned out interesting with `bolder` and `ex`. But I would prefer `em` since the other properties use it. For example: `font-size: .83em;` – Gleb Kemarsky Nov 26 '21 at 17:07
  • ¡Hey Gleb! the nice thing about using X-height (`ex`) is that it does consider that the size of the lowercase letters is relative to the `font-family` used. `em` would have to adjusted for each font-family, while `ex` works for every `font-family` – ganar Nov 26 '21 at 17:13
  • I think both of these solutions will have to be double-checked on specific fonts and on specific sites. Because one of them is based on the overall font size, and the other on the size of a specific letter in the same font: "1ex ≈ 0.5em in many fonts". https://developer.mozilla.org/en-US/docs/Web/CSS/length – Gleb Kemarsky Nov 26 '21 at 17:21
  • I did test a number of fonts, and the x-height of 1.5ex corresponded to the size of the lowercase, in the main browsers currently in use. I'm publishing this here because it may be of use to someone else, or someone may be able to find an error with a particular font or browser. – ganar Nov 26 '21 at 19:25