CSS nos permite cambiar prácticamente todo lo que queramos del aspecto de nuestra página web y por supuesto el espacio entre letras es una de esas cosas que también nos permite realizar este maravilloso lenguaje (si es que le tengo cariño en verdad).
Para que no haya dudas al respecto, voy a explicar un poco mejor a qué me refiero exactamente cuando hablo de «modificar el espacio entre letras». De momento voy a hacerlo un poco «a lo cutre» para que se entienda el punto y luego ya más abajo te explico cómo puedes hacerlo bien mediante CSS.
¡Consulta nuestros servicios!
Con «modificar el espacio entre letras» me refiero al espacio horizontal que hay entre una letra y otra de una palabra o frase. Es decir, que a lo mejor yo quiero tener unas letras con mayor distancia entre ellas, en lugar de «así», pues podría quererlas «a s í»… ¡a eso me refiero! Como te comentaba, para ahora darte el ejemplo simplemente he añadido un espacio entre cada letra, pero por suerte CSS nos permite poder hacer esto bien y de una forma en la que tengamos más control sobre ello, así que vamos allá.
Tabla de Contenidos
Letter-Spacing: La Orden CSS para la Distancia entre Letras
Letter-spacing es la orden de CSS que nos permitirá poder realizar esto de un modo más profesional y controlado, por supuesto podrías hacer lo de «poner espacios usando la barra espaciadora» entre las letras y listo pero creo que basta decir que ese no es un modo correcto para conseguir ese efecto y por ende no te lo recomiendo en absuluto. Especialmente teniendo en cuenta lo sencillo que podrás conseguir este efecto usando Letter-spacing para así de paso hacer las cosas bien y no dañarle la vista a otros programadores que se pongan a inspeccionar tu página (se van a reír mucho si usas espacios).
El caso, así es como se usa esta orden:
.texto-ejemplo {
letter-spacing: 4px; /* Añade los pixeles que quieras */
}
Como siempre, he añadido un selector de clase de ejemplo, tu por supuesto deberías añadir el selector pertinente a aquel texto al que quieras aplicar este efecto. Luego más abajo añadiré ejemplos reales para que entiendas mejor cómo puedes aplicar este recurso de CSS.
El resultado del ejemplo anterior nos devolvería lo siguiente:
Hola, soy un texto con la letra más espaciada.
Como ves, este efecto es bastante interesante ya que nos permite crear un texto que llama bastante la atención, por lo que podrías usarlo para tus encabezados (si son largos no va a quedar tan bien) o para crear una llamada a la acción. Es importante que no te pases de la ralla con el espacio entre letras ya que podrías dificultarle la lectura a tus usuarios.
Ejemplos Reales
Ahora que ya entiendes cómo funciona la propiedad Letter-spacing, crearé varios ejemplos de cosas que podrías aplicar en casos reales para que entiendas mucho mejor su funcionamiento; de paso veremos algunas formas curiosas de usar esta orden.
Encabezados (Headings) más Espaciados
Puedes crear unos encabezados bastante interesantes y originales dándole un toque con esta técnica.
/* Añade los encabezados que te interesen */
h1, h2, h3, h4, h5, h6 {
letter-spacing: 3px;
}
Así quedaría la cosa teniendo en cuenta los estilos que ya tienen mis headings de serie, fíjate solo en el espacio entre letras como tal:
Soy un H1 más Espaciado
Soy un H2 más Espaciado
Soy un H3 más Espaciado
Soy un H4 más Espaciado
Soy un H5 más Espaciado
Soy un H6 más Espaciado
La idea es que juegues con la cantidad de pixeles hasta que encuentres el espaciado entre letras ideal para lo que necesites en tu proyecto. En mi opinión, eso sí, si añadimos demasiado espacio, la cosa ya no queda tan bien, aunque por supuesto dependerá del tamaño de la letra entre otros factores.
Clase Personalizada para aplicarla en un texto o en una parte del mismo
Otra forma de usar Letter-spacing es crear una clase personalizada para que luego podamos aplicarla mediante HTML donde queramos. Veamos primero el CSS:
/* Usa el nombre de clase que prefieras*/
.letra-espaciada {
letter-spacing: 4px;
}
Ahora el HTMl, supondremos que en este caso queremos aplicarle el efecto a un párrafo completo.
<p class="letra-espaciada">Hola, soy un párrafo con las letras espaciadas.</p>
Así quedaría la cosa:
Hola, soy un párrafo con las letras espaciadas.
Si quisiéramos que solo una parte en concreto de un texto tenga este efecto, debemos usar <span>, que es lo que recomiendo usar cuando queremos seleccionar una parte concreta de un texto ya sea de un párrafo, enlace, lista o lo que sea.
<p>Nuestro producto estrella ahora tiene <span class="letra-espaciada">descuento</span>, no deje pasar esta <span class="letra-espaciada">oportunidad</span>.</p>
Este es el resultado:
Nuestro producto estrella ahora tiene descuento, no deje pasar esta oportunidad.
Sin duda no es el mejor de los ejemplos ya que habría que ajustar más cosas para obtener un resultado idóneo en este caso, pero como ves, no deja de ser una forma más de que una parte del texto llame más la atención.
Botón que Llame más la Atención
En el caso de aplicarlo a un botón queda bastante mejor el efecto. Para el ejemplo usaré un botón creado con <a> (un enlace vamos), pero realmente podrías aplicárselo también a un <button>.
Usaremos este botón para el ejemplo (no me he esmerado mucho tampoco porque no es el punto), es un tag que enlaza a todo mi contenido de CSS.
Si le aplicamos el letter-spacing tal y como te he mostrado en los ejemplos anteriores (en este caso he aplicado solo 2px para que quede mejor), quedaría así:
Más adelante crearé una lección sobre cómo crear botones o algo por el estilo donde profundizaremos más en esta temática, que a fin de cuentas hay infinitas posibilidades a la hora de crear botones y el objetivo de este post es puramente que comprendas bien el uso de Letter-spacing.
Letras más Juntas
Del mismo modo que podemos aumentar la distancia entre letras, también podemos reducirla, basta con añadir pixeles negativos.
.letras-juntas {
letter-spacing: -1px;
}
Aquí un ejemplo de cómo quedaría este efecto de CSS usando valores negativos:
¡Soy un texto con las letras más juntas!
Esto obviamente dependerá mucho de la fuente que uses en tu caso, en mi caso a -1px la verdad es que no queda tan mal la cosa, todo es ir probando hasta encontrar lo que a ti te guste o funcione en tu página.
Ten en cuenta que por temas de accesibilidad, tampoco deberías tener las letras demasiado juntas ya que eso también dificultaría la lectura por parte de tus lectores.
Texto Codificado con Letter-spacing
Para terminar te mostraré un uso bastante atípico y peculiar que le puedes dar a Letter-spacing que te permitirá crear una especie de texto codificado que se puede decodificar de forma muy sencilla. No diré cómo, pero no me cabe duda de que serás capaz de descifrar el ejemplo que te pondré más abajo.
Básicamente consiste en añadir una cantidad algo alta de pixeles negativos para que el texto sea prácticamente ilegible:
.letras-codificadas {
letter-spacing: -5px;
}
Este es el resultado:
Si estás leyendo esto, deja abajo un comentario en el que ponga «Cocodrilo».
A simple vista es imposible reconocer lo que pone ahí, pero creo que no es necesario comentar que esto para nada es un método de codificación válido ni seguro ya que es bastante sencillo descifrarlo, pero para echarte unas risas sí que vale.
Y nada, ¡eso sería todo por hoy! Como siempre ya sabes, no dudes en dejar un comentario si quieres comentarme cualquier duda, aclaración, corrección… en fin, lo que quieras. ¡Hasta otra!
Más información aquí.
cocodrilo
¡Me alegra que lo hayas descifrado! ¡Estaba esperando a ver quién era el primero! ¡Enhorabuena David!
buena explicación gracias