CSS: tipografía
CSS y tipografía
La tipografía es la aplicación más básica de CSS, disponible desde la versión 4
de Netscape e Internet Explorer (año 1997).
Aun así, es fácil encontrar sitios que todavía no aprovechan esta posibilidad
(y continúan dependiendo de FONT), o bien manejan la tipografía con CSS
pero de una manera poco eficiente y bastante alejada del espíritu de CSS —mantener
separadas la estructura y la presentación en los documentos.
Fuentes y texto
El control tipográfico ofrecido por CSS 2.1 abarca dos aspectos:
- Selección de fuentes (cap. 15)
- Formato del texto (cap. 16)
Selección de fuentes
Hay cuatro propiedades que intervienen en la selección de una fuente:
font-familyfont-stylefont-variantfont-weight
La propiedad font-family
Toma como valor una lista priorizada de nombres de familias y/o
nombres genéricos de fuentes:
p { font-family: georgia, "times new roman", serif; }
Las familias genéricas son cinco:
- serif (e.g. Georgia, Times New Roman),
- sans-serif (e.g. Arial, Verdana, Tahoma),
- cursive (e.g. Comic Sans),
- monospace (e.g. Courier New).
- fantasy (e.g. WingDings, Symbol),
ATENCIÓN: es importante ofrecer siempre una familia genérica como
última alternativa.
La propiedad font-style
Permite seleccionar entre la forma normal (romana), la itálica y la oblicua
dentro de una misma familia.
Valores posibles: normal | italic | oblique
h1, h2, h3 { font-style: italic; }
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
La propiedad font-variant
Permite seleccionar entre la forma normal y las versalitas (small-caps)
dentro de una misma familia.
Valores posibles: normal | small-caps
p { font-variant: small-caps; }
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
La propiedad font-weight
Valores posibles:
normal | bold
bolder | lighter (relativas al peso heredado desde el elemento padre)
100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
El valor normal corresponde a 400, y bold
a 700.
Para detalles, véase la sección 15.6 de CSS 2.1.
La propiedad font-size
El tamaño de la fuente corresponde al “cuadrado eme” (em square),
un concepto usado en tipografía.
Valores posibles:
<tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
La tabla de tamaños de fuentes
| CSS absolute-size values |
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large |
|
| scaling factor |
3/5 |
3/4 |
8/9 |
1 |
6/5 |
3/2 |
2/1 |
3/1 |
| HTML headings |
h6 |
|
h5 |
h4 |
h3 |
h2 |
h1 |
|
| HTML font sizes |
1 |
|
2 |
3 |
4 |
5 |
6 |
7 |
(Tomada de CSS 2.1.)
Tamaños absolutos y relativos
Un tamaño absoluto es una de estas palabras clave:
xx-small | x-small | small | medium | large | x-large | xx-large
Un tamaño relativo puede tener uno de estos dos valores: larger | smaller,
que son interpretados en relación a la tabla de tamaños y al tamaño de fuente del
elemento padre.
Porcentajes y ems
Los porcentajes se refieren al tamaño de fuente del elemento padre.
Las longitudes expresadas en unidades em se refieren,
en todas las demás propiedades, al tamaño de fuente calculado para el elemento actual.
En cambio, en la propiedad font-size la unidad em
se refiere al tamaño de fuente calculado para el elemento padre.
La propiedad line-height
Valores posibles:
normal | <número> | <longitud> | <porcentaje>
div { line-height: 1.2; font-size: 10pt } /* número */
div { line-height: 1.2em; font-size: 10pt } /* longitud */
div { line-height: 120%; font-size: 10pt } /* porcentaje */
Para detalles, véase la sección 10.8 de CSS 2.1
La propiedad font
Permite hacer una de estas dos cosas:
- especificar en un mismo lugar las seis propiedades
font-style,
font-variant, font-weight, font-size,
line-height, font-family
- especificar una fuente del sistema:
caption | icon | menu | message-box | small-caption | status-bar
ATENCION: las propiedades no especificadas de manera explícita, se establecen en sus valores por defecto.
Problemas de tamaño
- absolute keywords: inconsistencias (IE 5.x)
- pixels: imposible cambiar tamaño en IE
- problemas de herencia
- importancia del tamaño preferido por el usuario
Formato del texto
CSS 2.1 ofrece estas propiedades
text-indent: sangría para la primera líneatext-align: alineación horizontal dentro de un bloquetext-decoration: subrayados y otras decoracionesletter-spacing: espacio entre caracteresword-spacing: espacio entre palabrastext-transform: conversión a mayúsculas/minúsculaswhite-space: tratamiento del espacio en blanco interno
La propiedad text-indent
Se aplica a elementos de nivel bloque y a celdas de tablas. Los valores posibles son:
<longitud> | <porcentaje>
Es posible usar un valor negativo (posiblemente compensado con
un padding-left).
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
La propiedad text-align
Se aplica a elementos de nivel bloque y a celdas de tablas. Los valores posibles son:
left | right | center | justify
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit. Sed consec tetuer dolor in dolor. Mauris sodales dignissim dolor. Integer interdum lacus et sem. Donec euismod, sapien eu consectetuer ornare.
La propiedad text-decoration
Los valores posibles son:
none | [ underline || overline || line-through || blink ]
Ejemplos:
none
underline
overline
line-through
blink
underline overline
El color de la decoración es el mismo de la propiedad color para el texto.
El uso del valor blink está desaconsejado en general.
El uso de underline está desaconsejado para textos que no sean enlaces.
La propiedad letter-spacing
Valores posibles: normal | <longitud>
La longitud indica el espacio que se añade al espacio por defecto
entre caracteres.
letter-spacing: -0.07em
letter-spacing: normal
letter-spacing: 0.1em
letter-spacing: 0.2em
letter-spacing: 0.3em
letter-spacing: 0.4em
La propiedad word-spacing
Valores posibles: normal | <longitud>
La longitud indica el espacio que se añade al espacio por defecto
entre palabras.
En este ejemplo, tenemos word-spacing: -0.1em
En este ejemplo, tenemos word-spacing: normal
En este ejemplo, tenemos word-spacing: 0.1em
En este ejemplo, tenemos word-spacing: 0.2em
En este ejemplo, tenemos word-spacing: 0.3em
En este ejemplo, tenemos word-spacing: 0.5em
La propiedad text-transform
Valores posibles: capitalize | uppercase | lowercase | none
Índice temático alfabético (en español)
Índice temático alfabético (en español)
Índice temático alfabético (en español)
Índice temático alfabético (en español)
Compárese con font-variant: small-caps:
Índice temático alfabético (en español)
Índice temático alfabético (en español)
La propiedad white-space
Valores posibles: normal | pre | nowrap | pre-wrap | pre-line
Lorem ipsum dolor sit amet,
consec tetuer adipiscing elit.
Sed consec tetuer dolor in dolor.
Mauris sodales dignissim dolor.
Integer interdum lacus et sem.
Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet,
consec tetuer adipiscing elit.
Sed consec tetuer dolor in dolor.
Mauris sodales dignissim dolor.
Integer interdum lacus et sem.
Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet,
consec tetuer adipiscing elit.
Sed consec tetuer dolor in dolor.
Mauris sodales dignissim dolor.
Integer interdum lacus et sem.
Donec euismod, sapien eu consectetuer ornare.
Lorem ipsum dolor sit amet,
consec tetuer adipiscing elit.
Sed consec tetuer dolor in dolor.
Mauris sodales dignissim dolor.
Integer interdum lacus et sem.
Donec euismod, sapien eu consectetuer ornare.