• HTML
  • CSS
  • JS

    Teorías CSS

  • Especificidad

  • Metodología BEM

  • Teoría Medidas de Texto

  • Archivo Normalize.CSS

  • Teoría de las Cajas

  • Propiedades

  • Selectores CSS

  • Pseudo-Elementos

  • Pseudo-Clases

  • Propiedades de Cajas

  • Propiedad Position

  • Propiedad Display

  • Diseños CSS

  • Object-fit-Object-position

  • Colores CSS

  • Flex-Box

  • Grid-Box

  • Responsive Design

  • Transition

  • Animaciones

  • Propiedad Transform

  • Variables CSS

  • Filtros CSS

  • Otros

  • Errores Comunes

Propiedades de texto CSS

A continuación se definen las diferentes propiedades para el texto disponibles en CSS:

Font-Size

Se trata de la propiedad encargada de definir el tamaño del texto, requiere que se le ingrese un valor numérico en alguno de los diferentes tipos de medidas que reconoce, para definir el tamaño del texto, el tamaño correspondiente a cada unidad numérica utilizada puede cambiar según cuál sea la unidad de medida utilizada.

Las medidas que acepta pueden agruparse en dos grupos:

  • Medidas Fijas: Son aquellas expresadas en valores fijos y estandarizados que no dependen de ningún factor externo, sin importar la circunstancia siempre se expresarán en la misma dimensión, las diferentes medidas de este tipo son:

    • PX: píxeles

    • Cm: Centímetros

    • mm: Milímetros

    • Pt: Puntos

  • Medidas Relativas: Se tratan de aquellas medidas que están sujetas a las características del contenedor en el que se encuentran, son empleadas principalmente para los diseños responsive, ya que se ajustan en base a los cambios que ocurran en el contenedor en cuestión, las medidas aceptadas de este tipo son:

    • Rem:

    • Em: Esta unidad de medida cambia su valor en función de las dimensiones del contenedor del elemento actual, por lo tanto se basa en la herencia para definir el valor de cada unidad "em", para definir su valor toma en cuenta propiedades como padding, margin, font-size y básicamente cualquier propiedad que acepte valores de medidas, que se aplique en el contenedor.

    • Viewport: Se trata de un valor que se ajusta en referencia a las dimensiones de la pantalla del dispositivo.

Nota: todas estas medidas se desglosan de mejor forma en el apartado Teoría de las medidas.

Font-Family

Se trata de la propiedad encargada de definir la tipografía aplicada en la página o elemento en cuestión.

Line-Height

Esta propiedad define la altura de la línea del texto, para funcionar toma como base las dimensiones de texto actual, el concepto del funcionamiento de su medida es el siguiente.

Por defecto el valor de esta propiedad es de 1, lo que resulta en que las dimensiones de la línea sean iguales al espacio ocupado por el texto.

Esta medida toma como punto de origen la mitad del texto, distribuyendo la mitad de sus dimensiones hacia arriba y hacia abajo de la siguiente forma:

Por lo tanto sea cual sea el valor asignado a esta propiedad la mitad de este define la distancia del extremo superior de la línea respecto al centro del texto, mientras que la otra mitad hace lo propio con el extremo inferior.

La altura de la línea puede ser modificada para ocupar un espacio mayor al ocupado por el texto de la siguiente forma:

De esta forma se puede generar separación entre las diferentes líneas de un texto, creando estilos más entendibles y amigables para la vista,

Nota: A "line-height" se le puede asignar cualquier valor, incluyendo décimas, simplemente se utilizaron valores enteros para el ejemplo para facilitar la explicación, lo importante es entender que sea cual sea el valor aplicado este se dividirá en dos, cada mitad de este se asignará a los segmentos superior e inferior de la línea.

Font-Weight

Se trata del grosor de las letras de la fuente, su valor se aplica en cientos es decir 100, 200, 300, etc. hasta llegar a los 900.

El efecto de esta propiedad puede variar según cuál sea la fuente utilizada ya que en algunas se genera diferenciación con cada valor, mientras que otras puede que variaciones de valor pequeñas como de 100 a 200 no generen una diferencia en el texto.

Por ejemplo en la siguiente fuente se aplicó inicialmente un valor de 100 seguido de uno de 700.

Text-align

La función de esta propiedad es bastante simple, define el dónde se ubicará el texto en función a su contenedor, los posibles valores de esta propiedad son:

  • Center: Establece que el texto se ubique en el centro del contenedor

  • Justify: Establece que el texto se justifique dentro de su contenedor

  • Left: Establece que el texto se ubicará a la izquierda del contenedor

  • Right: Establece que el texto se ubicará a la derecha del contenedor

  • Start: Define que el texto se ubicará en la parte superior del contenedor

  • End: Define que el texto se ubicará en la parte inferior del contenedor

Direction

Se trata de una alternativa a la propiedad text-align, sin embargo su efecto es básicamente el mismo.

Cuenta con los siguientes valores para definir la orientación del texto:

  • ltr: Este valor significa "left to right" es decir de izquierda a derecha

  • rtl: Este valor significa "right to left" es decir de derecha a izquierda

Ejemplo

Letter Spacing

Esta propiedad permite definir la separación entre las letras de un texto, esta propiedad acepta unidades de medidas como valor :

Ejemplo

User-select

La función de esta propiedad es exclusivamente impedir que el usuario pueda seleccionar un texto, para lograr esto es necesario aplicar un valor none en la propiedad.

Ejemplo

Text-shadow

Esta propiedad funciona exactamente igual que box-shadow salvo por dos diferencias, la primera es que esta propiedad se aplica al texto, y la segunda radica en que no es necesario introducir el valor del ancho del borde de la sombra, ya que los textos no tienen bordes, esta propiedad carece de ese dato.

Aun así esta propiedad necesita de los otros valores para su correcto funcionamiento, esos valores son:

  1. El primer valor a ingresar se trata de la ubicación de la sombra en el eje X

  2. El segundo valor a ingresar se trata de la ubicación de la sombra en el eje Y

  3. El tercer valor se trata del desenfoque, es decir el tamaño de la sombra

  4. El cuarto y último valor consiste en el color de la sombra, al igual que otras propiedades esta acepta los diferentes formatos de color CSS

Nota: Si se desea un efecto más intenso es posible repetir el efecto las veces que hagan falta añadiendo nuevamente los valores siempre y cuando se respeten dos cosas, la primera es añadir una coma (,) entre cada repetición de los valores y la segunda es culminar la declaración de la propiedad con el punto y coma (;)

Extra

Color

Realmente esta propiedad no se considera de texto sin embargo ya que al utilizar esta propiedad entre otras cosas el texto se ve afectado se podría nombrar en este apartado, después de todo utilizar la propiedad "color" es la forma adecuada de seleccionar el color a utilizar para un texto.

Importar Fuentes

  1. Para empezar hay que obtener el link del archivo CSS que contenga la fuente deseada

  2. Procedemos a llamarlo desde el archivo HTML de la página utilizando una etiqueta "link"

  3. Una vez llamado el archivo procedemos a implementarlo, para hacerlo simplemente aplicamos la propiedad "font-family" en CSS con el respectivo nombre de la fuente importada

Nota: siempre que se importe una fuente lo mejor es colocar una segunda fuente que actuará como un respaldo en el caso de que no se pueda acceder a la fuente principal, de la siguiente forma:

Nota: Para evitar errores las fuentes están separadas por una coma (,)

Contacto

¿Quién soy?

Mi nombre es Carlos Miguel Puche Moreno, estoy estudiando programación web de forma autodidacta, si quieres saber más visita mi perfil de GitHub haciendo clic en mi fotografía, o visita mis redes sociales:

Redes

Currículum