Cuando salió la versión CSS3 se decidió separar o agrupar todas las propiedades en módulos que representan las funcionalidades o a qué partes de la web se aplican. Por ejemplo, tenemos el módulo de Selectors, el cual se dedica a mejorar y desarrollar todos los aspectos de los selectores CSS (pseudoelementos, pseudoclases, etc.).
En esta entrada, me centraré en el módulo que desarrolla las fuentes y todos los aspectos que las controlan. Ese módulo se llama CSS Fonts Module y actualmente el consorcio que genera las recomendaciones y los estándares de crecimiento del la World Wide Web (W3C) lo tiene como REC (recomendación) en su nivel 3 y ha abierto un nivel 4 con nuevas funcionalidades. Por lo que está considerado como estable en la mayoría de los navegadores.
En la entrada anterior te hablé de la propiedad font-family, en las próximas líneas desglosaremos todas las peculiaridades de las propiedades del módulo de fuentes de CSS.
Tabla de contenidos
font-size
Para cambiar el tamaño de fuente tenemos la propiedad CSS font-size. Esta propiedad se puede aplicar a todos los elementos que lleven fuentes.
Para escoger el tamaño de fuente tenemos varias opciones:
<absolute-size><relative-size><lenght - percentage>
<absolute-size>
Tenemos varias palabras clave del lenguaje para este fin [ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>
El navegador interpreta los valores en relación al valor font-size del elemento padre. Las opciones son: [ larger | smaller ]
Si el tamaño de fuente del elemento padre es 'medium', un valor de 'larger' en el elemento hijo hará que éste sea 'large'. Al contrario, si ponemos al elemento hijo 'smaller', el valor final será 'small'.
<length – percentage>
Ésta es la opción más utilizada y específica. Aquí podemos usar píxeles (px), porcentajes (%), y un sin fin de diferentes unidades que veremos en su módulo correspondiente. Ya que el tipo de medidas están englobadas en un módulo llamado CSS Values and Units Module, que evoluciona separadamente del de Fonts.
Normalmente el tamaño del texto no suele indicarse con porcentajes. Lo más usual son los píxeles.
p {
font-size: large;
}
p span {
font-size: larger;
}
h1 {
font-size: 40px;
}
En este ejemplo, el tamaño de la etiqueta <span> será x-large
font-stretch
Esta propiedad permite ampliar o reducir el texto (normal, condensada o expandidad). Esta propiedad no funcionará en todas las fuentes, ya que la fuente tiene que disponer de tipos de ancho variable. Cuando buscamos fuentes en Google Fonts podemos marcar que tengan anchos diferentes. Como ejemplo, la Source Sans Pro y Oswald son fuentes donde sí funcionara la propiedad.
Las opciones disponibles son: [ ultra-condensed | extra-condensed | condensed | semi-condensed | normal | expanded | extra-expanded | ultra-expanded ]
Si la fuente no dispone del ancho especificado se ajustará al ancho más cercano que contenga la fuente.
font-style
La propiedad font-style te permite seleccionar entre tres formas el estilo de fuerte. Los valores son los siguientes:
font-syle: [ normal | italic | oblique ];
No es necesario hablar de la opción normal,italic se refiere cuando la familia de fuente dispone de una versión en italic . Cuando una familia de fuente que no tiene la versión en italic, la forzamos para que se muestre, el resultado será una simulación en oblique, ya que no existe. Siempre es mejor que la familia tenga su versión italic, ya que la fuente no pierde su identidad.
Se puede ver las diferencias entre dos fuentes, la de la letra a (Palatino) y la de la letra N (Baskerville). La de color gris es forzada (oblique), la de su derecha es la auténtica italic.
font-variant
Esta propiedad muestra la fuente entre dos aspectos diferentes. Los dos valores posibles son:
font-variant: [ normal | small-caps ];
La opción small-caps selecciona las típicas versalitas de toda la vida, es decir, son letras mayúsculas con el tamaño de las minúsculas y con proporciones diferentes.
font-size-adjust
Los valores disponibles de esta propiedad son los siguientes:
font-size-adjust: [ <numero> | none | inherit ]
Cuando el valor es none, que es el seleccionado por defecto, el tamaño de fuente será en función de la propiedad font-size.
Cuando colocamos un número, es número representa la cantidad de veces que la letra minúscula sea el tamaño declarado en la propiedad font-size. En el caso de disponer de inherit, mantiene el valor heredado.
font-weight
Esta propiedad especifica el peso o grueso de la letra escogida en la propiedad font-family. Hay que destacar que no todas las fuentes disponen de los valores que se pueden aplicar con font-weight.
Los valores existentes son:
font-weight: [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ];
El valor por defecto es normal, que corresponde a una peso de 400. El valor de bold es 700, y los valores bolder y lighter especifican pesos más marcados y menos marcados respectivamente para los valores heredados.
line-height
Esta propiedad establece la altura de línea, es decir, la distancia desde la parte superior de la primera línea de texto hasta la parte superior de la segunda o espacio entre líneas de párrafos. Es diferente que la propiedad height, que establece la altura del contenedor.
Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta