Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

Cómo usar CSS para personalizar los estilos de fuente (Diseño Web)

VALORACIÓN DEL ARTÍCULO:
5/5


Fuentes y CSS

CSS es la manera más efectiva de ajustar las fuentes en su página web. Puede controlar la familia tipográfica, el tamaño, el color, el peso y muchos otros aspectos de la tipografía.

Las propiedades de las fuentes en CSS son una de las formas más comunes de hacer que su página sea más distintiva y única. Es fácil cambiar el color, el tamaño e incluso la cara (la fuente misma) de su texto con las propiedades de las fuentes CSS.

  • color
  • font-family
  • tamaño de fuente

Hay tres partes en una fuente:

  • teñir
    • Este es el color que la fuente mostrará en la pantalla.
  • envergadura
    • Así de grande o pequeño será el tipo de letra que se mostrará en la pantalla.
  • fisonomía
    • Esta es la familia de fuentes, a la que a menudo se hace referencia como la fuente real.

Colores de fuente

Para cambiar el color del texto, simplemente use la propiedad CSS color style. Puede utilizar nombres de colores o códigos hexadecimales. Como con todos los colores de la web, es mejor usar colores seguros para el navegador.

Pruebe los siguientes estilos en sus páginas web:

esta fuente es de color rojo
esta fuente es de color azul

Tamaños de fuente

Cuando se establece el tamaño de fuente en la web se puede establecer en tamaños relativos o ser muy específico utilizando píxeles, centímetros o pulgadas. Sin embargo, los tamaños de fuente más exactos están pensados para ser usados para impresión y no para páginas web, donde cada persona que visita su sitio web puede tener una resolución, tamaño de monitor o configuración de fuente predeterminada diferente. Por lo tanto, si elige 15px como su tamaño estándar, podría sorprenderse desagradablemente al ver qué tan grande o pequeña es la fuente que rinde a sus clientes.

Te recomiendo que uses ems para el tamaño de la fuente. Los ems permiten que su página permanezca accesible sin importar quién la esté viendo, y los ems están diseñados para renderizar la pantalla. Deje sus píxeles y puntos para el renderizado de impresión. Para cambiar el tamaño de la fuente, ponga el siguiente estilo en su página web:

esta fuente es 1em
esta fuente es.75em
esta fuente es 1.25em

Caras de fuente

La cara de tu fuente es lo que mucha gente piensa cuando piensa «fuente». Puedes declarar cualquier cara de fuente que desees, pero recuerda, si tu lector no tiene esa fuente instalada, su navegador intentará encontrar una coincidencia para ella, y su página no tendrá el aspecto que tú deseabas.

Para solucionar este problema, puede especificar una lista de nombres de caras, separados por comas, para que el navegador los utilice en orden de preferencia. Éstas se denominan pilas de fuentes. Tenga en cuenta que una fuente estándar en un PC (como Arial) puede no ser estándar en un Macintosh. Así que siempre debe ver sus páginas con una máquina mínimamente instalada (y preferiblemente en ambas plataformas) para asegurarse de que su página se vea como está diseñada, incluso con un mínimo de fuentes.

Una de mis pilas de fuentes favoritas es Esta es una colección de fuentes sans-serif y aunque ginebra y arial no se parecen mucho, ambas son bastante estándar en ordenadores Macintosh y Windows. Incluyo helvetica y helv para clientes en otros sistemas operativos como Unix o Linux que podrían no tener una biblioteca de fuentes robusta.

esta fuente es sans-serif
esta fuente es serif

TAMBIÉN TE INTERESA

marca vivo

La marca vivo atisba un futuro con robots en nuestras casas

La industria tecnológica avanza a pasos agigantados, y en este escenario, la marca vivo se está postulando desde China como uno de los actores clave en la innovación digital. Durante la Conferencia Anual Boao Forum 2025 for Asia, celebrada en Boao, Hainan, la compañía ha presentado su nueva visión del futuro, marcada por la convergencia

SPC Care

Así funciona SPC Care, la primera app de cuidado de personas mayores en remoto

Presentada en 2024, SPC Care es la primera app en España de cuidado a distancia de los mayores. La solución, exclusiva de la marca para dispositivos SPC, permite a cuidadores y familiares de personas mayores controlar de forma remota el teléfono móvil del usuario sénior mediante la gestión de la completa totalidad de los parámetros del dispositivo para facilitar

Peugeot-ChatGPT

Ok Peugeot: un año de idilio entre Peugeot-ChatGPT

Para quien aún no lo sepa, ChatGPT no solo está presente en el móvil y en el ordenador, sino también en los coches. Desde el matrimonio Peugeot-ChatGPT, la firma francesa cumple su primer aniversario con esta herramienta con resultados muy satisfactorios. La marca fue una de las primeras del sector en integrar la Inteligencia Artificial