Ediciones ENI Editorial | líder en informática
Los estilos para las fuentes de caracteres
El módulo CSS 3 para las fuentes de caracteres
El formato de las fuentes de caracteres con CSS forma parte de los módulos CSS Fonts Module Level 3, que el W3C ya terminó porque está en estado Recommendation desde el 20 de septiembre de 2018: https://www.w3.org/TR/css-fonts-3/.
Las fuentes de caracteres
1. Elegir una fuente de caracteres
Seleccionar una fuente de caracteres para formatear el texto sigue siendo una cuestión importante en el diseño de sus sitios web. En efecto, siempre es necesario pensar que, aunque una fuente de caracteres esté disponible en su máquina o en la del diseñador gráfico que se ocupa del diseño del sitio web, no tiene por qué estar en todas los máquinas de todos sus futuros visitantes; es imposible saberlo con certeza. Por lo tanto, hay que elegir una fuente de letra cuya presencia esté prácticamente asegurada en las máquinas de los internautas. Estas fuentes de caracteres forman las familias genéricas.
2. Las familias de caracteres genéricas
Tiene a su disposición tres familias genéricas usuales, cuyas fuentes de caracteres están instaladas en la mayoría de las plataformas:
-
La familia de fuentes de longitud fija, con las fuentes de caracteres Courier New para Windows, Courrier para macOS y Monospace para Linux.
-
La familia de fuentes con pie o serifa, con las fuentes de caracteres Times para Windows, Times New Roman para macOS y Serif para Linux.
-
La familia de fuentes de palo seco, con las fuentes de caracteres Arial para Windows, Helvetica para macOS y sans-serif para Linux.
A estas tres familias históricas, se puede agregar dos fuentes de caracteres, especialmente creadas para...
El tamaño de los caracteres
1. Los tamaños por defecto
Para el tamaño por defecto de los caracteres, los navegadores utilizan los valores propuestos por el W3C. Para los párrafos, elemento <p>, y para las citas, elemento <blockquote>, el tamaño de los caracteres por defecto es de 1em, es decir, 16 píxeles. Para el <h1>, es un tamaño de 2em, es decir, 32 píxeles, y para el <h6>, un tamaño de 0,75em, es decir, 12 píxeles.
A continuación se muestra una URL con la que puede conocer todos los tamaños de los caracteres (propiedad font-size) por defecto propuestos por el W3C: https://www.w3.org/TR/CSS21/sample.html
Observe que los valores por defecto son los propuestos por el W3C y que cada navegador es libre de hacer lo que quiera. Por lo tanto, puede que estos tamaños decaracteres varíen un poco de un navegador a otro.
2. Modificar el tamaño de los caracteres
Para modificar el tamaño de los caracteres de un texto, la propiedad CSS utilizada es font-size. Para modificar este tamaño, puede optar por dos tipos de unidades: las unidades relativas y las unidades fijas.
Las unidades fijas son fijas, como su nombre indica, y no se adaptan al tamaño de las pantallas de difusión. Estas unidades son principalmente el píxel (px), el punto (pt), el centímetro (cm) y el milímetro (mm). También tiene toda una serie de tamaños predefinidos que van desde xx-small hasta xx-large. Estas últimas unidades son poco utilizadas, ya que no se adaptan al diseño web responsivo (responsive web design).
A continuación se muestra un primer ejemplo:
<!doctype html>
<html lang=“es”>
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
.pequenio-tamanio {
font-size: 9pt;
}
.gran-tamanio...El formato de los caracteres
1. El peso de los caracteres
Para los tipógrafos, poner el texto en negrita significa otorgar un peso a los caracteres. Con el CSS, se utiliza la propiedad font-weight.
Esta propiedad acepta varios tipos de valores:
-
Los valores nominales: normal para no aplicar negrita, bold para aplicar negrita, bolder para una negrita más marcada que la del elemento padre, y lighter, menos importante que la del padre.
-
Los valores numéricos: de 100 a 900, de menor a mayor peso.
Prácticamente la totalidad de las fuentes de caracteres tienen el estilo negrita (bold), pero no todas tienen variantes para bolder y lighter. Por otra parte, pocas fuentes de caracteres tienen variaciones numéricas de 100 a 900.
A continuación se muestra un ejemplo con la fuente de letra Helvetica Neue, que tiene numerosas variantes de negrita:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
body {
font-family: "Helvetica Neue";
}
.normal {
font-weight: normal; ...La sintaxis de acceso directo
Para más facilidad, puede agrupar todas estas propiedades de tipo font-property en una sola con el acceso directo font.
A continuación se muestra el orden de las propiedades que se debe respetar: font-style | font-variant | font-weight | font-size | font-family.
Cada valor se separa del siguiente por un espacio simple.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
body {
font-size: 1em;
}
.especial-font {
font: italic small-caps 1.5em "Helvetica Neue";
}
</style>
</head>
<body>
<p>Cum sociis natoque penatibus et <span
class="especial-font">magnis dis parturient montes</span>,
nascetur ridiculus mus.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
El módulo CSS 4 para las fuentes de caracteres
El W3C ya trabaja en la próxima versión de CSS para las fuentes de caracteres. El módulo CSS 4 está en estado Working Draft desde el 17 de noviembre de 2020: https://www.w3.org/TR/css-fonts-4/. De momento, tiene la posibilidad de añadir, entre otras, estas propiedades: font-variation-settings y font-optical-sizing.
Como siempre, los módulos en estado Working Draft no deben utilizarse en producción, sino únicamente para realizar pruebas a nivel local.
