No es raro que te encuentres diseños web en los que se hace uso de textos en mayúsculas para potenciar ciertos textos. Aunque existen ocasiones que pasamos del uso al sobreuso de esta técnica, lo cual puede ser perjudicial para el diseño. Como en todos los ámbitos, nunca hay que abusar de ciertas herramientas, porque podemos conseguir el efecto contrario al deseado. Y con las mayúsculas, es algo que puede pasar con relativa sencillez.
Cuando estemos hablando de textos en mayúsculas en este artículo, nos referimos a aquellos textos en la que la totalidad de caracteres estén en mayúsculas. Por ahora, vamos a dejar de lado cuando solo usamos la mayúscula en la primera letra de cada palabra, que quizás nos daría para otra entrada. Hoy nos vamos a centrar dentro del diseño web, en ciertos elementos donde el uso de las mayúsculas no puede venir muy bien para, por un lado, usarlo como elemento de diseño, y por otro, que seamos capaces de conseguir unos puntos de atención dentro del diseño general.
Pero antes de entrar de lleno en que tipos de elementos dentro de nuestra web son los más adecuados para el uso de mayúsculas, veamos algunas reglas que es conveniente seguir antes de empezar a trabajar. Estas nos van a servir tanto a la hora de diseñar una web como para cuando estemos agregando contenido a la misma.
También te recomendamos que eches un vistazo al artículo que escribimos hace pocas semanas sobre como diseñar de forma correcta tus textos. En esa entrada hicimos un inciso sobre el uso de las mayúsculas, que puede venir muy bien como iniciación.
Evita usar mayúsculas en textos largos
Si este es el primer punto que queremos reseñar no es por casualidad. Leer un texto que esté completamente en mayúsculas se lee más lentamente y con cierta dificultad. Además de que da la impresión de que estemos gritando. El ejemplo más básico es una entrada de un blog. Si quieres resaltar una parte del texto, tienes otras herramientas disponibles, como las negritas, antes del uso de las mayúsculas.
La norma que deberíamos usar es: si el texto ocupa más de una línea, debemos pararnos y pensar si es adecuado usar las mayúsculas. Quizás la única excepción es cuando estemos combinando una imagen de fondo con un texto potente y tengamos dos palabras, cada una en una línea diferente. En este tipo de situaciones casi que jugaríamos en otra liga, ya que entramos en un campo más visual que de lectura.
Haz uso de CSS para usar mayúsculas
No es adecuado que, en tu HTML, aparezcan textos completos en mayúsculas. Lo mejor que podemos hacer es crear una clase CSS que, al aplicarla, convierta cierto texto en mayúsculas. Es decir, algo así:
.upper-text {
text-transform: uppercase;
}
Esto nos da mucha más facilidad por si, en un futuro, ya no queremos que esos textos estén en mayúsculas. En vez de tener que modificar todos los textos, solo habrá que eliminar la clase del texto que no queremos que aparezca en mayúsculas. Y si queremos quitarlo de toda la web, solo habrá que comentar o eliminar ese pedazo de código dentro de nuestro CSS.
Dónde puedes usar textos en mayúsculas
Veamos algunos de los elementos en los que el uso de las mayúsculas puede ser muy útil, ya que van a potenciar dicho elemento sobre el resto. Eso sí, como hemos venido diciendo, no hay que abusar de ello, ya que podemos echar a perder esta estrategia, y convertirse en algo contraproducente para la funcionalidad y usabilidad de nuestra web.
Títulos y Subtítulos
El truco es usarlo en títulos de textos que sean cortos. Si tienen cierta longitud, tal vez deberíamos replantearnos su uso. También, para darle un aspecto más atractivo podemos jugar con el espacio entre caracteres y no quedarnos con el predeterminado de la tipografía.
Sobre los subtítulos, es una buena forma de darle una jerarquía mayor que al cuerpo de texto aun siendo del mismo tamaño. Como con los títulos, es preferible su uso solo si tienen poca longitud. Siempre iremos con la máxima que un texto en mayúsculas no es apropiado para una lectura que sea larga.
Menús de navegación
También podemos utilizar las mayúsculas en el menú de navegación de nuestra web. Eso sí, intentaremos solo hacerlo si se cumplen dos principios: que no tengan mas de cuatro o cinco elementos y, a ser posible, que cada uno de ellos sea solo una palabra.
Botones / CTA
Los botones y, sobre todo, los call-to-action son elementos que solemos usar para llamar la atención de los visitantes de nuestra web. ¿Y que mejor forma de hacerlo que mediante las mayúsculas?. Sobre todo si usamos el contraste entre el texto del botón y su fondo, para potenciarlo aun más.
Encabezados de tablas
Una buena manera para jerarquizar y separar los títulos de las tablas de los datos que contienen. De un golpe de vista, podrás determinar cada uno de los elementos que componen una tabla. Sin olvidar que tendrá un diseño más agradable y funcional.
Como hemos podido, no son pocos los elementos dentro de una web donde el uso de las mayúsculas no solo encajan perfectamente, sino que podemos conseguir potenciarlos y que sean más atractivos para nuestros visitantes.
¿Sabéis más sitios donde encajen bien las mayúsculas y ofrezcan un plus a tus diseños?. Nos lo podéis decir en los comentarios para que todos podamos aumentar nuestras opciones y conocimientos a la hora de diseñar una web.
