Cómo cambiar el tipo de letra de tu plantilla en Squarespace
Dónde personalizar el tipo fuente de tus textos en Squarespace y mejores prácticas para combinar tipografías.
Tutorial de video abajo👇
También voy a mostrarte cómo debes establecer una buena jerarquía sobre los distintos encabezados que aparecen en la web (Título 1, título 2…), que sean claros para tus visitantes y para que optimicen en los motores de búsqueda.
En este caso me estoy refiriendo a la versión 7.1 de Squarespace, la más reciente al momento de escribir esta entrada. Si te encuentras en la versión 7.0, no te preocupes, tengo otro artículo y tutorial donde te explico cómo hacerlo en las plantillas más populares como Brine.
Si no sabes en qué versión de Squarespace está tu web, checa este post.
Si estás en la versión anterior, checa este tutorial.
En esta nueva versión tenemos un apartado especial para las fuentes (tipografía).
Tips para elegir y combinar tipografías
Mejores prácticas
Estilo de la letra
Para la aplicación web, te recomiendo que te quedes entre las Serif (serifas) y Sans Serif, ya que Display, Handwriting y Monospace pueden quedar bien para distintos gráficos, pero para la web son más difíciles de leer o quitan pulcritud al sitio y, en muchos casos, no son ideales para encabezados o párrafos largos.
Serif
Son las tipografías con remaches en los acabados de las letras o círculos en los bordes.
Tienden a ser muy elegantes, transmiten lujo, más asociadas a medios impresos o, incluso, pueden dar una apariencia más vintage.
Funcionan muy bien tanto para encabezados y párrafos.
Ejemplo tomado de GOOGLE FONTS 1
Sans Serif
Son tipografías de líneas muy limpias y transmiten una vibra mucho más moderna y minimalista.
También funcionan muy bien tanto para encabezados y párrafos.
Ejemplo tomado de GOOGLE FONTS 2
¿Cuántos tipos de letra combinar?
Idealmente te recomiendo que te quedes con dos tipografías dentro de tu sitio web, una para títulos y otra para párrafos. Si utilizas más fuentes puedes volver más lenta la web, además de que podrías abrumar a los visitantes al dar un look demasiado cargado.
En caso de que quieras usar una tercera tipografía, recomiendo que la reserves únicamente para acentuar algunas palabras destacadas.
Incluso puedes quedarte con sólo una tipografía, como es el caso de mi sitio web, simplemente voy cambiando los tamaños y grosores de las letras, a veces utilizo cuadros para resaltar, pero en todo el sitio uso la misma tipografía.
Título 1
Título 2
Título 3
Párrafos
Google Fonts
Siempre que busco combinaciones tipográficas me gusta comenzar por Google Fonts ya que son tipografías súper seguras para utilizar en tu web debido a que la licencia es libre.
No todos los tipos de letras que aparecen en Google Fonts están disponibles en Squarespace, sin embargo, muchas de las más populares sí y hay funciones de esta página que nos ayudan a elegir buenas combinaciones.
Haz click en Categorías para encontrar los estilos.
Una vez que hayas elegido un tipo de letra, al hacer click en la misma entrarás a la página con su descripción. Haciendo scroll hasta el final de la página, encontrarás las combinaciones más populares con el tipo de letra que hayas seleccionado. Puedes probar como queda tanto el encabezado como los párrafos.
Tip: Uso de Canva
Si usas este programa para crear diversos gráficos para tu negocio, revisa que las fuentes estén disponibles tanto en Canva como en Squarespace para combinar el tipo de letra para los gráficos con la tipografía que uses en tu web.
Jerarquía de los encabezados para SEO y experiencia de usuario
Además de las tipografías, otro aspecto que debes cuidar es la aplicación de las mismas. Con esto me refiero al tamaño que deben tener tus encabezados ya que esto dirige la atención de los visitantes y también ayuda a que los motores de búsqueda sepan de qué se trata tu sitio y dónde está la información más relevante.
Como regla general, en tus páginas, coloca tu primer encabezado en un H1, el cual sólo utilizarás una vez a lo largo de ésta. Después utiliza los H2, H3 hasta H4 para destacar los títulos. Estos tamaños sí pueden aparecer más veces por página.
Cambiar las tipografías en Squarespace
Desde el panel de Inicio dirígete a Diseño y después al apartado de Fuentes.
Squarespace de hecho te sugiere combinaciones de Serif, San Serif o el uso de ambas.
Haciendo scroll en este apartado encontrarás que puedes editar los Estilos globales de texto:
Títulos
Párrafos
Botones
Disposiciones varias
Las primeras tres categorías se explican por sí solas, sin embargo la última no tanto. La categoría de disposiciones varias que se refiere al estilo de aplicaciones como el tipo de letra de precios, categorías y otros metadatos.
Otro apartado es el de Asignar estilos y aquí podrás cambiar lo que aparece en tu menú de navegación.
Haciendo click en cada apartado de los Estilos globales de texto encontrarás que puedes ajustar:
La familia tipográfica
El peso de la letra* (si es más fina o más negrita)
El estilo de la letra* (normal o cursiva)
La altura de la línea (separación entre párrafos)
Espacio entre las letras
Transformación de texto (sólo mayúsculas, sólo minúsculas, etc)
El tamaño
* Dependen de la familia tipográfica, no todas ofrecen diversos grosores o la opción de dejarla cursiva.
Importante:
Puedes realizar estos ajustes por apartado. Por ejemplo todos los títulos, o todos los párrafos, etc.
Si quieres cambiar el estilo de un solo título, por ejemplo de un H3, tienes que hacerlo con código.
Mi guía de estilo en plantillas Premium
Esta guía la incluyo en todas mis plantillas Premium, sin embargo puedes crearla para tu propia web.
Como te muestro en el video, la uso para tener una visión global de cómo los cambios de Diseño, en este caso de FUENTES, juegan entre sí.
y recuerda:
#SéDiferenteHazLaDiferencia
