Primer CSS Utilidades Tipográficas

Primer CSS es un marco CSS gratuito de código abierto basado en principios que sientan las bases para los componentes básicos de diseño, incluidos el espaciado, la fuente y el color. Esta estrategia asegura que nuestros patrones sean consistentes y compatibles entre sí. Los principios de CSS orientado a objetos, el CSS funcional y la arquitectura BEM afectan su enfoque de CSS. Es extremadamente reutilizable y adaptable. Fue hecho usando el sistema de diseño GitHub. Primer CSS es obvio y transparente.

En este artículo, vamos a discutir las utilidades tipográficas que se proporcionan en Primer CSS. La tipografía es uno de los aspectos más importantes de la apariencia de una página web. Una buena elección de estilo y tamaño de tipografía puede cambiar todo el aspecto de una página web.  

Primer CSS Utilidades Tipográficas y Clases Utilizadas:

Utilidades de encabezados: se utilizan principalmente para diseñar y personalizar los encabezados como queramos.

• h1-h6: Todas las clases de utilidades de encabezado se utilizan para cambiar un elemento a un encabezado. El rango 1-6 se usa para determinar el tamaño y el peso de la fuente de ese elemento. 

Incluso si agregamos una clase «h2» a un elemento h3 , el elemento h3 actuará y se verá como un elemento h2. 

Sintaxis:

<p class="h1">. . . .</p>

Utilidades de altura de línea:   el uso de estas clases de utilidad se utiliza principalmente para especificar la cantidad de espacio entre las líneas de un elemento.

• lh-default: esta clase agrega el espacio predeterminado de una altura de línea entre las líneas.
• lh-condensed: esta clase agrega un espacio de media altura de línea entre las líneas.
• lh-condensed-ultra: esta clase agrega un espacio de un cuarto de altura de línea entre las líneas.
• lh-0: Esta clase se usa para no tener espacio entre dos líneas. 

Sintaxis:

<p class="lh-condensed">. . . .</p>

Utilidades de Estilos Tipográficos: Sirve para personalizar los textos de la página web.

• text-normal: al usar esta clase, el peso de la fuente, el estilo y la alineación serán los predeterminados. 
• text-italic: Al usar esta clase, la alineación se cambia a cursiva . 
• text-bold: al usar esta clase, el peso de la fuente se cambia a negrita . 
• text-semibold: al usar esta clase, el peso de la fuente se cambia a semi-negrita . 
• text-light: al usar esta clase, el peso de la fuente se cambia a light. 
• text-uppercase: Al usar esta clase, los alfabetos se cambian a MAYÚSCULAS. 
• no-wrap: al usar esta clase, la oración nunca se ajustará a la siguiente línea. 
• ws-normal: al usar esta clase, la oración se ajustará cuando sea necesario. 
• text-underline: Al usar esta clase, el texto está subrayado. 
• no-underline: Al usar esta clase, el texto no se subraya. 
• texto enfatizado: al usar esta clase, el peso de la fuente se establece en negrita y el tamaño de la fuente aumenta. 
• texto-pequeño: al usar esta clase, el peso de la fuente no está en negrita y el tamaño de la fuente se reduce.
• plomo: al usar esta clase, el peso de la fuente se establece en semi-negrita y el tamaño de la fuente aumenta mucho. 
• text-mono: Usando esta clase todos los caracteres tienen el mismo ancho.

Sintaxis:

<p class="text-underline">. . . .</p>

Separación de palabras: las dos clases de utilidad de separación de palabras se utilizan para especificar cómo se dividirá la línea cuando las palabras lleguen al final.

• wb-break-word: cuando se usa esta clase, las palabras largas que exceden la longitud de la línea se rompen cuando la línea llega al final, otras simplemente se llevan a la siguiente línea.
• wb-break-all: cuando se usa esta clase, todas las palabras se rompen cuando la línea llega al final. 

Sintaxis:

<p class="wb-break-all">. . . .</p>

Utilidades de alineación: esta utilidad se utiliza para alinear el texto.

• text-left: Se utiliza para alinear el texto a la izquierda.
• text-center: Se utiliza para alinear el texto al centro.
• text-right: Se utiliza para alinear el texto a la derecha.

Sintaxis:

<p class="text-center">. . . .</p>

Ejemplo 1: en el código a continuación, el encabezado está subrayado y en cursiva usando h2, text-italic y text-underline.

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Typographic Utilities</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="ml-2">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
          
        <h3>
            Primer CSS Typographic Utilities
        </h3> <br />
    </div>
  
    <p class="h2 text-italic text-underline m-4 ">
        GeeksforGeeks
    </p>
  
</body>
  
</html>

Producción:
 

 

Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Typographic Utilities.

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Typographic Utilities</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="ml-2">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        <h3>
            Primer CSS Typographic Utilities
        </h3><br />
    </div>
  
    <p class="lh-condensed text-semibold 
              text-uppercase text-center m-4 ">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles.
    </p>
  
</body>
  
</html>

Producción:

 

 
Referencia: https://primer.style/css/utilities/typography/