Selecciona una estética agradable para las fuentes y los colores de tu sitio.

Al igual que la pintura y el papel tapiz de una habitación, las fuentes y los colores marcan el tono de tu sitio web y ayudan a dar una excelente primera impresión.

Si no sabes por dónde empezar, usa las ideas de esta guía para ayudarte a crear el diseño de tu sitio. Recomendamos experimentar con diferentes combinaciones antes de publicar. 

Esta guía es útil después de haber creado un nuevo sitio y agregado contenido. Para conocer los conceptos básicos sobre cambio de fuentes y colores, consulta nuestras otras guías:

• Cambiar fuentes
• Cambiar los colores

Combinar fuentes con tu marca

Al aplicar estilo a tu sitio, ayuda a adaptar su diseño a las ideas y objetivos de tu contenido.

Diferentes tipos de fuentes pueden evocar diferentes estados de ánimo. En tipografía, una serifa es una línea pequeña o trazo unido al final de un trazo más grande de una letra o símbolo dentro de una familia de fuentes. Un tipo de letra sans serif no tiene trazos adicionales ni líneas más definidas. 

Los tipos de letra sans-serif se han vuelto más comunes para el texto que se muestra en la web, ya que los detalles finos como serifas pueden desaparecer o aparecer demasiado grandes en las pantallas de menor resolución. Aun así, una fuente serif puede tener más sentido para tu sitio. Si estás escribiendo un blog sobre manuscritos medievales, una fuente serif probablemente sea más fiel a su carácter. Si vendes muebles modernos o enseñas una clase de codificación, una fuente sans serif puede crear un estilo estricto, pero contemporáneo.

Al elegir una fuente, hazte algunas preguntas sobre tu público y tu contenido para reducir las opciones. Considera: 

• ¿De qué trata tu sitio web? ¿Cuál es su objetivo principal? 
• ¿Quién visitará tu sitio? ¿Cuál es su grupo etario? 
• ¿Cuál es el estado de ánimo que evoca tu marca? ¿Divertido o serio? ¿Moderno o clásico? 

Después de que tengas una sensación del tono y la textura de tu sitio, navega por nuestra colección de más de 600 fuentes de Google y 1 000 fuentes de Adobe para encontrar una fuente que coincida con tu estilo único. Ten en cuenta que esta colección no incluye todas las fuentes disponibles de Google o Adobe. El panel Fuentes muestra de forma predeterminada los paquetes de fuentes más populares y los usados más recientemente para ayudar a acotar tus opciones. Si sabes el nombre de la fuente de Adobe o Google que prefieres, puedes buscarlo. 

Mezclar y combinar

Así como el vino y el queso, algunas fuentes son perfectas para los maridajes. Si estás usando una fuente sans serif simple, prueba combinarla con una fuente serif más ornamentada. Las fuentes delgadas e intricadas combinan bien con las fuentes en negrita.

En el panel Fuentes, empieza por explorar las combinaciones predefinidas en la pestaña Mixtas. Intenta encontrar fuentes serif y sans serif que coincidan con el ritmo y el estado de ánimo que evoca tu sitio.

Cuando se trata de tipografía, menos es más. Es mejor no tener más de dos fuentes en todo el sitio. Dos opciones complementarias hacen que tu sitio sea legible, a la vez que destacan con estilo los puntos clave.

Para obtener aún más contraste, experimenta con diferentes tamaños de texto. ¿Quieres destacar un nuevo producto en tu tienda? Intenta usar un encabezado. ¿Estás redactando una entrada de blog larga? Utiliza un tamaño de fuente más pequeño, pero accesible. Asigna diferentes tamaños a distintos grupos de texto para mantener el mensaje coherente en todo el sitio. 

Dar carácter a través del color

¿Cuál es la gran idea de tu sitio web? Si vendes ropa de playa o exhibes tus retratos fotográficos, combinar el contenido de tu sitio con un esquema de colores puede crear su carácter. La ropa de playa puede funcionar bien con tonos azules y amarillos, mientras el blanco y negro clásico permite que tu fotografía original se destaque. 

Sea cual sea tu visión, hay una paleta de colores que puede mostrar de qué se trata. Para empezar, echa un vistazo a tu alrededor. Si tienes un restaurante, deja que su combinación de colores sea tu guía. ¿Quieres hacer un blogging sobre la naturaleza? Los tonos tierra pueden evocar el estado de ánimo adecuado. ¿Organizas una clase de fitness? Los colores brillantes y estimulantes podrían ser más motivadores. Si tienes un logotipo de marca, considera incorporar su color en contrastes, como botones y navegación. 

Otra excelente manera de empezar es con tus imágenes. Mira las imágenes que usas con tu marca y comprueba si hay ciertos colores o tonos que aparecen una y otra vez. Utiliza el panel Colores para buscar una paleta que coincida con tus imágenes o bien, carga una imagen y permite que tu sitio genere una paleta de colores por ti. 

Al igual que con la tipografía, demasiados colores pueden hacer que el mensaje se vea confuso. Cuando te apegas a los temas generados automáticamente por tu paleta de colores, tu sitio está equilibrado y es más fácil explorarlo. Si estás personalizando los colores de tu tema, guarda los colores fuera de tu paleta para tener detalles más sutiles, como botones e íconos de redes sociales.

Asegúrate de que los colores no desentonen. Un color amarillo sobre un fondo blanco puede hacer que el texto sea ilegible, mientras que una fuente negra sobre un fondo rojo induce dolor de cabeza a algunas personas. Mantener un alto contraste entre colores también ayuda a mantener el sitio accesible. 

Sobre todo, diviértete. Tu sitio es una extensión de tus pensamientos e identidad en el mundo online. Squarespace te ayuda a plasmar tus ideas, pero puedes hacerlas propias en términos de carácter, color, tono y diseño. Si un sitio que te hace sentir como en casa o en tu espacio de trabajo, querrás volver a visitarlo y mejorar a medida que tus ideas sigan fluyendo y evolucionando.

Más ayuda

Para obtener más ayuda para diseñar tu sitio, explora nuestros otros recursos: 

• Ve nuestra serie de videos sobre buenas prácticas de diseño.
• Recibe consejos de la comunidad en Squarespace Forum.
• Contrata un diseñador independiente a través del Squarespace Marketplace para personalizar el diseño de tu sitio.