Artículos en la categoría de desarrollo de software y programación a medida

Cómo combinar color y tipografía en diseño web

Querer resaltar un texto por medio de un fondo de color es algo sencillo y que puede generar un buen resultado, pero si no se tienen en cuenta ciertas normas de legibilidad, cabe la posibilidad de obtener algo totalmente ilegible que, incluso, dañe a la vista, o pierda la seriedad y la atención de del proyecto web que se esté trabajando. El diseño web es muy importante, para los especialistas en diseño y desarrollo web en Zaragoza, en relación al color y tipografía que se utilizan en una página, como vamos a explicar a continuación.

Aquí te daremos consejos de combinaciones de color de la tipografía y su respectivo color de fondo de la web, pero antes, vamos a establecer una serie de definiciones y normas básicas para conseguir el mejor resultado posible.

Contraste

Hay que buscar el máximo contraste entre el color de la tipo y el resalte. Por ejemplo, una combinación prohibida es amarillo + blanco, ya que son los dos colores con más luminosidad. Cuanto menor sea el contraste entre oscuridad y claridad que haya entre el texto y el resalte, menos legible es, y más esfuerzos hay que hacer por intentar leerlo.

Fomentar el ‘texto negativo’

Un texto negativo es aquel en el que el color del texto es más claro que el fondo. Si escribís un texto largo en negativo, por ejemplo, texto blanco sobre fondo negro, se lee peor, además de que parece que lo que está escrito carece de importancia. Preferiblemente, en textos largos, el color de lo que se escribe debe ser más oscuro que el fondo.

Evitar colores que se leen con dificultad

A pesar de que está muy generalizado, textos largos en un color oscuro que no es negro sobre fondo blanco NO llaman más la atención, cuando, en realidad, se leen peor y dan la impresión de que su contenido es poco serio. Por ejemplo, textos en verde, rojo, violeta…

No usar textos multicolor

Por último, un texto que combine diversos colores no se lee muy bien, además que parece algo superficial e infantil, aunque está el caso aislado del logotipo de Google, en el que cada carácter es de un color distinto. Así que, si no está totalmente justificado, no uses textos multicolores.

Otros Consejos

  • Procura utilizar textos en negativo sólo cuando quieras destacar algo breve, como títulos, introducciones, alguna descripción, o algún término clave en un texto largo.
  • Juega con una escala de grises, además del negro y el blanco, con los tamaños de la tipografía y con símbolos conocidos. Son una apuesta segura si no sabes qué colores elegir, además que resulta elegante y legible.
  • En cuanto a la distancia que pueda existir entre lector y la pantalla donde se lee el texto, hay dos tipos de combinaciones que aseguran la legibilidad máxima:
    • Texto negro sobre fondo amarillo es el que mejor se ve desde lejos
    • Texto negro sobre fondo blanco es el que mejor se ve desde cerca
  • Los colores con más luminosidad son, por ejemplo, el blanco, amarillo, celeste o rosa. Procura evitar estos colores en textos largos, y usarlos principalmente como fondos.

Con todos estos consejos, ya podéis tener claras las bases para que el diseño web de una página y la combinación entre tipografía y color de fondo de la web sean perfectos y todos los contenidos tengan una legibilidad óptima.

Suscríbete a nuestra newsletter

Artículos relacionados

Beneficios de Laravel para el desarrollo de software
Desarrollo

Cuáles son las ventajas de utilizar Laravel en el desarrollo de software

En este artículo explicamos cuáles son las ventajas y beneficios más relevantes de Laravel para el desarrollo de softwar...

Beneficios del desarrollo de software a medida para empresas
Desarrollo

Qué beneficios ofrece el desarrollo de software a medida

Explicamos cómo el desarrollo de software a medida contribuye al crecimiento de una empresa y qué beneficios ofrece....

Cómo elegir una empresa de desarrollo de software
Desarrollo

Cómo elegir una empresa de desarrollo de software

Explicamos cuáles son los consejos que se deben tener en cuenta a la hora de escoger una empresa especializada en desarr...

Cómo elegir entre desarrollo a medida o plantillas prediseñadas
Desarrollo

Desarrollo a medida vs. Plantillas: ¿Qué opción es mejor?

En ciertas ocasiones surge la duda de si es mejor optar por un desarrollo a medida o utilizar plantillas prediseñadas. D...