CODEWITHSUNDEEP
htmlcsssmallcaps
ganar
ganar

Reputation: 691

How to encode small caps for abbreviations using CSS if the font doesn't support this option?

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>

Upvotes: 0

Views: 87

Answers (1)

ganar
ganar

Reputation: 691

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>

Upvotes: 1

Related Questions