Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan una sitio web.
Es importante usar una fuente que sea fácil de leer.
En CSS hay cinco familias de fuentes genéricas:
- Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.
- Las fuentes sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto moderno y minimalista
- Fuentes monoespaciadas : aquí todas las letras tienen el mismo ancho fijo. Crean un aspecto mecánico.
- Las fuentes cursivas imitan la escritura humana.
- Las fuentes de fantasía son fuentes decorativas/divertidas.
...
Diferencia entre fuentes Serif y Sans-serif
Nota: en las pantallas de las computadoras, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.
Algunos ejemplos de fuentes
Generic Font Family | Examples of Font Names |
---|---|
Serif | Times New Roman Georgia Garamond |
Sans-serif | Arial Verdana Helvetica |
Monospace | Courier New Lucida Console Monaco |
Cursive | Brush Script MT Lucida Handwriting |
Fantasy | Copperplate Papyrus |
La propriedad "font-family"
Nota si el nombre de la fuente es más de una palabra, debe estar entre comillas, como: "Times New Roman"
Ejemplo de 3 parrafos con 3 fuentes distintas
style="font-family: 'Times New Roman', 'Times, serif'"
style="font-family: Arial, Helvetica, sans-serif;"
style="font-family: 'Lucida Console', 'Courier New', monospace;"
Fuentes web seguras
no hay fuentes 100% completamente seguras para la web
siempre hay un posibilidad de que no se encuentre una fuente o no esté instalada correctamente
Por lo tanto, es muy importante utilizar siempre fuentes alternativas.
ejemplo
Aquí, hay tres tipos de fuentes: Tahoma, Verdana y sans-serif. La segunda y tercera fuentes son copias de seguridad, en caso de que no se encuentre la primera.
style="font-family: Tahoma, Verdana, sans-serif;"
La siguiente lista son las mejores fuentes web seguras para HTML y CSS:
- Arial (sans-serif)
- Verdana (sans serif)
- Tahoma (sans serif)
- Trebuchet MS (sans serif)
- Times New Roman (serif)
- Georgia (serif)
- Courier Nuevo (monoespaciado)
- Brush Script MT (cursiva)
Nota Antes de publicar su sitio web, siempre verifique cómo su las fuentes aparecen en diferentes navegadores y dispositivos, y siempre usan fuentes de reserva !
Ejemplo de las diversas fuentes
Esta fuente es "Arial"
Esta fuente es "Verdana"
Esta fuente es "Tahoma"
Esta fuente es "Trebuchet MS"
Esta fuente es "Times New Roman"
Esta fuente es "Georgia "
Esta fuente es ""
Esta fuente es ""
Ls fuentes secundarias mas usuales son las seguientes:
- Serif
- Sans serif
- monovolumen
- Cursivo
- Fantasía
Algunos ejemplos de estas fuentes
style="font-family: 'Times New Roman', Times, serif;"
style="font-family: Georgia, serif"
style="font-family: Garamond, serif"
style="font-family:Arial, Helvetica, sans-serif "
style="font-family:'Courier New', Courier, monospace "
style="font-family: 'Brush Script MT', cursive"
style="font-family: Copperplate, Papyrus, fantasy"
Estilos de fuentes
La propriedad font-style se utiliza para poner estilos a las fuentes
Esta propiedad tiene tres valores:
- normal - El texto se muestra normalmente
- cursiva - El texto se muestra en cursiva
- oblicuo - El texto está "inclinado" (oblicua es muy similar a cursiva, pero menos compatible)
Ejemplos de estilos de fuentes:
style="font-style: normal;"
style="font-style: italic;"
style="font-style: oblique;"
Propriedad "font-weight"
Ejemplos
style="font-weight: normal;"
style="font-weight: bold;"
Propriedad font-variant
Esta propriedad especifica si un texto debe o no mostrarse en letra minúscula.
En una fuente de mayúsculas pequeñas, todas las letras minúsculas se convierten en mayúsculas letras. Sin embargo, las letras mayúsculas convertidas aparecen en un tamaño de fuente más pequeño. que las letras mayúsculas originales en el texto.
style="font-variant: normal;"
style="font-variant: small-caps;"
Tamaño de fuente
La propriedad font-size estabelece el tamano de una fuente
Ser capaz de administrar el tamaño del texto es importante en el diseño web. Sin embargo, usted no debe usar ajustes de tamaño de fuente para hacer que los párrafos parezcan encabezados, o los encabezados parecen párrafos.
Los tamanhos de las fuentes se pueden expresar en : pixeles, em, porcentages
Ejemplo de tamanos de fuentes
style="font-size: 30px;"
style="font-size: 2.5em;"
style="font-size: 100%;"
Nota El tamaño se puede calcular de píxeles a em usando esta fórmula: píxeles / 16 = em
Fuentes google
Si no se encuentra una fuente que quede bien en nuestra pagina, podemos usar las fuentes google
Como se usan?
Simplemente agregue un enlace de hoja de estilo especial en la sección <head> y luego consulte la fuente en el CSS.
ejemplo de codigo
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; } </style> </head>
Si queremos usar una fuente llamada "Trirong" de Google Fonts:
codigo
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong"> <style> body { font-family: "Trirong", serif; } </style> </head>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias