Características de la fuente de texto:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.2em;
font-family: arial,sans-serif;
Modo simplificado de representar varias características a la vez (el orden es importante):
font: bold italic small-caps 1em/1.2em arial,sans-serif;
font-family: tipo de fuente.
Variantes principales: Sans-serif (Arial), Serif (Times New Roman), Monospace (Courier New).
Vease ejemplo de visualización de distintas fuentes.
(Imagen de InformIT)
- Serif tiene elementos decorativos en la parte superior e inferior, y sans-serif no. En Monospace cada letra tiene un ancho fijo.
- Si el nombre de la fuente tiene varias palabras, va entre comillas: ‘Times New Roman’.
- A continuación de cada fuente se añade el nombre genérico de la familia: arial, sans-serif.
- Cursive y Fantasy son las otras dos familias pero no se se suelen usar.
- La familia más legible para web es la sans-serif.
- Equivalencias para Mac: Arial - Helvetica, Times New Roman - Times.
- Si observáis diseños profesionales, se suelen exponer una cadena de fuentes de la más concreta hasta la más genérica (incluso las equivalencias en mac) para no dejar nada al azar en la interpretación que da el navegador:
font-family: "Trebuchet MS", arial, helvetica, Sans-serif;
font-size: tamaño de la fuente.
Variantes: medidas absolutas (px), medidas relativas (%, em).
Aunque existen varias formas de indicar el tamaño de la fuente, el método para que se vea de forma similar en distintos navegadores, que el usuario pueda adaptar el tamaño en cualquier navegador, y que se adapte a las distintas resoluciones de pantalla es:
- Fijar en el body el tamaño en porcentaje entre 76 y 100%.
- Y cuando queramos variar el tamaño en contenedores concretos, usar la medida relativa “em”.
body { font-size: 80% }
#titulo { font-size: 1.5em }
.comentario { font-size: 0.9em }
font-style: efecto a la fuente
Variantes principales: normal, italic (cursiva).
font-variant: mostrar todo en mayúsculas, resaltando las mayúsculas iniciales.
Variantes: normal, small-caps.
font-weight: grosor de la fuente.
Variantes principales: normal, bold (negrita).
line-height: altura de la línea.
Variantes: Por lo comentado en el tamaño de la fuente, también es recomendable usar medidas relativas “em”.
Artículos en castellano:
Qué tipo de fuente usar - BlogMundi
Con font todo será más corto. - aNieto2K
Controlando tus fuentes con CSS — yukei.net
Tipo de letra (fuente). CSS. Amaya
Visualizadores de fuentes:
Juglar : Visualización de fuentes
korhoen typeviewer
CSSTYPE
W3C: CSS: fonts
Safe web fonts
Browser News: Font Samples
Code Style: Font sampler
Rich Typography
Technorati tags: fonts, fuentes, css, arial, design, juglar103, Juglar
