Ir directamente al contenido de esta página

codexexempla.org

Fuentes y texto

Tabla de contenidos

  1. direction
  2. font
  3. font-family
  4. font-size
  5. font-style
  6. font-variant
  7. font-weight
  8. letter-spacing
  9. line-height
  10. text-align
  11. text-decoration
  12. text-indent
  13. text-transform
  14. unicode-bidi
  15. vertical-align
  16. white-space
  17. word-spacing

direction

Descripción
Indica la dirección de lectura del bloque texto del elemento.
Valores posibles
  • ltr: La dirección de lectura del bloque de texto es de izquierda a derecha.
  • rtl: La dirección de lectura del bloque de texto es de derecha a izquierda.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
ltr.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
Como he dicho, direction indica la dirección de lectura del bloque texto del elemento, pero no la dirección de sus caracteres; controla cuestiones como la situación de la puntuación y el espacio en blanco de una línea corta en el caso de un texto justificado. Por ello, en el ejemplo de abajo hay que prestar atención a estos detalles para no confundir su valor rtl con una simple alineación a la derecha.

Ver ejemplos de los valores de direction.

font [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto de la fuente de un elemento. Reúne los valores de font-family, font-size, font-style, font-variant, font-weight y line-height.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
A diferencia de otras propiedades de conjunto, en ésta el orden de los valores extendidos sí es relevante: el tamaño de la fuente y la familia deben ser las dos últimas propiedades especificadas, y en este orden. Si se va a indicar una altura de línea, ésta va junto al tamaño de fuente tras una barra:

    font: bold small-caps 1em/1.5 "Trebuchet MS","Lucida Grande",Verdana,sans-serif;
                
Como propiedad de conjunto, font tiene la particularidad de que además de los valores de las propiedades específicas, cuenta con un conjunto de valores exclusivos. Se trata de una serie de palabras clave seleccionan el cuerpo, familia, peso y color de la fuente de algunos de los elementos de la interfaz del sistema operativo. Estos valores son:
  • caption: Es la fuente que emplea el sistema operativo para marcar controles, como botones.
  • icon: Es la fuente empleada como etiqueta para iconos.
  • menu: La fuente usaba en los menús, como por ejemplo los desplegables.
  • message-box: La fuente usada en los cuadros de diálogo.
  • small-caption: La fuente usada como etiqueta para controles pequeños.
  • status-bar: La fuente utilizada en las barras de estatus de las ventanas.

Ver ejemplos de los valores de font.

font-family

Descripción
Especifica la fuente del texto de un elemento.
Valores posibles
  • Una lista de fuentes: Se puede indicar una fuente concreta —entrecomillada cuando conste de varias palabras separadas por espacios en blanco, como por ejemplo "Times New Roman", y respetando mayúsculas y minúsculas de su nombre— o un tipo genérico. Se pueden añadir todas las fuentes que se desee, por orden de preferencia y separadas por comas. Para que la CSS valide, la última elección debe ser un tipo genérico de los cinco disponibles: serif, con serifa, o remates decorativos en los extremos de los trazos; sans-serif, sin serifa, o «de palo seco»; monospace, monoespaciada, es decir, con un ancho de caja igual para todo caracter; cursive, a imitación de la escritura a mano; fantasy, diseños que no encajan en las clases anteriores, por lo general iconos, símbolos, o tipos ornamentales.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
La fuente por defecto especificada en el agente de usuario.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
Con respecto a las fuentes, a la hora de especificar una concreta, hay que tener en cuenta que la lista de fuentes disponibles en el lado del usuario depende de las que este haya decidido instalar o eliminar. Hace años, Microsoft promocionó una serie de fuentes como universales, el llamado font core. Por desgracia, lo que Microsoft consideraba universal era pedir al resto de desarrolladores de aplicaciones y sistemas operativos que incluyeran varias de sus propias fuentes en los productos que sacaran al mercado, por lo que la propuesta no prosperó demasiado. No obstante, el font core sí está presente por defecto en los productos desarrollados por Microsoft, por lo que es muy probable que un usuario medio las tenga instaladas.
El font core está constituido por las fuentes siguientes:
  • serif: Georgia, Georgia Italic, Georgia Bold, Georgia Bold Italic, Times New Roman, Times New Roman Italic, Times New Roman Bold, Times New Roman Italic Bold.
  • sans-serif: Arial, Arial Italic, Arial Bold, Arial Italic Bold, Arial Black, Impact, Trebuchet MS, Trebuchet MS Italic, Trebuchet MS Bold, Trebuchet MS Bold Italic, Verdana, Verdana Italic, Verdana Bold, Verdana Bold Italic.
  • monospace: Andale Mono, Courier New, Courier New Italic, Courier New Bold, Courier New Bold Italic.
  • cursive: Comics Sans MS, Comics Sans MS Bold.
  • fantasy: Webdings.
Aparte de esto, Dave Shea propone una lista de las fuentes más comunes en las que confiar —The Zen of CSS Design, pg. 170—, no limitada sólo a la elección para Windows:
La lista de fuentes comunes de Dave Shea
Windows Macintosh Linux/UNIX
serif Book Antiqua, Bookman Old Style, Garamond New York Palatino, Times Bitstream Vera Serif, New Century Schoolbook, Times, Utopia
sans-serif Arial narrow, Century Gothic, Lucida Sans Unicode, Tahoma Charcoal, Chicago, Geneva, Helvetica, Lucida Grande Bitstream Vera Sans, Helvetica, Lucida
monospace Courier, Lucida Console Courier, Monaco Bitstream Vera Mono, Courier

Ver ejemplos de los valores de font-family.

font-size

Descripción
Indica el tamaño de la fuente del elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al tamaño de la fuente del elemento padre.
  • xx-small: : Es un tamaño de fuente más pequeño establecido por el navegador.
  • x-small: Es un tamaño de fuente establecido por el navegador que es bastante más pequeño que el tamaño por defecto de la fuente.
  • small: Es un tamaño de fuente establecido por el navegador que es un poco más pequeño que el tamaño por defecto de la fuente.
  • medium: El tamaño por defecto de la fuente de un navegador. En los navegadores actuales por defecto suele ser 16 píxeles.
  • large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño medium por un factor, por lo general 1.5.
  • x-large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño large por un factor, por lo general 1.5.
  • xx-large: Es un tamaño de fuente establecido por el navegador que suele ser el resultado de multiplicar el tamaño x-large por un factor, por lo general 1.5.
  • smaller: Indica que el tamaño de la fuente es de un tamaño anterior al establecido con las palabras clave anteriores en el elemento padre.
  • larger: Indica que el tamaño de la fuente es de un tamaño posterior al establecido con las palabras clave anteriores en el elemento padre
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
Los valores de la lista desde xx-small a xx-large son en realidad valores absolutos, puesto que independientemente de lo establecido en la hoja de estilo, se calculan siempre con respecto al tamaño por defecto de la fuente en el navegador. Así, si la fuente por defecto tiene un tamaño de 16 píxeles, medium asignará ese tamaño al texto del elemento, aun en el caso de que el elemento padre del mismo tenga en la hoja de estilo un font-size de 12 píxeles.
En el caso de smaller y larger, se trata de unidades relativas, e indican un nivel inferior o superior en la lista de palabras claves de valores absolutos. Así, si el tamaño de fuente de un elemento se especifica como small, un hijo al que se asigne larger presentará el tamaño equivalente a medium.

Ver ejemplos de los valores de font-size.

font-style

Descripción
Indica el estilo de los tipos de la fuente especificada para el elemento.
Valores posibles
  • normal: Es el aspecto inicial recto de la fuente.
  • italic: Selecciona una variedad de la fuente diseñada específicamente como cursiva, si ésta existe en la familia de fuente.
  • oblique: Los caracteres de la fuente se presentan inclinados, pero no es una auténtica cursiva tipográfica, sino el resultado de cálculos llevados a cabo por el navegador para deformar el tipo recto.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
En la imagen siguiente se aprecia mejor la diferencia entre una auténtica cursiva y una fuente meramente deformada, especialmente en el diseño de las serifas y las vocales:
Ejemplos de la fuente Times New Roman, normal, itálica y oblicua

Ver ejemplos de los valores de font-style.

font-variant

Descripción
Indica si el texto del elemento debe representarse en versalitas o no.
Valores posibles
  • normal: Las mayúsculas y minúsculas del texto se mantienen tal y como aparecen en el código.
  • small-caps: Las mayúsculas del texto se presentan como mayúsculas, pero las minúsculas se presentan como versalitas.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.

Ver ejemplos de los valores de font-variant.

font-weight

Descripción
Indica el peso o grosor de las letras del texto del elemento.
Valores posibles
  • normal: Es el peso inicial de la fuente.
  • bold: Indica que el texto debe presentar un peso mayor; es lo que solemos llamar negrita.
  • 100-900: Indica diferentes grosores —siempre múltiplos de 100— para una fuente en concreto. El valor equivalente a normal suele ser 400, y el bold 700.
  • bolder: Indica que el texto debe presentar un grosor equivalente al siguiente grado de la escala de valores numerados que el del elemento padre.
  • lighter: Indica que el texto debe presentar un grosor equivalente al anterior grado de la escala de valores numerados que el del elemento padre.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
Los valores disponibles entre 100 y 900 dependerán de los creados por el diseñador de la fuente. En general, son pocas las fuentes para las que se han diseñado tipos de nueve grosores diferentes, por lo que la especificación indica como se asignan los valores (inglés):
  • Si la familia de fuente cuenta ya con nueve grosores ordenados según una escla numérica, aquí paz y después gloria: el mapeado se hace directamete identificando la escala con los valores del 100 al 900.
  • En caso de que no existan nueve grosores:
    • Si alguno de los tipos se identifica por medio de Book, Regular, Roman, Normal o Medium, ese se asigna a 400.
    • Si alguno de los tipos se identifica como Medium, y además hay alguno identificado como Book, Regular, Roman o Normal, entonces Medium se asigna a 500.
    • Si alguno de los tipos se identifica como Bold, se asigna a 700.
    • Si tras todo lo anterior aún no se ha asignado el valor 500, se asigna al mismo tipo que ya tenga asignado 400; los valores de 600, 700, 800 o 900 no asignados se asimilan al tipo siguiente de mayor peso si existe, o al peso anterior en caso contrario; los valores de 100, 200 o 300 no asignados se asimilan al tipo de menor peso anterior si existe, o al siguiente mayor en caso contrario.
Simple, ¿verdad?

Ver ejemplos de los valores de font-weight.

letter-spacing

Descripción
Indica la cantidad de espacio que debe añadirse entre los caracteres del texto de un elemento.
Valores posibles
  • Una medida absoluta o relativa. El valor indicado se añade a aquel con que cuenta por defecto la fuente elegida.
  • normal: Es el valor de interletrado que por defecto tenga la fuente seleccionada.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.

Ver ejemplos de los valores de letter-spacing.

line-height

Descripción
Indica la cantidad de espacio mínima que debe haber entre las líneas de base de las líneas del texto de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al tamaño de la fuente del propio elemento. Los valores no pueden ser negativos1.
  • Un valor sin unidades: En este caso se considera que el número es un factor por el que multiplicar el tamaño de fuente, y cuyo resultado es el alto de línea. El número no puede ser negativo.
  • normal: El valor por defecto especificado en el agente de usuario. La especificación dice que debería ser uno razonable, entre 1 y 1.2 veces el tamaño de fuente.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
El tamaño asignado a line-height se divide entre dos para repartirse equitativamente sobre y debajo de una línea. Así, line-height:10px crearía un espacio de separación de 5 píxeles encima y debajo de los caracteres.

Ver ejemplos de los valores de line-height.

text-align

Descripción
Indica la alineación del texto dentro del elemento.
Valores posibles
  • left: Alinea un bloque de texto a la izquierda.
  • right: Alinea un bloque de texto a la derecha.
  • center: Centra un bloque de texto.
  • justify: Justifica un bloque de texto.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
left, aunque depende también de la propiedad direction: si se ha especificado ltr, y no se ha especificado la alineación, ésta será left; si en el mismo caso se ha especificado rtl, será right.
Aplicable a
Elementos de bloque, celdas, y bloques en línea.
¿Heredada?
Sí.

Ver ejemplos de los valores de text-align.

text-decoration

Descripción
Especifica efectos decorativos para el texto del elemento.
Valores posibles
  • none: Especifica que el texto no debe presentar decoración alguna.
  • underline: Especifica que el texto debe aparecer subrayado.
  • overline: Especifica que el texto debe presentarse bajo una línea.
  • line-through: Especifica que el texto debe presentar una línea que lo cruce sobre su eje horizontal, como tachándolo.
  • blink: El texto debe parpadear. Sí, aunque el elemento se ha depreciado, y en una demostración de buen gusto muchos navegadores modernos ya no lo soportan, existe como propiedad de estilo (inglés).
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
Parcialmente.
Notas
El color de las líneas decorativas es el mismo aplicado al elementos.
Esta propiedad se hereda para los descendientes siempre y cuando no se trate de elementos flotados o posicionados de manera absoluta.
Se aplica al texto del elemento incluyendo espacios en blanco, interletrado y separación de palabras.

Ver ejemplos de los valores de text-decoration.

text-indent

Descripción
Indica una sangría que se aplica a la primera línea de texto del elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al ancho del bloque contenedor.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Elementos de bloque, celdas y bloques en línea.
¿Heredada?
Sí.

Ver ejemplos de los valores de text-indent.

text-transform

Descripción
Especifica el caso —en tipografía tradicional caja— en que debe presentarse el texto del elemento.
Valores posibles
  • none: El texto presenta las mayúsculas y minúsculas originales.
  • capitalize: La inicial de cada palabra del bloque de texto aparece en mayúscula.
  • lowercase: Todas las letras se representan como minúsculas.
  • uppercase: Todas las letras se representan como mayúsculas.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.

Ver ejemplos de los valores de text-transform.

unicode-bidi

Descripción
Especifica la dirección de un texto que haya de ser anidado dentro de otro texto cuyo idioma tenga una dirección natural distinta.
Valores posibles
  • normal: El elemento no crea un nivel adicional de anidamiento con respecto a la dirección intrínseca del texto del elemento padre.
  • embed: El elemento crea un nivel adicional de anidamiento con respecto a la dirección intrínseca del texto del elemento padre.
  • bidi-override: Indica que la dirección del texto debe ser la especificada en la propiedad direction, independientemente de la dirección intrínseca que esté especificando el algoritmo de bidireccionalidad.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
Esta propiedad tiene sentido en contexto en los que un texto se presenta en el contexto de un idioma diferente.
La dirección en la que se presenta un texto viene definida por el idioma natural del documento en cuestión, pero en medios digitales es un algoritmo, el BiDi I18N, definido por Unicode (inglés), y que especifica la dirección intrínseca del texto, por ejemplo de izquierda a derecha para idiomas europeos o de derecha a izquierda para árabe o hebreo.
Es un tema tal vez demasiado denso para el desarrollador web medio —tipo al que pertenezco—, pero si alguien tiene interés puede encontrar más información siguiendo estos vínculos:

Como en el caso de direction, no resulta fácil apreciar las diferencias entre los diversos valores de la propiedad. En el caso de unicode-bidi es aún más difícil, puesto que hace referencia a cómo se debe aplicar el algoritmo BiDi I18N, pero no tiene efecto alguno sobre el texto a menos que en el estilo se defina adicionalmente para el elemento la propiedad direction. Es por ello por lo que no presento aquí ejemplo de esta propiedad.

vertical-align

Descripción
Indica la alineación vertical de un elemento en línea con respecto a una línea de base o con respecto a un elemento de bloque que lo contenga.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la altura de línea del propio elemento. Los valores se miden respecto a la línea de base del texto del elemento padre, los positivos por encima, los negativos por debajo.
  • baseline: Alinea la línea de base del elemento con la línea de base del elemento padre.
  • sub: Alinea la línea de base del elemento con la posición apropiada para un subíndice.
  • super: Alinea la línea de base del elemento con la posición apropiada para un superíndice.
  • text-bottom: Alinea la arista inferior de la caja del elemento con la arista inferior de la caja del elemento padre.
  • text-top: Alinea la arista superior de la caja del elemento con la arista superior de la caja del elemento padre.
  • middle: Alinea el punto medio de la altura de la caja del elemento con la línea de base del elemento padre a la que se suma la mitad de su altura de x2.
  • bottom: En el contexto de un elemento en línea con diversos descendientes con diversas alineaciones verticales, alinea verticalmente la arista inferior de la caja del elemento al que se aplique esta propiedad con la arista inferior del elemento situado más abajo.
  • top: En el contexto de un elemento en línea con diversos descendientes con diversas alineaciones verticales, alinea verticalmente la arista superior de la caja del elemento al que se aplique esta propiedad con la arista superior del elemento situado más arriba.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
baseline.
Aplicable a
Elementos en línea y celdas.
¿Heredada?
No.
Notas
Si se aplica a una celda, sólo son válidos los valores baseline, top, middle y bottom.

Ver ejemplos de los valores de vertical-align.

Como creo que es al principio cuesta comprender las diferencias de los valores representados por las palabras clave de esta propiedad, añado ejemplos planos que tal vez clarifiquen un poco más.

white-space

Descripción
Indica cómo debe tratar el navegador los espacios en blanco incluidos en el código del documento para un elemento.
Valores posibles
  • normal: Al representar el texto, los espacios en blanco presentes en el código se colapsan en uno, y los saltos de línea se ignoran; las líneas se establecen según los límites de la caja que contenga el texto.
  • pre: Al representar el texto, los espacios en blanco se conservan, y los saltos de línea coinciden con los presentes en el código.
  • nowrap: Los espacios en blanco se colapsan, los saltos de línea se ignoran, pero además no se crean saltos de línea al alcanzar el límite de la caja, es decir, todo el texto del elemento aparece en una sola línea.
  • pre-wrap: Los espacios en blanco se preservan, se mantienen los saltos de línea presentes en el código y además se crean saltos de línea nuevos para ajustar el texto a su caja.
  • pre-line: Los espacios en blanco se colapsan, aunque se mantienen los saltos de línea presentes en el código y se crean otros nuevos para ajustar el texto a su caja.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
A diferencia del elemento pre de XHTML, white-space no presenta por defecto el texto en una fuente monoespaciada.

Ver ejemplos de los valores de white-space.

word-spacing

Descripción
Especifica la cantidad de espacio que debe incluirse entre las palabras del texto de un elemento.
Valores posibles
  • Una medida absoluta o relativa.
  • normal
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
normal.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.

Ver ejemplos de los valores de word-spacing.

Notas

  1. Esto no significa que no se pueda aplicar un interlineado negativo —aunque deba hacerse con cuidado para que los descendentes y ascendentes de líneas consecutivas no se solapen—, sólo que para hacerlo hay que aplicar un factor que sea menor que 1, por ejemplo line-height:0.85. Volver
  2. La altura de x de una línea de texto es la altura que ocupan los cuerpos de sus caracteres para una fuente determinada, sin contar ascendentes ni descendentes. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2014 Mapa del sitio | XHTML | CSS | AA