Cómo cambiar la tipografía en el código HTML

¿Por qué cambiar la tipografía en HTML?

Con tantas opciones entre las que seleccionar en lo que respecta a la tipografía, y el tiempo que se tarda en aprender a aplicarla en HTML, podrías preguntarte por qué deberías cambiarla en vez de dejarla como la original.

Hay varias razones por las que podrías querer cambiar la tipografía en HTML, que vamos a comentar ahora. En resumidas cuentas, cambiar tu tipografía puede ayudar a que tu sitio web sea fabuloso para los visitantes y clientes potenciales, que a menudo decidirán si desean hacer negocios contigo según la impresión que se lleven de tu sitio web. A continuación, mostramos algunas formas más específicas en las que cambiar las tipografías en HTML puede ayudar a tu sitio web.

Renueva tu sitio web

Una de las razones principales por las que querrás cambiar la tipografía a veces es para darle a tu sitio web una imagen más fresca. O tal vez hagas unas rebajas de primavera u otro tipo de promoción y quieras llamar la atención sobre el aspecto de tu sitio web. Añade a eso el hecho de que, cuanto más atractivo y fácil de usar sea tu sitio web, más arriba te puedes posicionar en los resultados de motores de búsqueda.

Supongamos que has usado la tipografía estándar Times New Roman desde que creaste tu sitio web hace cinco años. Tus visitantes habituales la han visto cada vez que han visitado tu sitio. Los tiempos han cambiado, y muchos de tus nuevos espectadores buscan mucho más cuando visitan un sitio. Por lo tanto, al igual que cambian los tiempos, es hora de cambiar la tipografía de tu sitio web, también.

Al cambiar la tipografía de tu página, básicamente puedes "desempolvar" tu página un poco y darle una nueva imagen, posiblemente una que esté más al día y sea más fácil de leer.

Destaca las características importantes

Ya quieras destacar tu botón "Contacta con nosotros" o la sección sobre tu personal, puedes utilizar diferentes tipografías para resaltar determinados elementos o secciones de tu texto.

Otra razón por la que puedes querer mejorar la tipografía de tu sitio web es para promocionar nuevas funciones que puedas ofrecer. Diferentes tipografías pueden resaltar el contenido dentro de diferentes páginas y atraer la atención del usuario hacia un lugar en particular. Por lo tanto, puedes usar tipografías estratégicamente para guiar a los visitantes a través de tu embudo de ventas.

Por ejemplo, digamos que ofreces una promoción especial para clientes que compran por primera vez en tu sitio web. Al publicitar esta promoción en una tipografía que tenga un estilo o color audaz, puedes atraer atención hacia ella y generar potencialmente más clics. Este mayor nivel de visibilidad puede conducir finalmente a más conversión, lo que, a fin de cuentas, beneficia a tu negocio.

Consolida la identidad de la marca

La identidad de la marca es un componente vital de tu marketing. El propósito de esto es diferenciar a tu negocio de la competencia, mediante elementos que representen a tu empresa. Puedes usar los cambios de tipografía para lograrlo.

Consolidar la identidad de tu marca es otra razón para cambiar un poco tus tipografías de vez en cuando. Recuerda que tu marca y logotipo tienen mucho que ver con tu identidad en línea. Al igual que los arcos dorados significan "McDonalds," tu logotipo simboliza tu marca. Por lo tanto, si sabes cómo cambiar tipografías en HTML, podrás hacer esos cambios que necesitas para reforzar tu marca. Además, recuerda que cuando cambias la tipografía, no solo lo notarán los visitantes —los motores de búsqueda también pueden notarlo, y eso es importante para la SEO—.

Cómo cambiar la tipografía en el código HTML

En las siguientes secciones, hablaremos sobre cómo alterar la tipografía en tu código HTML para cambiar tres aspectos diferentes. Cuando hablamos de tipografía, no solo nos referimos a cambiar un aspecto de ella, sino al menos tres aspectos diferentes del código, para que puedas variar la apariencia en mayor medida.

HTML es un idioma que interpreta el navegador web, para mostrar a tus visitantes lo que tú le pides que les muestre. Si sabes cómo cambiar tipografías con HTML, puedes producir el resultado y el aspecto que quieras para tu sitio web.

Cómo cambiar el tipo de tipografía con HTML

Si deseas cambiar una tipografía en HTML, comienza con el tipo de tipografía. Es decir, si quieres usar una tipografía que realmente ayude a tu sitio a destacar, necesitas un cambio importante. Hay miles de tipos de tipografía. Solo tienes que conocer los parámetros y el idioma que vaya a entender el navegador para hacer los cambios.

Para cambiar el tipo de tipografía, toma nota de estos pasos. El siguiente método se utiliza para combinar el HTML tradicional con el CSS más moderno (“cascading style sheets”, hojas de estilo en cadena).

CSS: p { familia de la tipografía: Calibri; }

HTML: <h2> How to Change Font Type With HTML [Internal CSS]</h2> <p>Escribe lo que quieras escribir aquí, combinando el CSS con el HTML, para que el navegador recoja el símbolo de párrafo en el CSS. </p>

Cómo cambiar el tamaño de tipografía con HTML

Cuando quieras cambiar el tamaño de la tipografía, puedes usar una variación del siguiente código en su lugar:

CSS: p { tamaño de tipografía: 16 px; }

HTML: El HTML resultante tendrá un aspecto similar a este: <h2>How to Change Font Size With HTML [Internal CSS]</h2> <p>Una vez que te hayas encargado de la codificación CSS anterior, el HTML se verá así y aparecerá el texto con la nueva tipografía elegida. </p>

Cómo cambiar el color de la tipografía con HTML

CSS: p { color: #FF7A59; }

HTML: <h2>How to Change Font Color With HTML [Inline CSS]</h2> <p style="color: #FF7A59">Escribe lo que quieras aquí. El color de la tipografía debería aparecer ahora en el valor hexadecimal que le hayas asignado al aplicar los cambios. </p>

Nota: Si colocas el <p> (párrafo) las etiquetas del encabezamiento se refieren a CSS como {inline CSS}, en la mayoría de los casos esto debería funcionar bien, ya que el navegador lo interpreta como una referencia al encabezamiento que contiene el nuevo color, tamaño o estilo de tipografía. ¡Un poco de práctica lo perfeccionará!

Consejos para elegir una tipografía para el sitio web de tu empresa

Si has decidido cambiar la tipografía del sitio web de tu empresa, y vas a hacerlo en HTML, aquí tienes algunos consejos para hacerlo bien.

Elige una tipografía que se alinee con tu marca

Opta por una tipografía que se alinee con tu empresa y tu misión antes de cambiar la predeterminada. Por ejemplo, si te presentas como una marca de lujo de alta gama, un texto básico como Serif no encajaría bien.

Piensa siempre primero en el branding. No juegues con el HTML solo por el hecho de cambiar algo, aunque el cambio a veces es bueno. Pero piensa en qué dirán los cambios sobre tu marca. No te desvíes demasiado de la personalidad de tu marca. La tipografía que uses debe coincidir con las directrices generales de tu marca, y debe alinearse con su identidad.

Asegúrate de que el color de la tipografía que escojas sea fácil de leer.

Asegúrate de que el color de la tipografía que escojas sea fácil de leer. Ten cuidado de no distraerte del tema o propósito de tu sitio web al centrarte demasiado en los cambios. Haz que sea fácil de leer, y no cometas el error de usar un color de tipografía que pueda no ser legible para todos los usuarios.

Tienes que expresarte, y animar a los lectores a ir a tu página. Por lo tanto, necesitas una tipografía fácil de leer. Al hacerlo, puedes transmitir tu punto de vista sin confusiones ni frustraciones.

Aunque tengas una visión 20/20, recuerda que hay personas mayores y algunas con problemas de visión que no podrán leer el texto. Debes hacer contenido de primera, y comunicarte con el visitante para que vea el valor de tu marca. No hagas que tengan que entrecerrar los ojos para verlo.

Esto también puede ocurrir si usas una tipografía demasiado delgada para que se lea fácilmente. Nunca uses tipografías caligráficas, a menos que firmes con tu nombre al final o que haya otro motivo para usarla. Leer tipografías caligráficas es difícil a largo plazo, y no querrás hacer trabajar a tus visitantes para entender lo dices.

La sencillez es clave

Al final, volvemos a esa vieja frase que hemos escuchado tantas veces: que sea sencillo.

Menos es más cuando se trata de tu tipografía. Si bien debes dar personalidad a tu sitio web, lo sencillo siempre es mejor. Trata de no pasarte demasiado al elegir, para que sea llamativa, pero no cegadora.

Como hemos mencionado anteriormente, hay miles de tipografías que puedes usar —pero eso no significa que todas ellas sean prácticas para tu negocio—. No tiene nada malo elegir una tipografía sencilla y común para tu sitio web; una tipografía muy extraña o atrevida, por otro lado, puede distraer o desagradar a los visitantes.

Considera usar una tipografía versátil

Usa una tipografía versátil, para que te resulte más fácil programar, y sencilla, para facilitar la lectura a tus posibles espectadores.

Las tipografías versátiles suelen ser las mejores, porque tienden a conllevar el cambio justo para que el lector pueda interesarse más en el texto, sin distraerse de su significado.

Recuerda, en lo que debes centrarte es en el contenido, no en las tipografías bonitas. Con una tipografía versátil, puedes mantener la coherencia en una amplia variedad de páginas y aplicar la tipografía elegida a materiales de marketing, correos electrónicos, documentación y más.

Haz que tus tipografías destaquen solo cuando sea apropiado, y ello se ajuste a la idea o esencia en general de tu sitio y tu marca. Una vez más, considera siempre hacer primero el branding, y luego decide si una tipografía en particular encaja en las directrices de branding para tu organización.

Resolución de problemas de tipografía

Puedes solucionar problemas de tipografía repasando cuidadosamente la codificación. Asegúrate de que todas las etiquetas tengan un síntoma de cierre de ">". Asegúrate de que, cada vez que ya no desees utilizar esa tipografía, haya una etiqueta final.

Dónde encontrar tipografías que se ajusten a su marca

Si buscas en línea, puedes encontrar una lista de las diferentes tipografías que puedes usar. A continuación, puede introducirlas en tu etiqueta de tipografía. Cuando selecciones una, ten en cuenta la sensación que desees transmitir.

Usa la tipografía de tu empresa en todos los canales de marketing

Cuando cambies la tipografía en HTML para tu sitio web, usa la misma para todos los aspectos de tu marketing. Se convertirá en sinónimo de tu marca. De hecho, puedes aprender los conceptos básicos del correo electrónico en HTML e incluso usarlos en tus correos electrónicos.

Cambiar el tipo de tipografía, el color o el tamaño es una buena idea si puedes encontrar la que mejor se adapte a tu marca, tu propósito, tu logotipo o una promoción especial que estés planeando publicitar. Pero no te pases —que sea sencilla, sé fiel a tu marca sin excederte y ten cuidado de no crear lo que en TI llamamos un "HTML chapucero." Esto puede arruinar la experiencia del usuario de más de una manera, y no vale la pena.

Todo comienza con una idea. ¿Cómo deseas presentártela a ti mismo/a y a tu marca? ¿Quieres que parezca llamativa, llena de personalidad y diversión, o seria y sincera? Sea cual sea tu objetivo, tu tipografía y tu sitio web pueden ayudar a transmitir el mensaje que quieras hacer llegar.

Con Mailchimp, puedes solicitar de forma rápida y sencilla un dominio y crear un sitio web que sea fácil de usar y destaque las mejores partes de tu marca. También te permite crear páginas de destino de alta calidad, y llenar tu sitio web con contenido dinámico que te ayude a atraer y retener clientes. Sean cuales sean tus necesidades, no puedes equivocarte con al usar Mailchimp como CRM de marketing.