Familias de Fuentes de Sistema
Debido a que la internet se conoce como un hipermedio, se debe evitar cualquier descarga de información no relevante de manera que el acceso a la información sea lo más rápido posible. Los archivos de Fuentes Tipográficas suelen ser archivos que suman peso a los documentos HTML y dependiendo de las variaciones de fuentes que se usen el tamaño se puede incrementar de manera importante.
Fuentes seguras para la Web
Las fuentes seguras para la Web o ‘Web-Safe Fonts’, son archivos de fuentes comunes que se pueden encontrar de manera pre-instalada en la mayoría de los dispositivos con pequeñas o ninguna variación entre sistemas operativos Windows, MacOS, Linux, Android…
La fuente más famosa es Verdana, debido a que esta fuente se diseñó especialmente para poder ser leída en monitores y es por esto la fuente más usada en la Web.
De manera predeterminada el navegador escoje una fuente para mostrar los textos de los documentos HTML, usualmente es Times New Roman. Para cambiar la fuente usamos una declaración global, una declaración en las reglas del body, de manera que de manera jerarquica esta se aplique al documento visible:
body{
font-family: Verdana, Arial, sans-serif;
}
La definición de la familia de fuentes se realiza usando multiples fuentes como alternativa, de manera que si la primera opción no se encuentra en el sistema, pasara a la siguiente y por ultimo si no encuentra ninguna deja que el sistema coloque la fuente predeterminada de acuerdo al tipo.
font-family: Georgia, "Times New Roman", Times, serif;Los nombre de Fuentes que contengan varias palabras se deben colocar entre comillas.
Familias de Fuentes Externas
Hoy en día además de usar las tradicionales fuentes de sistema, se pueden usar fuentes externas, ya sea fuentes web o fuentes que se alojen directamente en el sitio web. Recuerden los archivos de Fuentes Tipográficas suelen ser archivos que suman peso a los documentos HTML y dependiendo de las variaciones de fuentes que se usen el tamaño se puede incrementar de manera importante.
Los archivos de fuentes que soportan los navegadores son *.eot, *.woff y *.ttf, dependiendo de cada navegador soportaran uno u otro.
Fuentes de Servicios Externos
Si se usan los servicios de Google se puede usar un ‘link’ estándar para vincular las fuentes que queremos usar en el proyecto. Si usamos otro servicio o incluso Google también da esa opción, se deben descargar los archivos de la fuente y vincularlos por medio de CSS.
FontSquirrel:
Google Fonts:
Vincular fuentes desde CSS:
@font-face {
font-family: 'Quicksand';
src: url('quicksand-bold-webfont.eot');
src: url('quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand-bold-webfont.woff') format('woff'),
url('quicksand-bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Tamaño de Fuente, alineación de texto y tamaño de la línea
Tamaño de fuente
El tamaño de la fuente se define con la propiedad Font-size y colocando el valor, ya sea absoluto o relativo.
h1{
Font-size: 36px; (150%)
}
p{
Font-size: 16px; (90%)
}
Alineación del texto
Los contenidos de texto se pueden alinear dentro de la caja que los contiene, ya sea a la izquierda (predeterminado), a la derecha o al centro.
h1{
text-align: left;
}
p{
text-align: center
}
Tamaño de la Línea
Cada línea de texto tiene un alto, y esta separación es la que permite que el texto sea legible o no. Se usa la propiedad line-height (alto de la línea) para manipularla en CSS. Si no se especifica una dimensión CSS lo calcula de acuerdo al tamaño de la fuente:
h1{
line-height: 20px;
}
p{
line-height: 1.5; (esto será 1.5 veces el tamaño de la fuente)
}
Estilo, peso y variante de texto
Estilo
El estilo del texto puede ser itálico o normal, se usa la propiedad font-style y depende de las variaciones de estilo instaladas.
h1{
font-style: italic;
}
p{
font-style: normal;
}
Peso
El peso de manera básica puede ser negrilla o normal, se usa la propiedad font-weight y depende de las variaciones de peso instaladas.
h1{
font-weight: normal;
}
p{
font-weight: bold;
}
Variante de la fuente
Las variante de la fuente puede ser dos, normal o capitales pequeñas, en tipografía las capitales pequeñas se usan para des enfatizar letras mayúsculas en abreviaciones y acrónimos.
h1{
font-weight: normal;
}
p{
font-weight: small-caps;
}
Peso de la Fuente
Además de las variantes comunes normal y negrita (bold), en CSS se pueden manejar hasta 9 pesos diferentes, de manera que el diseño tipográfico puede tener mayor riqueza, adicionando varias jerarquías.
Font-weight: 100; /*lightest or thinnest*/
Font-weight: 200;
*
*
*
Font-weight: 800;
Font-weight: 900; /*darkest or thickest*/
Para usar los diferentes pesos, es necesario importar los diferentes archivos de Fuentes que soporten los pesos que vamos a usar:
@font-face {
font-family: 'Quicksand';
src: url('quicksand-regular-webfont.eot');
src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand-regular-webfont.woff') format('woff'),
url('quicksand-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Tabla de referencia de acuerdo a nomenclatura común en Tipografía:
100 – Thin
200 – Extra Light (Ultra Light)
300 – Light
400 – Normal
500 – Medium
600 – Semi Bold (Demi Bold)
700 – Bold
800 – Extra Bold (Ultra Bold)
900 – Black (Heavy)
Decoración de textos
Los textos se pueden decorar con una línea y esa línea permite ser manipulada en su aspecto, su color y su estilo.
text-decoration
Text-decoration-line
text-decoration-color
text-decoration-style
.linea-abajo {
text-decoration: underline;
}
.linea-arriba {
text-decoration: overline;
}
.linea-atravesada {
text-decoration: line-through;
}
.parpadeo {
text-decoration:blink;
}
Deja una respuesta