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

Instagram-Creator-Marketplace

España, a la espera del Instagram Creator Marketplace

Instagram es una de las redes sociales de mayor impacto en la población española. Desde su irrupción, la figura del influencer ha crecido enormemente en el mundo del marketing y las marcas. La herramienta Instagram Creator Marketplace puede seguir fortaleciendo a estos prescriptores, visto el potencial que empieza a tener este servicio en Estados Unidos.

avatares-Roblox

Vámonos de shopping en Roblox: Mango inaugura su primera tienda

En dinámico mundo de los juegos online, Roblox (con más de 70 millones de usuarios activos diarios) se ha destacado como una plataforma que ofrece a los participantes una experiencia única y diversa. Una de las características más populares de Roblox es su sistema de personalización de avatares, que permite a los jugadores expresar su

Snapdragon-8-Gen-3

Snapdragon 8 Gen 3, el chip de Qualcomm que empujará la IA en los móviles

La IA ha llegado al universo de los smartphones. Los últimos lanzamientos ya se anuncian con la inteligencia como protagonista. De igual manera, las grandes actualizaciones de software vienen marcada por la presencia de nuevas funciones movidas bajo los parámetros de la inteligencia artificial generativa. Al margen de los desarrollos a nivel de software, es

Ecowatch-1-de-Maxcom

Con el Ecowatch 1 no tendrás excusas para pasarte a un reloj inteligente

Sabemos que es muy difícil convencer a un perfil de personas que reniegan de un smartwatch a comprarse un reloj inteligente y quitarse el de toda la vida. No obstante, vamos a intentarlo con el Ecowatch 1 de Maxcom.  Es tarea complicada porque el gusto por los relojes suele estar muy definido en ciertas personas.

simulador-de-bodas

¿Te casas? La IA y DeWeed pueden ayudarte en la planificación de tu boda

La planificación de una boda es un proceso emocionante pero a menudo abrumador. Desde la selección del lugar perfecto hasta la elección del vestido ideal, hay innumerables decisiones que tomar para que todo salga según lo planeado en el gran día. Tradicionalmente, esta tarea ha supuesto muchos quebraderos de cabeza para los novios. Una vez