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;
line-height:1em;
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>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;
line-height:1em;
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>