Una de las mejores opciones que tenemos a la hora de personalizar el aspecto de nuestros documentos, mejorando su diseño, es a través de la tipografía. Usar una fuente fuera del grupo habitual de tipografías utilizadas en la mayoría de documentos puede ayudar a generar la identidad visual de nuestro proyecto.
El problema que tenemos a la hora de usar tipografías específicas en un sitio web es que el archivo de la fuente que estemos utilizando debe estar instalado en el equipo del usuario de nuestro sitio. De lo contrario el navegador del usuario reemplazará nuestra tipografía por la que tenga configurada por defecto, de manera que el sitio no tendrá el aspecto que nosotros esperábamos, llegando a provocar que algunos elementos se vean mal, o no se vean en absoluto, si la diferencia entre la fuente elegida por nosotros y la fuente por defecto del navegador es muy grande.
Para evitar este problema, tenemos que asegurarnos de que las fuentes usadas en nuestro proyecto estarán disponibles para todos los usuarios, de manera que si estos no la tienen instalada en el equipo, el navegador pueda descargarla como un archivo temporal y usarla para cargar el contenido de forma correcta.
Este objetivo podemos conseguirlo de dos maneras: usando un servicio web, como puede ser Google Fonts u otros. O adjuntando los archivos de fuente necesarios en nuestro servidor, para que el navegador los pueda descargar.
Para utilizar fuentes de este servicio tenemos que seguir unos pasos muy sencillos.
Para usar fuentes de este servicio, el primer paso consiste en seleccionar las tipografías que queremos utilizar. Para ello accedemos a la web del servicio en https://fonts.google.com y usamos el buscador y el sistema de filtros que incorpora el sitio para elegir las tipografías que necesitemos
A medida que las vamos seleccionando, vemos que en la parte inferior de la pantalla aparece un pequeño cuadro mostrando los elementos que hayamos seleccionado. Es conveniente resaltar aquí, que si seleccionamos más de 3 fuentes, o más de 3 versiones de la misma fuente, el tiempo de carga de nuestra web se verá afectado por el tamaño de los archivos de fuente que se tendrá que descargar el usuario. Normalmente, además, no se usan más de 3 tipografías en un proyecto, pues provocará falta de identidad visual.
Una vez seleccionadas nuestras fuentes pinchamos sobre el cuadro inferior que hemos indicado. En el accedemos a las opciones de configuración de nuestra descarga. Entre otras cosas, aquí podemos seleccionar los diferentes estilos disponibles para una misma fuente. Aquí debemos mantener la misma precaución respecto al tamaño de los archivos a descargar.
En este cuadro, además, nos aparece la información necesaria para poder usar las fuentes en nuestro documento. En primer lugar aparece un cuadro que nos da dos opciones para vincular las fuentes. La primera es mediante una etiqueta HTML que colocaremos en el <head> de nuestro documento (en todos los que vayan a usar la tipografía seleccionada). La segunda es una regla @import que colocaremos en el CSS de nuestro documento. Y también tendrá que estar disponible en todos los documentos que vayan a usar esas fuentes.
Ejemplo de códigos devueltos para usar las fuentes:
Para insertar en HTML
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300i,400,700|Limelight" rel="stylesheet">
Y si queremos insertarlo en el CSS
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300i,400,700|Limelight');
En ambos casos el resultado es el mismo, estamos vinculando nuestro sitio al servicio de Goolge Fonts para que nos proporcione las fuentes indicadas cuando el navegador cargue la página. Pero la diferencia es muy importante:
Si uso la etiqueta <link> de HTML tendré que incluirla en cada uno de los documentos HTML. Supongamos que nuestro proyecto consta de 15 documentos HTML, si vamos a usar las fuentes en los 15 documentos tendré que insertar esa etiqueta en el <head> de cada uno de ellos.
En cambio, usando la regla @import de CSS, dado el mismo caso, y si los 15 documentos
están usando la misma hoja de estilos, sólo tendré que insertar esa regla una sola vez en esa hoja de
estilos para conseguir que se vincule en todos los documentos.
Nota: Hay que
insertarla al principio de la hoja de estilos, o al menos antes de las definiciones de
font-family que realicemos en ella.
Una vez vinculado el documento con las fuentes a través de cualquiera de los dos enlaces anteriores ya estamos listos para usar nuestras fuentes. La forma de hacerlo es mediante la propiedad CSS font-family, igual que lo veníamos haciendo hasta ahora para usar las fuentes del sistema.
Para saber qué nombre exacto tenemos que escribir en font-family tenemos que fijarnos en el cuadro anterior de Google Fonts. Justo debajo de donde aparece el código para vincular las fuentes en el documento tenemos las definiciones para cada una de las fuentes que hemos seleccionado. Esos son los valores que tendremos que usar. En nuestro ejemplo son:
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'Limelight', cursive;
A partir de aquí usaremos esos valores en nuestro CSS según nuestras necesidades. Si son fuentes que vamos a usar de manera amplia (para todo el texto del documento), podemos hacer una definición general a nivel de etiquetas, como hemos hecho en este documento:
body {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 20px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Limelight', cursive;
}
strong {
font-weight: 700;
}
em {
font-weight: 300;
font-style: italic;
}
Y si queremos usar las tipografías de forma puntual, en lugar de para todo el documento, las podemos definir dentro de las clases que queramos:
.texto {
font-family: 'IBM Plex Sans', sans-serif;
...
}
.titular {
font-family: 'Limelight', cursive;
...
}
En el caso de que queramos usar nuestras porpias tipografías en nuestro sitio, sin depender de un servicio externo, el proceso es también sencillo, pero algo diferente al anterior. En este caso tenemos que hacer:
A día de hoy los navegadores modernos reconocen diferentes formatos de archivos tipográficos, entre ellos los habituales de las fuentes que instalamos en nuestro equipo, como los OTF y TTF. Pero en la actualidad se ha definido un formato de fuente estándar para los navegadores, el WOFF y su actualización WOFF2. Pero como ocurre siempre con las diferentes versiones de navegadores, no todos soportan estos tipos, de manera que si queremos asegurarnos de la mayor compatibilidad posible de nuestros archivos con los diferentes navegadores (y sus versiones) tendremos que dejar disponible la fuente en varios formatos. Al menos hasta que pase un tiempo y el uso de navegadores no estandarizados con el uso de la tipografía sea residual.
Si ya tenemos nuestras tipografías en estos formatos, ya tenemos la mayor parte del trabajo hecho, solo tenemos que copiar los archivos en el servidor. En caso contrario los tendremos que convertir.
Para convertir nuestra tipografía podemos usar un servicio web como el Font-Generator de Font Squirrel. Lo encontramos en esta web: https://www.fontsquirrel.com/tools/webfont-generator.
Su uso es muy sencillo: subimos la fuente o fuentes que queremos convertir, seleccionamos los formatos de salida, e iniciamos el generador. La aplicación nos devolverá un archivo zip comprimido con los archivos de fuente necesarios, más la documentación y ejemplos para entender cómo tenemos que configurar el servidor para utilizarlas.
Una vez conseguidos los archivos con los formatos correspondientes, o al menos con el formato WOFF los copiamos a nuestro servidor. En este ejemplo los vamos a dejar todos dentro de la carpeta fuentes dentro de nuestro directorio raiz. Y los archivos que hemos convertido son:
Las dos últimas tienen un nombre personalizado (roja) para mostrar que sirve cualquier nombre en los archivos convertidos, no tiene porqué ser necesariamente el mismo que el de la tipografía original (como sí es el caso de las primeras)
En este caso hemos recurrido solamente a los formatos estándar de fuentes web: WOFF y WOFF2.
Una vez identificados los archivos en el servidor, el siguiente paso es declarar esa misma información en el CSS del documento. Lo que se trata es de indicar qué archivos generan los font-family que vamos a usar. Y para ello usamos la regla @font-face. Con ella básicamente lo que estamos haciendo es emparejar las propiedades font-family del documento con su archivo de fuente correspondiente. La declaración tiene esta forma:
@font-face {
font-family: 'rojabold';
src: url('fuentes/roja-webfont.woff2') format('woff2'),
url('fuentes/roja-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
En ella lo primero que hacemos es definir su nombre, es decir, el nombre que vamos a usar en font-face para utilizar la fuente. y a continuación indicamos dónde se encuentra en el servidor el archivo para esa fuente. Eso lo hacemos con el atributo src. Las otras dos propiedades son menores, se refieren al estilo y peso de la tipografía.
En src podemos indicar tantas rutas de archivo como sea necesario (en función de los diferentes
formatos de la fuente que tengamos) separándolos por comas.
Importante! El valor
para url se define desde donde está ubicada la hoja de estilos donde definimos
@font-face. En este ejemplo estamos asumiendo que la hoja de estilos donde estamos declarando
esta regla se encuentra guardada en el directorio raiz del sitio, junto a la carpeta donde están las
fuentes. Por eso escribimos fuentes/roja-webfont.woff. Si la hoja de estilos estuviese dentro
de una carpeta llamada css junto a la carpeta fuentes la ruta para el archivo sería:
../fuentes/roja-webfont.woff.
Recuerda que esto es así para cualquier atributo o propiedad src o url que definamos en el css, sea de la propiedad que sea. No solo para @font-face
Por último, la declaración @font-face la haremos para cada archivo de fuente que hayamos generado. Y hay que remarcar que cada estilo, por ejemplo con pesos distintos, es una fuente distinta a estos efectos. En el ejemplo tenemos 3 pesos diferentes de la fuente Roboto, y eso supone tres archivos de fuente diferente. Pero en el caso de que para cada archivo contásemos con diferentes formatos de fuente (WOFF, WOFF2, OTF, TTF) esto no supondría diferentes archivos de fuente, sino que los diferentes formatos serían declarados a la vez en la misma @font-face, dentro del atributo src, separando las distintas rutas por comas, como hemos dicho antes.
De este modo, para nuestro ejemplo necesitaremos definir 4 reglas para incluir nuestras fuentes:
@font-face {
font-family: 'titulares';
src:url('fuentes/Roboto-Black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cursiva';
src:url('fuentes/Roboto-Italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cuerpo';
src:url('fuentes/Roboto-Thin-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'rojabold';
src: url('fuentes/roja-webfont.woff2') format('woff2'),
url('fuentes/roja-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Vemos en estas reglas que los nombres para font-familylos definimos en la regla como queramos. Ese es el nombre que tendremos que usar después. Pero puede ser el que nosotros queramos.
A partir de aquí el camino es el mismo que en el apartado anterior. Simplemente usaremos font-family en los selectores CSS que queramos modificar su tipografía. En nuestro caso lo hemos hecho así:
.texto {
font-family: 'cuerpo';
font-size: 22px;
}
.texto h1, .texto h2, .texto h3, .texto h4 {
font-family: 'titulares';
}
.texto em, .texto strong {
font-family: 'cursiva';
}
.especial {
font-family: 'rojabold';
font-size: 72px;
text-transform: uppercase;
}
Que nos devuelven este resultado:
Ejemplo de fuente para los párrafos, tiene la versión "italic" de la tipografía. También la hemos cambiado para las palabras en cursiva y en negrita.
Otro ejemplo de tipografía modificada.
Y este párrafo también. Kamarrada!!
El uso de iconos mendiante las propiedades tipográficas de CSS se ha hecho muy popular en los últimos años. Esta técnica permite insertar imágenes vectoriales en nuestros documentos como si fueran una tipografía más.
La principal característica de las imágenes vectoriales (y las tipografías mismas también son vectores) es que permiten su escalado sin que pierdan resolución. Las mostremos al tamaño que las mostremos siempre se verán perfectas. Otra característica es que su color es sólido (no permite diferentes colores) y que puede ser cambiado de la misma forma que cambiamos el color de una tipografía en nuestro documento mediante CSS.
Para usar estos elementos, como ocurría con las tipografías vistas antes, tenemos dos opciones, recurrir a algún servicio en línea que nos proporcione los iconos necesarios, o conseguir nustros propios archivos de iconos y usarlos desde nuestro servidor.
La forma más sencilla de usar iconos en nuestro proyecto es recurrir a servicios externos. Vamos a ver como trabaja https://fontawesome.com/:
De forma similar a lo que hicimos con Google Fonts aquí solo tenemos que vincular en nuestro documento el servicio de font-awesome mediante una etiqueta en el <head> de nuestro documento y luego usar los iconos que necesitemos mediante una clase CSS.
En el apartado Get Started de la web de Font-Awesome encontramos los códigos necesarios para vincular el documento. Para el uso web nos da dos opciones, mediante javascript o mediante CSS. El uso es idéntico en ambos casos, pero la opción de javascript es más eficiente que la de CSS, aunque también es menos soportada por navegadores viejos. Nosotros elegiremos la primera, marcando la opción de usar todas las fuentes. Nos devolverá un código similar a este:
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
Una vez vinculado el documento con el servicio, ya podemos usar los iconos, para ello sólo tenemos que añadir la clase del icono correspondiente a cualquier etiqueta HTML en línea. Ellos usan la etiqueta <i>, que está totalmente desaconsejada en HTML5, y al mismo tiempo dicen que sería más semántico usar la etiqueta <span>. Eso es lo que vamos a hacer nosotros.
Para averiguar cual es la clase del icono que queremos usar vamos al apartado Icons de la web y localizamos el que nos interese, lo seleccionamos, copiamos su clase y la pegamos en nuestro documento:
<span class="fas fa-envelope"></span>
En este caso tenemos un dibujo de un sobre que podremos cambiar de color y tamaño fácilmente:
Si necesitamos cambiar el formato del icono, recurrimos a las herramientas y reglas CSS habituales. Podemos hacer algo así:
<div class="formato">
<span class="fas fa-exclamation-triangle"></span>
</div>
Y el CSS:
.formato {
font-size: 90px;
color: red;
}
Tendremos:
En el caso de que queramos usar iconos propios, sin tener que recurrir a ningún servicio externo, podemos usar el servicio de Icomoon en la web https://icomoon.io/. Es algo similar al servicio de Font-Generator de Font Squirrel, en el que hacemos nuestra selección de iconos y a continuación descargamos un pack con los archivos necesarios para ser utilizados.
Para seleccionar los archivos tenemos que acceder a la app del servicio en https://icomoon.io/app. Ahí seleccionamos los iconos que vayamos a utilizar, y a continuación pulsamos en el botón Generate Font de la parte inferior de la pantalla. Nos lleva a una pantalla donde podemos hacer unos ajustes previos antes de la descarga, y cuando lo tengamos preparado pulsamos en el botón Download para descargar el archivo comprimido con nuestros datos.
Una vez descarguemos, tendremos un directorio con nuestras fuentes-icono y una hoja de estilos con el CSS necesario. El procedimiento es el mismo que el descrito para las fuentes instaladas en nuestro servidor, solo que aquí ya tenemos definida la regla @font-face y las clases que vamos a necesitar para usar cada uno de los iconos seleccionados. Será algo así:
@font-face {
font-family: 'icomoon';
src: url('fuentes/icomoon/icomoon.eot?xzr74');
src: url('fuentes/icomoon/icomoon.eot?xzr74#iefix') format('embedded-opentype'),
url('fuentes/icomoon/icomoon.ttf?xzr74') format('truetype'),
url('fuentes/icomoon/icomoon.woff?xzr74') format('woff'),
url('fuentes/icomoon/icomoon.svg?xzr74#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
.icon-cart:before {
content: "\e93a";
}
.icon-phone:before {
content: "\e942";
}
.icon-envelop:before {
content: "\e945";
}
.icon-location:before {
content: "\e947";
}
.icon-airplane:before {
content: "\e9af";
}
Como en el caso anterior, lo importante es que las rutas estén bien definidas dentro del atributo src, por lo tanto si hemos cambiado el nombre a la carpeta que contendrá las fuentes, o si la hoja de estilos está en un lugar distinto de la que hemos descargado desde IcoMoon tendremos que corregir nuestra ruta en la regla para que el navegador pueda acceder a las fuentes.
Una vez hecho esto solo tenemos que usar las clases de nuestros iconos donde los necesitemos. Como vemos en el ejemplo siguiente, este tipo de icono es más versátil que el de Font Awesome porque permite, entre otras cosas, añadirlo a elementos de bloque directamente, o aplicarle atributos de text-shadow más facilmente, y ser tratado con independencia del texto que lo acompaña:
<ul>
<li class="navegacion icon-home"><a href="#">Inicio</a></li>
<li class="navegacion icon-cart"><a href="#">Carrito</a></li>
<li class="navegacion icon-phone"><a href="#">Llama</a></li>
<li class="navegacion icon-envelop"><a href="#">Escribe</a></li>
<li class="navegacion icon-location"><a href="#">Mapa</a></li>
<li class="navegacion icon-airplane"><a href="#">Vuela</a></li>
</ul>
Y el CSS:
.navegacion {
font-size: 22px;
margin: 10px;
color: wheat;
list-style: none;
text-shadow: 1px 1px 1px maroon;
}
.navegacion a {
color: wheat;
text-decoration: none;
text-shadow: none;
margin-left: 20px;
font-family: rojabold;
letter-spacing: 3px;
}
Que nos muestra:
Cambia entre mayúsculas, minúsculas y estilo título (la primera letra de cada palabra con mayúscula). Sus valores son uppercase, lowercase, capitalize respectivamente
uppercase: texto en mayúsculas
lowercase: texto en minúsculas
capitalize: texto con estilo de título
Permite usar versalitas en el texto, conviertendo lsa letras en mayúsculas con la altura de caja de las minúsculas. Para eso usamos el valor small-caps
Este texto se muestra todo en versalitas porque le hemos aplicado la propiedad font-variant: small-caps
Aplica un sangrado a la primera línea de un párrafo, o de un bloque de texto. Es una propiedad que se define en unidades (px, %, em, etc)
En este párrafo aplicamos un text-indent: 20px; para ver el efecto de la propiedad. Además, reducimos su anchura al 50%, para que las líneas sean más cortas y se aprecie mejor el efecto de la propiedad.
Aplica una sombra paralela al texto, definiendo los valores de desplazamiento horizontal, desplazamiento vertical, desenfoque y color de sombra
Texto resaltado con sombra paralela
Sirve para definir la separación entre palabras dentro de un bloque de texto. Se define en unidades, y se aplica por igual a todas las palabras del texto
En este párrafo vemos como la propiedad word-spacing: 20px aumenta la separación entre las palabras de manera uniforme, lo que da como resultado un texto poco legible. Es un atributo que puede resultar útil si lo aplicamos sobre títulos o textos con pocas palabras
Se utiliza para cambiar la separación entre las letras de un texto que trae por defecto cada tipografía. Se define con valores numéricos con unidad, y permite valores negativos para lograr que las letras queden superpuestas unas sobre otras.
SEPARADO --- JUNTO
Controla la separación entre las líneas de un texto. Cuando el texto es de una sola línea, modifica la altura de la línea base, desplazando el texo hacia arriba o abajo.Se define en valores numéricos positivos. Si no especificamos unidades, el número multiplica el tamaño de la fuente. Por ejemplo, un texto con font-size: 16px y line-height: 2 tendrá el mismo valor que si pusiéramos line-height: 32px
Controla la separación entre las líneas de un texto. Cuando el texto es de una sola línea, modifica la altura de la línea base, desplazando el texo hacia arriba o abajo.Se define en valores numéricos positivos. Si no especificamos unidades, el número multiplica el tamaño de la fuente.
Es una propiedad que permite modificar el comportamiento predeterminado del navegador a la hora de intrerpretar los espacios consecutivos entre las palabras del texto, y los saltos de línea forzados dentro del código (sin usar etiqueta <br>). Por defecto, estos espacios y saltos son ignorados haciendo que el texto siga el flujo normal del documento. Pero se puede cambiar para que se muestre tal cual está codificado. Tiene un comportamiento muy similar a la etiqueta <pre>
Sus valores pueden ser: normal,nowrap,pre,pre-line,pre-wrap
Este texto tiene muchos espacios entre las palabras y algunos saltos de línea forzados por la tecla intro
Esta propiedad sirve para contrlolar la separación entre palabras de un texto, cuando le hemos aplicado la propiedad text-align: justify, evitando la aparición de espacios demasiado grandes entre las palabras. Es una propiedad que a día de hoy sólo está soportada por Internet Explorer
Esta propiedad ajusta la alineación de la última línea de un párrafo que también tenga la propiedad text-align: justify, permitiendo que la última línea pueda estar justificada también, o alineada a la izquierda y a la derecha, o centrada
Sus valores son left, right, center, justify como en la propiedad text-align, y además permite los valores start, end que siguen la dirección de la escritura del texto, aunque no están soportados por todos los navegadores.
Esta propiedad ajusta la alineación de la última línea de un párrafo que también tenga la propiedad text-align: justify, permitiendo que la última línea pueda estar justificada también, o alineada a la izquierda y a la derecha, o centrada. Sus valores son left, right, center, justify como en la propiedad text-align, y además permite los valores start, end que siguen la dirección de la escritura del texto, aunque no están soportados por todos los navegadores.
Permite decidir qué ocurre cuando una o varias líneas de texto desbordan a su contenedor. Además de su valor predeterminado, que es mostrar el texto desbordado, podemos establacer que se oculte la parte desbordada con el valor clip o que oculte el texto desbordado, pero añadiendo unos puntos suspensivos antes del corte, valor ellipsis
Para que funcione el bloque de texto debe tener definidas estas dos propiedades overflow: hidden; white-space: nowrap;
Esta propiedad permite "romper" una palabra cuando es más grande que su contenedor, para que salte a una línea nueva y no lo desborde. El valor para este comportamiento es break-word
supercalifragilisticoespialidos
Esta propiedad permite "romper" las palabras cuando quedan al final de una línea para que continuen en la línea siguiente evitando formar espacios de separación entre palabras demasiado grandes
El problema es que esta propiedad no trabaja con diccionario y rompe la palabra entre el par de letras que sea, usando como único criterio qué letra es la última de la línea. Además tampoco pone un guión de separación en la palabra cortada. Su valor para romper la palabra es break-all
Esta propiedad permite "romper" las palabras cuando quedan al final de una línea para que continuen en la línea siguiente evitando formar espacios de separación entre palabras demasiado grandes. El problema es que esta propiedad no trabaja con diccionario y rompe la palabra entre el par de letras que sea, usando como único criterio qué letra es la última de la línea. Además tampoco pone un guión de separación en la palabra cortada. Su valor para romper la palabra es break-all
Con esta propiedad sí podemos usar el diccionario para dividir las palabras por los puntos correctos de corte, y sí añade un guión cuando corta la palabra para indicar que sigue en la línea siguiente. El problema es que no está soportada todavía por todos los navegadores, y además, es necesario haber definido el atributo lang en la etiqueta html del documento. Porque usa ese atributo para saber qué diccionario tiene que usar para separar las palabras. Su valor para usar los guiones es auto
Con esta propiedad sí podemos usar el diccionario para dividir las palabras por los puntos correctos de corte, y sí añade un guión cuando corta la palabra para indicar que sigue en la línea siguiente. El problema es que no está soportada todavía por todos los navegadores, y además, es necesario haber definido el atributo lang en la etiqueta html del documento. Porque usa ese atributo para saber qué diccionario tiene que usar para separar las palabras