Para personalizar completamente el aspecto de su sitio web, no puede olvidarse de la tipografía: cómo organizar y diseñar el texto. Dependiendo de su diseño, nicho de negocio y audiencia, es posible que desee cambiar el tipo de letra, el tamaño o el color de su fuente.
Por ejemplo, si prefiere un gris oscuro sobre el negro en su combinación de colores, querrá cambiar el color de fuente predeterminado de su texto. Si está en los medios, puede optar por una fuente sans serif, que se considera la tipografía más fácil de leer. Pero si está en el campo creativo, entonces puede optar por un tipo de letra decorativo como morris troya. Estas son solo algunas de las razones por las que es posible que desee diseñar la fuente en su sitio web.
Veamos cómo puede cambiar la fuente en su sitio con solo un poco de código. Cubriremos:
Cómo cambiar el tipo de fuente en HTML
Para cambiar el tipo de fuente en HTML, use la propiedad de familia de fuentes CSS. Establézcalo en el valor que desee y colóquelo dentro de un atributo de estilo. Luego agregue este atributo de estilo a un elemento HTML, como un párrafo, encabezado, botón o etiqueta de intervalo.
Así es como usas CSS en línea. CSS en línea significa que su HTML y CSS se colocarán juntos en la sección del cuerpo de su documento HTML. Entonces, técnicamente, cambiará la fuente «en HTML».
Solía simplemente poder usar la etiqueta de fuente para cambiar el estilo del texto en HTML. Digamos que desea cambiar su fuente a Arial, tamaño 20px y un bonito color naranja. Habría escrito la siguiente línea de HTML:
<font face="Arial" size="20px" color="#FF7A59">Your text here.</font>
Sin embargo, esta etiqueta de fuente quedó obsoleta en 1998, por lo que no funciona con la última versión de HTML, HTML5. Ha sido reemplazado por una forma mucho más efectiva de cambiar la apariencia del texto: a saber, CSS. El formato de texto CSS es una alternativa más ligera y flexible a la etiqueta de fuente HTML, y no es difícil de aprender.
Reescribamos el ejemplo anterior usando CSS para cambiar el tipo de fuente de un párrafo. Es importante tener en cuenta que estoy usando CodePen, que usa Times New Roman como tipo de letra predeterminado. Agregaré el atributo de estilo al elemento del primer párrafo, lo que significa que solo se aplicará estilo a este párrafo. El resto de los párrafos y títulos de la página permanecerán en Times New Roman.
Aquí está el HTML con CSS en línea:
<h2>How to Change Font Type in HTML [Inline CSS]</h2>
<p style="font-family: Arial">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>Since I’m using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family property set to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman.
</p>
Aquí está el resultado:
ver la pluma oNBMjeB de Christina Perricone (@hubspot) sobre CódigoPen.
Si bien CSS en línea funciona perfectamente para cambiar un solo elemento en la página, se recomiendan otros estilos de CSS en lugar de CSS en línea. Por ejemplo, el CSS interno se puede colocar en la sección de encabezado del documento HTML para diseñar varios elementos en la página.
Por ejemplo, digamos que quiero cambiar la fuente de cada elemento de párrafo a Arial. Entonces podría usar un selector de CSS para apuntar a todos los párrafos y colocarlo dentro de la sección de encabezado de la página.
Aquí está el CSS:
p {
font-family: Arial;
}
Aquí está el HTML:
<h2>How to Change Font Type in HTML [Internal CSS]</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>Since I’m using the CodePen editor, the default typeface is Times New Roman. That means changing the typeface of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-family property to "Arial." The headings on the page will remain Times New Roman.
</p>
Aquí está el resultado:
ver la pluma GRrBpyQ de Christina Perricone (@hubspot) sobre CódigoPen.
Ahora que entendemos cómo cambiar el tipo de fuente usando CSS en línea e interno, centremos nuestra atención en el tamaño de la 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. Establézcalo en el valor que desee y colóquelo dentro de un atributo de estilo. Luego agregue este atributo de estilo a un elemento HTML, como un párrafo, encabezado, botón o etiqueta de intervalo.
Para continuar reescribiendo el primer ejemplo que usó la etiqueta de fuente obsoleta, cambiemos el tamaño de fuente de un párrafo a 20px con CSS. Para este ejemplo, seguiré usando CodePen, pero voy a cargar Bootstrap CSS en la página. Eso significa que, además de que el tipo de fuente predeterminado es Helvetica, el tamaño de fuente predeterminado de los párrafos será de 16 px, el encabezado 2 será de 32 px y el encabezado 3 será de 28 px.
Igual que arriba, voy a comenzar agregando el atributo de estilo al elemento del primer párrafo, lo que significa que solo se aplicará estilo a este párrafo. Los demás párrafos y encabezados de la página seguirán teniendo sus tamaños predeterminados.
Aquí está el HTML con CSS en línea:
<h2>How to Change Font Size in HTML [Inline CSS]</h2>
<p style="font-size: 20px">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>I’m using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is also Helvetica. That means changing the size of the first paragraph will require me to use a style attribute that contains the CSS font-size property set to "20px." The other elements on the page are not targeted by inline CSS and therefore remain their default sizes.
</p>
Aquí está el resultado:
ver la pluma Cómo cambiar el tamaño de fuente en HTML [Inline CSS] de Christina Perricone (@hubspot) sobre CódigoPen.
Ahora digamos que quiero cambiar la fuente de cada elemento de párrafo a 20px. Entonces podría usar un selector de CSS para apuntar a todos los párrafos y colocarlo dentro de la sección de encabezado de la página.
Aquí está el CSS:
p {
font-size: 20px;
}
Aquí está el HTML:
<h2>How to Change Font Size in HTML [Internal CSS]</h2>
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>I’m using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is also Arial. That means changing the size of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-size property to "20px." The headings on the page will their default sizes.
</p>
Aquí está el resultado:
ver la pluma Cómo cambiar el tamaño de fuente en HTML [Internal CSS] de Christina Perricone (@hubspot) sobre CódigoPen.
Cambiar el tamaño de fuente dentro del mismo párrafo
Otra ventaja de CSS sobre la etiqueta de fuente en desuso es que le brinda un control más granular sobre su código para que pueda hacer cosas como cambiar el tamaño de fuente del texto dentro del mismo párrafo.
Si quisiera mantener el párrafo en su tamaño de fuente predeterminado, simplemente envolvería el texto cuyo tamaño quería cambiar en las etiquetas . Luego agregaría un atributo de estilo con la propiedad de tamaño de fuente establecida en el valor que quiero.
Aquí está el HTML con CSS en línea:
<h2>How to Change Font Size Within the Same Paragraph [Inline CSS]</h2>
<p>This is dummy text. This is more dummy text. <span style="font-size: 22px">This is larger text.</span> This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>I’m using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of text within a paragraph, I will wrap the text in span tags. Then, I will add a style attribute that contains the CSS font-size property set to a value other than 16px. In this example, it's set to 22px.
</p>
Aquí está el resultado:
ver la pluma Cómo cambiar el tamaño de fuente dentro del mismo párrafo [Inline CSS] de Christina Perricone (@hubspot) sobre CódigoPen.
Si quisiera cambiar el tamaño de fuente del párrafo y el texto dentro de ese párrafo a dos tamaños diferentes, sería mejor que usara CSS interno. Todavía envolvería el texto cuyo tamaño quería cambiar en las etiquetas . Luego agregaría un atributo de ID tanto al párrafo como al elemento de intervalo. Usando los respectivos selectores de ID, establecería el párrafo y el elemento de extensión en dos tamaños diferentes.
Aquí está el CSS:
#larger {
font-size: 18px;
}
#smaller {
font-size: 14px;
}
Aquí está el HTML:
<h2>How to Change Font Size Within the Same Paragraph [Internal CSS]</h2>
<p id="larger">This is dummy text. This is more dummy text. <span id="smaller">This is smaller text.</span> This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
</p>
<h3>The Explanation</h3>
<p>I’m using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of a paragraph and text within a paragraph, I will wrap the text in span tags and add ID attributes to both the paragraph and span element. Then, I will use ID selectors and set them to differnet font sizes in the head section of the page.
</p>
Aquí está el resultado:
ver la pluma Cómo cambiar el tamaño de fuente dentro del mismo párrafo [Internal CSS] de Christina Perricone (@hubspot) sobre CódigoPen.
Para una mirada más profunda a las propiedades y valores que puede usar para cambiar el tamaño de su texto, lea Cómo cambiar el tamaño de fuente en CSS.
Cómo cambiar el color de fuente en HTML
Para cambiar el color de la fuente en HTML, use la propiedad de color CSS. Establézcalo en el valor que desee y colóquelo dentro de un atributo de estilo. Luego agregue este atributo de estilo a un elemento HTML como un párrafo, encabezado, botón o etiqueta de intervalo.
Usando el mismo ejemplo anterior, ahora cambiemos el color de fuente de un párrafo a naranja Lorax (código de color hexadecimal #FF7A59) con CSS. Para este ejemplo, usaré CodePen Editor y no cargaré Bootstrap CSS. Pero si desea utilizar ese marco, el color de fuente predeterminado es el mismo (es decir, negro) y también lo es el proceso.
Igual que arriba, voy a comenzar agregando el atributo de estilo al elemento del primer párrafo, lo que significa que solo se aplicará estilo a este párrafo. El otro párrafo y los encabezados de la página seguirán siendo del color predeterminado (negro).
Aquí está el HTML con CSS en línea:
<h2>How to Change Font Color in HTML [Inline CSS]</h2>
<p style="color: #FF7A59">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy...