Las fuentes para las páginas con código HTML
Las fuentes en HTML son muy importantes para el sitio, porque si eliges la
correcta, puedes mejorar la estética general de tu página y permitir a los
visitantes leer el contenido más fácilmente. Pero si eliges la incorrecta, podría
tener un impacto negativo en el aspecto del sitio y la legibilidad del contenido.
Una fuente también puede afectar el rendimiento del sitio web, tanto positiva
como negativamente. Depende de si estás utilizando una fuente segura para la
web o no.
Ten en cuenta que para cambiar la fuente a través de HTML, puedes usar el
atributo de estilo dentro de la etiqueta <p> que define un párrafo. Aquí hay un
ejemplo:
En este ejemplo hay tres tipos de fuente: Courier, Arial y Helvetica, pero las
fuentes segunda y tercera son copias de seguridad en caso de que no se
encuentre la primera o no se instale correctamente.
La fuente segura para la web es aquella que se instala universalmente en todos
los dispositivos, debido que se almacenan localmente y por esto, el sitio web se
carga más rápido.
Esto afecta al SEO, ya que la velocidad de carga de la página es uno de los
factores que se tienen en cuenta al clasificar las páginas en el SERP.
Existen cinco familias de fuentes, estas son:
• Cursiva (por ejemplo, Zapf-Chancery)
Las fuentes en la familia Cursiva imitan la escritura humana y las letras
generalmente se unen de manera fluida. Muchas personas asocian los tipos de
letras Cursivas con una escritura y caligrafía más rápidas.
• Fantasía (por ejemplo, Star Wars)
La familia de fuentes Fantasía, o Fantasy, generalmente tiene elementos
decorativos en cada letra pero aún representa los caracteres. Muchos libros
o películas de ficción usan tipos de letra de este conjunto de fuentes para
sus títulos, para fortalecer el matiz del contenido.
• Serif (por ejemplo, Times New Roman)
La característica más notable de esta familia de fuentes es una línea
pequeña al final de un trazo grande en una letra o símbolo. Estos tipos de
letras para títulos crean una sensación de formalidad y elegancia. Varias
páginas web utilizan principalmente Serif para el texto del cuerpo.
• Sans-serif (por ejemplo, Helvetica)
A diferencia de serif, Sans-serif no tiene la línea pequeña adjunta a cada
letra. Además, la mayoría de las fuentes de esta familia suelen tener un
ancho de trazo similar, lo que lo hace moderno y minimalista.
• Monospace (p. Ej., Courier)
Cada letra y símbolo de las fuentes Monospace ocupan exactamente el
mismo espacio horizontalmente. Como las fuentes son consistentes y
fáciles de distinguir, a menudo se usan con máquinas de escribir y
terminales de computadora.
Las mejores fuentes seguras para la web:
1. Arial 11. Calibri
2. Times New Roman 12. Optima
3. Heveltica 13. Cambria
4. Times 14. Garamond
5. Courier New 15. Perpetua
6. Verdana 16. Monaco
7. Courier 17. Didot
8. Arial Narrow 18. Brush Script MT
9. Candara 19. Lucida Bright
10. Ginebra 20. Copperplate
Propiedades para las fuentes
• font-size: tamaño de letra
• font-family: tipo de letra
• color: color de letra
• background-color: color de fondo
• padding: relleno - distancia entre el margen y el contenido
• margin: margen
• width: ancho
• border-style: estilo de borde
• border-color: color de borde
• border-width: ancho de borde
Valores para estas propiedades:
• font-size: estos valores son números, normalmente seguidos por la
expresión px.
• font-family: siempre se escriben nombres de fuentes seguras para la web.
• color: aquí se escribe el nombre del color en inglés o en formato
hexadecimal. Ejemplos:
Los siguientes son los colores seguros para la web, pero no quiere decir que no
puedas utilizar cualquier otra combinación que esté en el rango del código
hexadecimal.
• background-color: aquí se escribe el nombre del color en inglés o en
formato hexadecimal. Este se aplica al párrafo.
• padding: relleno - distancia entre el margen y el contenido. Este valor se
indica normalmente en pixeles. Puede especificarse más su aplicación:
o padding-top: superior
o padding-botton: inferior
o padding-left: izquierda
o padding-right: derecha
• margin: es el margen entre el texto y el borde de la página. Así como está,
se aplicará en todos los 4 lados, pero puede usarse así:
o margin -top: margen superior
o margin -botton: margen inferior
o margin -left: margen izquierda
o margin -right: margen derecha
• width: este ancho del párrafo o columna, se mostrará normalmente en
pixeles.
• border-style: aplica un borde en el elemento que se indica. Algunos de
estos estilos pueden ser:
o none
o hidden
o dotted
o dashed
o solid
o double
o groove
o dotted solid double dashed
o dotted solid
o initial
• border-color: aquí se escribe el nombre del color en inglés o en formato
hexadecimal. Este se aplica al párrafo.
• border-width: este se indica, normalmente en pixeles.
