Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos /Frontend SELF ES /Fuentes

Fuentes

Frontend SELF ES
Nivel 14 , Lección 1
Disponible

2.1 Propiedad font-family

Las fuentes juegan un papel clave en el diseño web, influyendo en la legibilidad y el atractivo visual del texto. Las familias de fuentes determinan el estilo general y las características de las fuentes que se pueden utilizar en las páginas web. En CSS, las fuentes generalmente se dividen en tres familias principales: serif, sans-serif y monospace. Vamos a ver cada una de ellas más en detalle.

Propiedad font-family

La propiedad font-family se utiliza para especificar la familia de fuentes. Puedes indicar varias fuentes, separándolas con comas, para que el navegador pueda usar la siguiente fuente en la lista si la primera no está disponible.

Java university

Ejemplo de uso de varias fuentes

    
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Ejemplo de uso:

CSS
    
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
HTML
    
      <body>
        <p>Este texto se muestra utilizando las fuentes Helvetica Neue, Helvetica o Arial.</p>
      </body>

2.2 Familia de fuentes serif

Las fuentes con serifas (serif) se caracterizan por tener pequeñas líneas o trazos añadidos a los extremos de las letras y símbolos. Estas fuentes dan al texto un aspecto más tradicional y formal.

Ejemplos de fuentes serif:

  • Times New Roman
  • Georgia
  • Garamond
  • Baskerville

Ejemplo de uso:

CSS
    
      body {
        font-family: 'Times New Roman', serif;
      }
HTML
    
      <body>
        <h1>Este es un encabezado</h1>
        <p>Este es un párrafo usando una fuente serif.</p>
      </body>

2.3 Familia de fuentes sans-serif

Las fuentes sin serifas (sans-serif) no tienen las pequeñas líneas al final de las letras y símbolos. Estas fuentes se ven más modernas y minimalistas, y a menudo se utilizan en el diseño web debido a su buena legibilidad en pantallas.

Ejemplos de fuentes sans-serif:

  • Arial
  • Helvetica
  • Verdana
  • Open Sans
CSS
    
      body {
        font-family: 'Arial', sans-serif;
      }
HTML
    
      <body>
        <h1>Este es un encabezado</h1>
        <p>Este es un párrafo usando una fuente sans-serif.</p>
      </body>

2.4 Familia de fuentes monospace

Las fuentes monoespaciadas (monospace) tienen el mismo ancho para todos los caracteres. Estas fuentes se utilizan a menudo para mostrar código, documentación técnica y tablas, donde es importante que los caracteres estén alineados verticalmente.

Ejemplos de fuentes monospace:

  • Courier New
  • Consolas
  • Monaco
  • Lucida Console

Ejemplo de uso:

CSS
    
      body {
        font-family: 'Courier New', monospace;
      }
HTML
    
      <body>
        <h1>Este es un encabezado</h1>
        <p>Este es un párrafo usando una fuente monospace.</p>
        <pre>
          function helloWorld() {
            console.log("Hello, world!");
          }
        </pre>
      </body>

Para mejorar la percepción y el estilo en las páginas web, a menudo se utiliza una combinación de diferentes familias de fuentes. Por ejemplo, los encabezados pueden estar en fuentes serif, mientras que el texto principal en fuentes sans-serif. Y claro, el código siempre en monospace.

Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION