Texto

Estilos de texto

Text-align

Text-align es la propiedad que nos permite alinear horizontalmente el contenido de un elemento de bloque siempre que el contenido NO TENGA ANCHO DECLARADO. Sus valores son:

text-align: left;: Alinea el contenido a la izquierda.
text-align: right;: Alinea el contenido a la derecha.
text-align: center;: Alinea el contenido al centro.
text-align: justify;: Alinea el contenido de forma justificada.

Ejemplo:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi eius labore veritatis, itaque quidem unde dolore in animi commodi officiis mollitia qui excepturi recusandae perferendis nobis corporis exercitationem minus consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam repellendus possimus dolor cumque alias eos dignissimos nesciunt, aut adipisci exercitationem asperiores doloribus. Alias beatae debitis doloremque fugiat provident tempora eius! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo aperiam explicabo sequi laborum iure qui libero recusandae consequatur odit dolores commodi tempore, obcaecati, quidem maiores, repellat quas inventore? Excepturi, autem!

link centrado

Tipografia:

La tipografía es la ciencia que estudia el diseño y uso de los tipos de letra. Las fuentes son tipos específicos de letra.

Los glifos son cada uno de los dibujos que representan cada símbolo de la fuente, incluidos los espacios. Los estilos de fuente son las modificaciones que se hacen a las fuentes, como el grosor o la inclinación. Familia tipográfica, son las diferentes fuentes que pertenecen a una misma fuente base.

Cuando se usa una propiedad text-* se está afectando a un bloque completo. Cuando se usa una propiedad font-* se está afectando a la fuente del texto.

Fuentes predeterminadas:

Son las fuentes que se consideran seguras ya que son genéricas y no establecen una familia tipográfica, si no un estilo de fuente.

serif:: Fuentes que tienen serifas (adornos en los caracteres).
sans-serif:: Fuentes sin serifas.
monospace:: Fuentes que tienen el mismo espaciado entre todos sus caracteres.
cursive:: Fuentes que pretenden emular escritura a mano, con ligaduras y trazos fluidos.
fantasy:: Fuentes que suelen ser decorativas.

Fuentes desde un servidor remoto:

Son fuentes que se encuentran en un servidor y que se descargan para su uso, la más famosa es Google Fonts. Siempre que se usen fuentes no genéricas, se deben poner fuentes genéricas de fallback (respaldo).

Transformaciones de texto:

Text-transform:

Esta propiedad permite hacer transformaciones ESTÉTICAS en el texto. Admite los valores:

none:: No se aplicará ninguna transformación.
uppercase:: El texto se pondrá en mayúsculas.
lowercase:: El texto se pondrá en minúsculas.
capitalize:: Transforma la primera letra de cada palabra en mayúscula.

Font-style:

Esta propiedad permite definir el aspecto de una familia tipográfica. Admite los valores:

normal:: Escoge un tipo de letra clasificado como normal dentro de una familia de fuente.
italic:: Cursiva. Estilo caracterizado por una ligera inclinación de las letras hacia la derecha.
oblique:: Oblícua. Identica al anterior, salvo que esta inclinación se realiza de forma artificial.

Font-size:

Especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex.

Tipo de medida	Valores	Ejemplo
Medidas absolutas	xx-small	Texto xx-small
	x-small	Texto x-small
	small	Texto small
	medium	Texto medium
	large	Texto large
	x-large	Texto x-large
	xx-large	Texto xx-large
Medidas relativas	larger	Texto larger
	smaller	Texto smaller
Medida específica	px, %, em & rem	Texto de 20px

Font-weight:

Especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en normal y bold. Tambien Admite los siguientes valores:

Tipo de valor	Valores	Descripción y ejemplo
Valores absolutos	normal	Peso/grueso normal de la fuente. Igual a 400.
	bold	Grueso ancho (negrita). Igual que 700.
Valores relativos	lighter	Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).
	bolder	Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).
valor numérico	100, 200, 300, 400, 500, 600, 700, 800, 900	Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.

Adornos en el texto:

text-decoration:

Text-decoration: Esta propiedad permite controlar la línea que se puede poner en los textos. Admite los valores:

none:: Elimina cualquier línea.
overline:: Coloca una linea sobre el texto.
underline:: Coloca una linea bajo el texto.
line-through:: Coloca una linea tachando el texto.

text-shadow:

Text-shadow: Funciona exáctamente igual que box-shadow, con la única diferencia de que no admite el valor inset ni la expansión de la sombra. Los valores son:

offsetX:: Desplazamiento horizontal.
offsetY:: Desplazamiento vertical.
blur:: Desenfoque.
color:: Color, por defecto toma el del texto.

Texto con sombra

Espaciado en fuentes y textos:

letter-spacing:: Establece la separación entre caracteres, se puede establecer en cualquier medida válida para CSS.
word-spacing:: Establece la separación entre palabras, se puede establecer en cualquier medida válida para CSS.
line-height:: Establece el alto de cada línea, se puede dar una medida concreta o se puede poner un número que se multipliará por el font size del texto al que se lo estemos aplicando.

Ejemplos line-height:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum facilis, sed dolorum voluptates exercitationem voluptatum iure unde consequatur vel distinctio blanditiis iusto quas dolore a. Quos facere a fugiat ut? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut veniam iste labore saepe sequi fuga beatae nihil eligendi odio vero impedit reprehenderit optio, quia rerum dolor itaque illo nam corrupti!

Centrar UNA LINEA en un Box con line-height:

texto centrado

Orientación del texto:

writing-mode: define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques. Admite los valores:

horizontal-tb:: El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.
vertical-rl:: El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.
vertical-lr:: El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.

Ejemplo:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad dignissimos ipsam praesentium inventore cumque, autem aspernatur, molestias reiciendis dolorem laborum assumenda. Illo ratione doloribus neque perferendis iste facilis asperiores id?

Identación del texto:

text-indent: Genera una identación en la primer linea del texto.

Ejemplo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ex vero, minus tempora dolorem debitis deserunt. Sed nesciunt ipsum, labore harum omnis quod esse amet, debitis molestias quidem ab exercitationem!

Espacios en blanco:

Esta propiedad establece cómo se maneja el espacio en blanco dentro de un elemento. La propiedad especifica dos cosas:

Si y cómo se contrae el espacio en blanco.
Si las líneas pueden ajustarse en oportunidades de ajuste suave.

La propiedad white-space se especifica como una sola palabra clave elegida de los siguientes valores:

normal:: Las secuencias de espacios en blanco están colapsadas. Los caracteres de nueva línea en la fuente se manejan igual que otros espacios en blanco. Las líneas se rompen según sea necesario para llenar los cuadros de línea.
nowrap:: Contrae los espacios en blanco como para normal, pero suprime los saltos de línea (ajuste de texto) dentro de la fuente.
pre:: Se conservan las secuencias de espacios en blanco. Las líneas solo se rompen en caracteres de nueva línea en la fuente y en los elementos <br>.
pre-wrap:: Se conservan las secuencias de espacios en blanco. Las líneas se dividen en los caracteres de nueva línea, en <br> y según sea necesario para llenar los cuadros de línea.
pre-line:: Las secuencias de espacios en blanco están colapsadas. Las líneas se dividen en los caracteres de nueva línea, en <br> y según sea necesario para llenar los cuadros de línea.

Ejemplos:

Normal

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, eveniet ipsam. Quia sapiente dignissimos, a quos ut molestias at maxime vel totam cum veritatis ratione inventore aliquam nesciunt consequuntur autem!

nowrap

Lorem ipsum dolor, sit amet consectetur

pre

Lorem ipsum dolor sit amet consectetur

pre-wrap

pre-line

Romper palabras y textos extensos:

Hay ocaciones en la que un texto concreto (por ejemplo, un enlace muy extenso) no cabe dentro de un contenedor, por lo que el texto se desborda.

hola_mundo_soy_un_enlace_muy_extenso

hooooooooooooolaaaaaaaaaaaaa mundo soooooooooooooooooooooooooy un ejemplo muuuuuuuuuuuuuuuuuuuuuuuuuuy exagerado.

Para areglar este tipo de situaciones, existen diferentes propiedades.

hyphens:: Especifica cómo se deben dividir las palabras cuando el texto se ajusta a varias líneas.
overflow-wrap:: Se aplica a los elementos en línea, estableciendo si el navegador debe insertar saltos de línea dentro de una cadena que de otro modo sería irrompible para evitar que el texto se desborde en su cuadro de línea. Esta propiedad sólo funciona cuando white-space está establecida a valores que respeten espacios.
word-break:: Establece si los saltos de línea aparecen donde el texto de otro modo desbordaría su cuadro de contenido.

Propiedad	Valores	Descripción
hyphens	none	Las palabras no se dividen en los saltos de línea, incluso si los caracteres dentro de las palabras sugieren puntos de salto de línea. Las líneas solo se ajustarán en espacios en blanco.
	manual	Las palabras se dividen para el ajuste de línea solo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea.
	auto	El navegador es libre de dividir automáticamente las palabras en los puntos de separación de guiones apropiados, siguiendo las reglas que elija.
overflow-wrap	normal	Las líneas solo pueden dividirse en puntos normales de separación de palabras (como un espacio entre dos palabras).
	anywhere	Para evitar el desbordamiento, una cadena de caracteres irrompible, como una palabra larga o una URL, puede dividirse en cualquier punto si no hay puntos de interrupción aceptables en la línea. No se inserta ningún carácter de partición en el punto de interrupción. Las oportunidades de ajuste suave introducidas por el salto de palabra se tienen en cuenta al calcular los tamaños intrínsecos del contenido mínimo.
	break-word	Igual que el anywhere, con palabras normalmente irrompibles que se pueden dividir en puntos arbitrarios si no hay puntos de ruptura aceptables en la línea, pero las oportunidades de ajuste suave introducidas por la ruptura de palabra no se consideran al calcular los tamaños intrínsecos de contenido mínimo.
word-break	normal	Utiliza la regla de salto de línea predeterminada.
	break-all	Para evitar el desbordamiento, se deben insertar saltos de palabra entre dos caracteres cualesquiera.
	keep-all	Los saltos de palabra no deben usarse para texto en chino/japonés/coreano (CJK). El comportamiento del texto que no es CJK es el mismo que para normal.