Textos, Tamaños, Alineaciones, etiquetas
Aquí encontrarás documentación y ejemplos sobre la tipografía en Quickly, abarcando configuraciones globales, encabezados, texto del cuerpo, listas, Alineaciones de texto y más.
Configuraciones Globales
Recuerda que siempre tienes la libertad de personalizar cada aspecto de este framework. Puedes lograrlo creando tus propias reglas CSS y vinculando tu archivo CSS después de las llamadas a los estilos predeterminados de Quickly en la sección de header de tu documento HTML.
Encabezados H
| Etiqueta | Descripción |
|---|---|
| h1 | El Font size aplicado es de 2.5rem |
| h2 | El Font size aplicado es de 2rem |
| h3 | El Font size aplicado es de 1.75rem |
| h4 | El Font size aplicado es de 1.5rem |
| h5 | El Font size aplicado es de 1.25rem |
| h6 | El Font size aplicado es de 1.12rem |
Tamaños aplicados a las etiquetas H
h1 título de Quickly
h2 título de Quickly
h3 título de Quickly
h4 título de Quickly
h5 título de Quickly
h6 título de Quickly
<h1>Este es el titulo de Quickly en h1</h1>
<h2>Este es el titulo de Quickly en h2</h2>
<h3>Este es el titulo de Quickly en h3</h3>
<h4>Este es el titulo de Quickly en h4</h4>
<h5>Este es el titulo de Quickly en h5</h5>
<h6>Este es el titulo de Quickly en h6</h6>
Clases .hn°
Las clases .h1 hasta .h6 están disponibles para cuando necesitas replicar el estilo de la fuente de un encabezado, pero no puedes utilizar el elemento HTML correspondiente.
.h1 (2,3,4,5,6)
| Clase | Descripción |
|---|---|
| .h1 | El Font size aplicado es de 2.5rem |
| .h2 | El Font size aplicado es de 2rem |
| .h3 | El Font size aplicado es de 1.75rem |
| .h4 | El Font size aplicado es de 1.5rem |
| .h5 | El Font size aplicado es de 1.25rem |
| .h6 | El Font size aplicado es de 1.12rem |
Ejemplos de los tamaños
h1 título de Quickly
h2 título de Quickly
h3 título de Quickly
h4 título de Quickly
h5 título de Quickly
h6 título de Quickly
<p class="h1">Este es el titulo de Quickly con clase h1</h1>
<p class="h2">Este es el titulo de Quickly con clase h2</h2>
<p class="h3">Este es el titulo de Quickly con clase h3</h3>
<p class="h4">Este es el titulo de Quickly con clase h4</h4>
<p class="h5">Este es el titulo de Quickly con clase h5</h5>
<p class="h6">Este es el titulo de Quickly con clase h6</h6>
Etiquetas semánticas
Este es un listado de las etiquetas semánticas incluidas en este framework.
| Etiqueta | Descripción |
|---|---|
| p | Por defecto, la altura para los párrafos es de 1rem, equivalente a 16px. |
| strong | La etiqueta "strong" tiene asignado un font weight bold. |
| em | La etiqueta "em" tiene asignado un font weight normal y cursiva. |
| ins | La etiqueta "ins" tiene asignado un font weight normal y con underline. |
| small | La etiqueta "small" tiene asignado un font size de .8rem (1rem = 16px) = 12px de altura. |
| del | La etiqueta "del" tiene asignado un tachado. |
| mark | La etiqueta "mark" tiene asignado un background y un color de texto. |
Ejemplos de etiquetas
P. Este es el ejemplo de la etiqueta parrafo.
Strong. Este es el ejemplo de la etiqueta strong.
Em. Este es el ejemplo "para etiqueta em" en el parrafo.
Ins. Este es el ejemplo para etiqueta ins en el parrafo.
Small. Este es el ejemplo para etiqueta small.Del. Este es el ejemplo "para etiqueta del" en el parrafo.
Mark. Este es el ejemplo para etiqueta mark en el parrafo.
<p>P. Este es el ejemplo parrafo.</p>
<p>Strong. Este es el ejemplo <strong>strong</strong>.</p>
<p>Em. Este es el ejemplo <em>"para etiqueta em"</em>.</p>
<p>Ins. Este es el ejemplo <ins>para etiqueta ins</ins>.</p>
<small>Small. Este es el ejemplo para etiqueta small.</small>
<p>Del. Este es el ejemplo <del>"para etiqueta del"</del>.</p>
<p>Mark. Este es el ejemplo <mark>para etiqueta mark</mark>.</p>
Clases para aplicar subrayado u tachado a texto
Presentamos tres clases diseñadas para agregar subrayado y tachado al texto sin comprometer la integridad semántica de tu sitio web.
| Clase | Descripción |
|---|---|
| .underline | Aplica una línea de subrayado al texto que tenga la clase asignada. |
| .midleline | Aplica un tachado a la mitad del texto que tenga la clase asignada. |
| .overline | Aplica una línea encima del texto que tenga la clase asignada. |
Ejemplos de etiquetas
Underline. Este es el ejemplo de la etiqueta.
Middleline. Este es el ejemplo de la etiqueta.
Overline. Este es el ejemplo de la etiqueta.
<p class="underline">Underline. Este es el ejemplo de la etiqueta.</p>
<p class="middleline">Middleline. Este es el ejemplo de la etiqueta.</p>
<p class="overline">Overline. Este es el ejemplo de la etiqueta.</p>
Alturas de texto
Cuando quieras destacar un texto dentro de un párrafo, por ejemplo, por encima de los demás, puedes considerar el uso de las clases font-s-n°. Estas te proporcionarán la libertad de elegir el tamaño más adecuado.
.font-s-n°
| Clase | Descripción |
|---|---|
| .font-s-1 | El Font size aplicado es de 2rem |
| .font-s-2 | El Font size aplicado es de 1.75rem |
| .font-s-3 | El Font size aplicado es de 1.5rem |
| .font-s-4 | El Font size aplicado es de 1.25rem |
| .font-s-5 | El Font size aplicado es de 1.2rem |
| .font-s-6 | El Font size aplicado es de 1.12rem |
| .font-s-7 | El Font size aplicado es de .8rem |
| .font-s-8 | El Font size aplicado es de .6rem |
Ejemplos de los tamaños
Altura clase font-s-1
Altura clase font-s-2
Altura clase font-s-3
Altura clase font-s-4
Altura clase font-s-5
Altura clase font-s-6
Altura clase font-s-7
Altura clase font-s-8
<p class="border bg-white rounded p-1 font-s-1">Altura clase font-s-1</p>
<p class="border bg-white rounded p-1 font-s-2">Altura clase font-s-2</p>
<p class="border bg-white rounded p-1 font-s-3">Altura clase font-s-3</p>
<p class="border bg-white rounded p-1 font-s-4">Altura clase font-s-4</p>
<p class="border bg-white rounded p-1 font-s-5">Altura clase font-s-5</p>
<p class="border bg-white rounded p-1 font-s-6">Altura clase font-s-6</p>
<p class="border bg-white rounded p-1 font-s-7">Altura clase font-s-7</p>
<p class="border bg-white rounded p-1 font-s-8">Altura clase font-s-8</p>
Estilo y Grosor de la fuente
Cuando quieras destacar un texto dentro de un párrafo, por ejemplo, por encima de los demás, puedes considerar el uso de las clases font-s-n°. Estas te proporcionarán la libertad de elegir el tamaño más adecuado.
.font-s-n°
| Clase | Descripción |
|---|---|
| .font-l | Font-Light. Muestra con un grosor menor que el de su elemento padre, proporcionando un aspecto más delicado y sutil. |
| .font-n | Font-Normal. Es el peso predeterminado de la mayoría de las fuentes, proporcionando un grosor estándar y equilibrado. |
| .font-b | Font-Bold. Muestra la fuente con un grosor mayor, destacándolo y haciéndolo más prominente. |
| .font-i | Font-Italic. Hace que el texto se incline hacia la derecha, dándole un énfasis especial y diferenciándolo del texto normal. |
Ejemplos de los tamaños
font-l Este es el texto para ejemplo.
font-n Este es el texto para ejemplo.
font-b Este es el texto para ejemplo.
font-i Este es el texto para ejemplo.
<p class="font-l">Este es el texto para ejemplo.</p>
<p class="font-n">Este es el texto para ejemplo.</p>
<p class="font-b">Este es el texto para ejemplo.</p>
<p class="font-i">Este es el texto para ejemplo.</p>
Interlineado
Las clases de interlineado en Quickly CSS Grid ajustan el espacio entre líneas de texto, mejorando la legibilidad y el diseño web. Aplica distintos valores para adaptarse a diversos tamaños de pantalla y estilos, asegurando una presentación clara y atractiva de tu contenido. Optimiza la experiencia de lectura en tus sitios web con las opciones de interlineado en Quickly.
.line-h-n°
| Clase | Descripción |
|---|---|
| .line-h-1 | Por defecto, el HTML aplica un interlineado con una altura de línea de 1.25 veces el tamaño de la fuente del elemento. Este ajuste introduce un espacio adicional entre las líneas de texto, lo que mejora la legibilidad de forma sutil. |
| .line-h-2 | El interlineado de línea será una altura de línea de 1.5 veces el tamaño de la fuente, proporcionando un espacio mayor entre las líneas de texto, lo cual es útil para mejorar la legibilidad de párrafos de texto más largos. |
| .line-h-3 | El interlineado de línea será una altura de línea de 1.75 veces el tamaño de la fuente, añadiendo un espacio considerable entre las líneas, ideal para bloques de texto más densos. |
| .line-h-4 | El interlineado de línea será una altura de línea de 2 veces el tamaño de la fuente. Este valor añade un espacio amplio entre las líneas, mejorando significativamente la legibilidad en textos largos. |
| .line-h-5 | El interlineado de línea será una altura de línea de 2.25. Con esta configuración, la altura de línea será el doble del tamaño de la fuente, proporcionando un espacio muy amplio entre las líneas de texto, ideal para maximizar la legibilidad y crear un diseño visualmente espacioso. |
| .line-h-6 | El interlineado de línea será una altura de línea de 2.5 veces el tamaño de la fuente del elemento. |
Ejemplos de los tamaños
line-h-1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
line-h-2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
line-h-3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
line-h-4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
line-h-5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
line-h-6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<p class="line-h-1">Lorem ipsum dolor sit amet...</p>
<p class="line-h-2">Lorem ipsum dolor sit amet...</p>
<p class="line-h-3">Lorem ipsum dolor sit amet...</p>
<p class="line-h-4">Lorem ipsum dolor sit amet...</p>
<p class="line-h-5">Lorem ipsum dolor sit amet...</p>
<p class="line-h-6">Lorem ipsum dolor sit amet...</p>
Grandes textos
Si necesitas destacar en grande, puedes utilizar las siguientes clases para hacer tu diseño aún más llamativo.
.font-s-n°
| Clase | Descripción |
|---|---|
| .dis-s-1 | El Font size aplicado es de 5rem |
| .dis-s-2 | El Font size aplicado es de 4.5rem |
| .dis-s-3 | El Font size aplicado es de 4rem |
| .dis-s-4 | El Font size aplicado es de 3.5rem |
| .dis-s-5 | El Font size aplicado es de 3rem |
| .dis-s-6 | El Font size aplicado es de 2.75rem |
Ejemplos de los tamaños
dis-s-1
dis-s-2
dis-s-3
dis-s-4
dis-s-5
dis-s-6
<h1 class="dis-s-1">dis-s-1</h1>
<h1 class="dis-s-2">dis-s-2</h1>
<h1 class="dis-s-3">dis-s-3</h1>
<h1 class="dis-s-4">dis-s-4</h1>
<h1 class="dis-s-5">dis-s-5</h1>
<h1 class="dis-s-6">dis-s-6</h1>
Alineaciones de textos
Para alinear textos, existen tres formas: a la derecha, al centro y a la izquierda.
.text-aOpción (r,c,l)
| Clase | Descripción |
|---|---|
| .text-ar | Text-Align-Right. Alinea el texto a la derecha. |
| .text-ac | Text-Align-Center. Alinea el texto al centro. |
| .text-al | Text-Align-Left. Alinea el texto a la izquierda. |
Ejemplos de alineación
<div class="text-ar">text-right</div>
<div class="text-ac">text-center</div>
<div class="text-al">text-left</div>
Transformaciones de textos
Para tranformar textos, existen tres formas más una: Capitalize, Lowercase, Uppercase y none.
.text-tOpción (c.l.u.n)
| Clase | Descripción |
|---|---|
| .text-tc | Text-Transform-Capitalize. Transforma el texto para que la primera letra de cada palabra esté en mayúscula y las demás en minúscula. |
| .text-tl | Text-Transform-Lowercase. Convierte todo el texto en minúsculas. |
| .text-tu | Text-Transform-Uppercase. Convierte todo el texto en mayúsculas. |
| .text-tn | Text-Transform-None. Mantiene el texto sin modificar, sin ninguna transformación de mayúsculas o minúsculas. |
Ejemplos de transformación
<div class="text-tc">text-tc</div>
<div class="text-tl">text-tl</div>
<div class="text-tu">text-tu</div>
<div class="text-tn">text-tn</div>
Evita desbordamientos en textos extensos. Actualización
Para evitar el desbordamiento de texto largo dentro de un contenedor, utiliza la clase .text-wrap. Esta clase ajusta automáticamente el texto para que se divida en varias líneas cuando sea necesario, manteniendo todo dentro del contenedor.
.text-wrap
| Clase normal | Descripción |
|---|---|
| .text-wrap | Esta clase hace que el texto largo se ajuste correctamente y no cause desbordamiento del contenedor, manteniendo la apariencia del contenido dentro de los límites establecidos. |
| .text-nowrap | Esta clase evita que el texto se divida en varias líneas, manteniéndolo en una sola línea continua. Si el contenido excede el ancho del contenedor |
Ejemplo de desbordamiento
Con text-wrap
Puedes revisar más detalles del producto en el siguiente enlace: https://www.ejemplodesitioficticiodeloqueeltextopuedehacerenelcasodeunaurlmuylargacomoesteejemplo.com/seccion/contenido/detalle/producto/nombre-del-articulo-muy-largo-que-puede-causar-desbordamiento-en-el-contenedor-si-no-se-controla-correctamente
Sin text-wrap
Puedes revisar más detalles del producto en el siguiente enlace: https://www.ejemplodesitioficticiodeloqueeltextopuedehacerenelcasodeunaurlmuylargacomoesteejemplo.com/seccion/contenido/detalle/producto/nombre-del-articulo-muy-largo-que-puede-causar-desbordamiento-en-el-contenedor-si-no-se-controla-correctamente
<p class="text-wrap w-200" style="width: 200px; border: 1px dashed #ccc; display: block;">
Puedes revisar más detalles del producto en el siguiente enlace www.ejemplodesitioficticiodeloqueeltextopuedehacerenelcasodeunaurlmuylargacomoesteejemplo.com/seccion/contenido/detalle/producto/nombre-del-articulo-muy-largo-que-puede-causar-desbordamiento-en-el-contenedor-si-no-se-controla-correctamente
</p>
<p class="text-nowrap" style="width: 200px; border: 1px dashed #ccc; display: block;">
Puedes revisar más detalles del producto en el siguiente enlace www.ejemplodesitioficticiodeloqueeltextopuedehacerenelcasodeunaurlmuylargacomoesteejemplo.com/seccion/contenido/detalle/producto/nombre-del-articulo-muy-largo-que-puede-causar-desbordamiento-en-el-contenedor-si-no-se-controla-correctamente
</p>