Al personalizar el aspecto de su sitio web, no puede olvidar la tipografía: cómo organiza y diseña el texto en la página. Dependiendo de la marca, querrá cambiar la fuente, el tamaño y el color para que coincidan.
Por ejemplo, si prefiere gris oscuro a negro en su combinación de colores, querrá cambiar el color de fuente de texto predeterminado. Si está en los medios, puede elegir una fuente sans-serif que se considera la tipografía más fácil de leer. Pero si estás en la industria creativa, puedes optar por un tipo de letra más decorativo. Estas son solo algunas de las razones por las que debe cambiar el estilo de fuente en su sitio web.
En esta publicación, le mostraremos cómo cambiar las fuentes en HTML para que su texto se destaque, deleitar a sus lectores y aumentar las conversiones.
Cómo cambiar la fuente en HTML
Echemos un vistazo a cómo cambiar la fuente en su sitio con un pequeño código. Discutiremos:
Empecemos.
Cómo cambiar el tipo de fuente en HTML
Para cambiar el tipo de fuente usando solo HTML, use la propiedad de familia de fuentes CSS. Establezca el valor deseado y colóquelo dentro del atributo de estilo. A continuación, agregue ese atributo de estilo a un elemento HTML, como un párrafo, encabezado, botón o etiqueta de intervalo.
Si bien este enfoque solo requiere que agregue código a su archivo HTML, en realidad usa CSS. Más específicamente, esta técnica se llama CSS en línea. CSS incorporado significa que el código HTML y CSS se colocarán juntos en la sección del cuerpo del documento HTML.
Veamos un ejemplo básico: usar CSS incorporado para cambiar el tipo de fuente de un párrafo. Agregaré un atributo de estilo al elemento del primer párrafo, lo que significa que el estilo solo tendrá ese párrafo. Los párrafos y encabezados restantes de la página permanecerán con la fuente Times New Roman, el tipo de fuente predeterminado en la mayoría de los navegadores.
ver la pluma Cómo cambiar el tipo de fuente en HTML [Inline CSS] por HubSpot (@hubspot) en CódigoPen.
Si bien el CSS incorporado funciona bien para cambiar un solo elemento en la página, recomendamos otros estilos de CSS, a saber, CSS externo, en lugar del CSS incorporado.
El CSS externo se coloca en un archivo CSS que está separado del HTML. Para la mayoría de los desarrolladores, esta se considera la forma correcta de cambiar el tipo de letra en HTML, ya que no es necesario copiar y pegar las mismas reglas de estilo en cada etiqueta. En su lugar, apunte a todos los elementos de un tipo a través del selector de CSS.
Aprende más: Una guía para principiantes de HTML y CSS
¿Quieres saber más sobre HTML? Descarga nuestra guía gratuita para conocer las mejores prácticas para comenzar con HTML.
Por ejemplo, supongamos que quiero cambiar la fuente de cada elemento de párrafo a Arial. Podría usar el selector «p» de CSS para apuntar a todos los párrafos:
ver la pluma Cómo cambiar el tipo de fuente en HTML [Internal CSS] por HubSpot (@hubspot) en CódigoPen.
Puede usar CSS externo con código CSS simple o junto con una estructura como Bootstrap CSS.
Ahora que entendemos cómo cambiar el tipo de fuente, prestemos atención al tamaño de fuente.
Cómo cambiar el tamaño de fuente en HTML
Para cambiar el tamaño de fuente en HTML, use la propiedad CSS font-size. Establezca el valor deseado y colóquelo dentro del atributo de estilo. A continuación, agregue ese atributo de estilo a un elemento HTML, como un párrafo, encabezado, botón o etiqueta de intervalo.
Continuando con nuestro ejemplo anterior, cambiemos el tamaño de fuente del párrafo a 26 píxeles usando CSS. Igual que arriba, comenzaré agregando el atributo de estilo al elemento del primer párrafo, lo que significa que el estilo solo tendrá ese párrafo. Los párrafos y encabezados restantes de la página conservarán sus tamaños predeterminados.
ver la pluma Cómo cambiar el tamaño de fuente en HTML [Inline CSS] por HubSpot (@hubspot) en CódigoPen.
Ahora digamos que quiero cambiar la fuente de cada elemento de párrafo a 26px. Puedo usar un selector de CSS para apuntar a todos los párrafos:
ver la pluma Cómo cambiar el tamaño de fuente en HTML [Internal CSS] por HubSpot (@hubspot) en CódigoPen.
Cambiar el tamaño de fuente en el mismo párrafo
Otro beneficio de CSS es que le brinda un control más granular sobre su código, por lo que puede, por ejemplo, aplicar diferentes tamaños de fuente al texto en el mismo párrafo.
Si quiero mantener un párrafo en el tamaño de fuente predeterminado, simplemente puedo ajustar el texto que quería cambiar de tamaño en las etiquetas. . A continuación, agregaré un atributo de estilo con la propiedad de tamaño de fuente establecida en el valor que quiero.
ver la pluma ¿Cómo cambiar el tamaño de fuente en el mismo párrafo? [Inline CSS] por HubSpot (@hubspot) en CódigoPen.
Para lograr esto con CSS externo, todavía envuelvo el texto que quiero cambiar de tamaño en las etiquetas . Pero agregaré un atributo id al elemento span. Usando el selector de ID, configuré el intervalo en un tamaño diferente.
ver la pluma cómo cambiar el tamaño de fuente en el mismo párrafo [Internal CSS] por HubSpot (@hubspot) en CódigoPen.
Para obtener información más detallada sobre las propiedades y los valores que puede usar para cambiar el tamaño del texto, consulte Cómo cambiar el tamaño de fuente en CSS.
Cómo cambiar el color de la fuente en HTML
Para cambiar el color de la fuente en HTML, use la propiedad de color CSS. Establezca el valor deseado y colóquelo dentro del atributo de estilo. A continuación, agregue ese atributo de estilo a un elemento HTML, como un párrafo, encabezado, botón o etiqueta de intervalo.
Ahora cambiemos el color de fuente del párrafo a naranja Lorax (código de color hexadecimal # FF7A59) usando CSS. Como se indicó anteriormente, comenzaré agregando un atributo de estilo al primer elemento del párrafo, lo que significa que solo se aplicará estilo a ese párrafo. Los párrafos y encabezados restantes de la página permanecerán en el color predeterminado (negro).
ver la pluma Cómo cambiar el color de la fuente en HTML [Inline CSS] por HubSpot (@hubspot) en CódigoPen.
Ahora digamos que quiero cambiar el color de cada elemento de párrafo a granate. Puedo usar un selector de CSS para orientar todos los párrafos con CSS externo:
ver la pluma Cómo cambiar el color de la fuente en HTML [Internal CSS] por HubSpot (@hubspot) en CódigoPen.
Para saber cómo cambiar el color de fondo del texto, lee Cómo cambiar el color del texto y el fondo en CSS.
Cómo cambiar la fuente en un div en HTML
Un div en HTML es solo un elemento general que puede dividir su sitio web en secciones para que pueda orientarlas con propiedades CSS únicas. Cambiar la fuente en un div no es diferente a cambiar la fuente en un párrafo o espacio.
Si desea cambiar el tipo de fuente, el tamaño y el color en la página, puede envolverlo con etiquetas div y usar un selector de CSS para diseñar este elemento.
ver la pluma Cómo cambiar la fuente en un div en HTML [Internal CSS] por HubSpot (@hubspot) en CódigoPen.
Etiqueta de fuente HTML
Érase una vez, los desarrolladores podían usar una etiqueta llamada para cambiar el estilo del texto en HTML. Si quisiera cambiar la fuente a Arial, escribiría la siguiente línea HTML:
<font face="Arial">Your text here.</font>
Sin embargo, la etiqueta de fuente quedó obsoleta en 1998 y fue reemplazada por CSS. El formato CSS es una alternativa más ligera y flexible a la etiqueta de fuente HTML.
La mejor manera de cambiar fuentes en HTML y CSS
Con una comprensión básica del diseño web, puede cambiar el tipo de fuente, el tamaño y el color. Esto le permite personalizar cada detalle de su sitio y aumentar la legibilidad de su contenido.
Nota del editor: esta publicación se publicó originalmente en julio de 2020 y se actualizó para que sea completa.
