Junto con la elección de los colores, la elección correcta de la fuente tipográfica a emplear en nuestras web, determinara el exito ó fracaso de las mismas.
Una fuente tipográfica, es un conjunto de carácteres, con un estilo con carácteristicas similares, existen multitud de ellas, que podremos incluir en nuestros documentos.
El texto, es una de las partes más importantes, en la transmisión de información, que en definitiva es la web, y la elección de como se verá este texto, es vital.
La buena legibilidad, de este texto, mantendrá, a los lectores, más concentrados y atentos, a tu contenido. Para darles formato o estilo a este texto, tenemos toda una serie de propiedades css, que pasamos a ver.
font-family: Con esta propiedad, definiremos la fuente a emplear en nuestro documento. Conviene que sean fuentes con trazos claros y legibles, que sean de las habituales, para que las tengán instaladas en su sistema, la mayoría de los usuarios. Se suelen declarar varias, separadas por comas, para que el navegador, coja la siguiente, si falla la anterior.
También es una regla, no escrita, no excederse en el uso de distintas fuentes, en el mismo documento, es más conveniente, la uniformidad en el texto del documento. También existe la posibilidad de usar fuentes importadas, declarando en el CSS @font-face{}, he importar las fuentes de Google u otras, pero esto tiene el inconveniente, de depender de la conexión a internet y puede ralentizar, la carga de la página.
font-size: Es la propiedad, para establecer el tamaño de nuestra fuente. Podemos declarar este valor, en unidades como px, em, etc, ó en porcentajes. Para visualizar, la página, en pantallas de ancho superior a 1200px, el valor adecuado esta entre los 16-18px, ó un em, y luego ir adaptándo su tamaño, mediánte media querys ,a los distintos, tamaños de pantalla.
font-weight: Esta propiedad, nos sirve, para especificar, el peso ó grosor, de nuestro texto. Algunas fuentes, solo admiten los valores normal ó bold. Con el valor bold ó negrita, podremos destacar partes de nuestro texto, que nos interesen.
text-decoration: Podemos decorar nuestro texto, con subrayado inferior, superior ó tachado, con esta propiedad. Pero su uso, más habitual, es darle el valor none, precisamente para quitarle, la decoración de subrayado que lleván los enlaces ó link, por defecto.
font-variant: Esta propiedad, es poco utilizada, se puede definir su valor como small-cups, que transforma el texto a mayusculas, conservando el tamaño de minusculas.
text-transform: Otra propiedad, poco empleada, nos servirá, para transformar nuestro texto a mayusculas, minusculas ó capitalizar las primeras letras, de nuestros textos.
font-style: Con esta propiedad, podemos establecer el texto en cursiva ó italica y oblicua.
line-height: Esta propiedad, nos sirve para aumentar ó disminuir, la distancia ó altura, entre las líneas de los párrafos.
word-spacing: Con esta propiedad, podemos aumentar o disminuir, el espacio entre las palabras, del texto.
letter-spacing: Dandole valor a esta propiedad, aumentaremos ó disminuiremos, el espaciado entre las letras de cada palabra, su valor por defecto es normal.
text-align: Por último, es muy importante, como alinear el texto, su valor por defecto es left, y también admite los valores: right, center y justify.
Pues bien, jugando con todas estas propiedades, que nos brinda CSS, tendremos que darle estilo a nuestros textos, con el objetivo, de que resulte, lo más claro y legible, para los usuarios ó lectores de nuestras páginas y que les resulte agradable la visita.
Como tiene tantas subpropiedades, el texto ó fuente, existe la posibilidad, de declarar varias de ellas juntas, en una sola, línea de código, que tendría la siguiente estructura:
Para ir concluyendo, cabe mencionar, la importancia de la buena elección del color, de nuestras fuentes y del background-color del elemento, que la contenga, para asegurarnos del contraste, entre ambos valores, y así facilitar al máximo, la legibilidad de nuestro contenido.
Para que puedas, comprobar in situ, todos estos valores, de propiedades CSS, aplicables al texto, abajo teneis una aplicación, muy chula, donde podeis experimentar con todas ellas y si al final encontrais vuestro estilo preferido, teneis que pulsar al botón azul, que abrira una ventana nueva, con todo vuestro CSS, que podreis, copiar y pegar directamente, en vuestro archivo CSS.
En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
modificalo!
Espero que haya quedado clara, la importancia de la elección de la fuente en los documentos, y todas las propiedades que tenemos para manipularla.
Un saludo, gracias por leer y por la visita, si te gusta mi contenido ó tienes cualquier sugerencia, agradecería tu contacto, hasta la próxima.
