Lección 8: Texto

font-size

Tamaño del texto. Durante los ejemplos se usará la unidad de medida rem. En la siguiente lección se explica su origen y referencia, de momento solo es importante que la utilices sabiendo que 1rem es equivalente al tamaño de letra de tu navegador (en la gran mayoría 16px).

.texto {
    font-size: 2.5rem;
}

font-style

Estilo de la letra.

.texto {
    font-style: normal;
    font-style: italic;
    font-style: oblique;
    font-style: oblique 20deg;
}

font-variant

Versalitas.

.texto {
    font-variant: normal;
    font-variant: small-caps;
}

font-weight

Grosor de la letra.

.texto {
    font-weight: normal;
    font-weight: bold;

    /* Relativas al padre */
    font-weight: lighter;
    font-weight: bolder;

    /* Grosor numérico */
    font-weight: 100; /* Thin */
    font-weight: 200;
    font-weight: 300; /* Light */
    font-weight: 400; /* Regular */
    font-weight: 500;
    font-weight: 600;
    font-weight: 700; /* Bold */
    font-weight: 800;
    font-weight: 900; /* Black */
}

text-transform

Capitalización, mayúsculas y minúsculas.

.texto {
    text-transform: none;
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;
}

text-align

Alineación de textos.

.texto {
    text-align: start;
    text-align: end;
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
    /* Experimental: Igual que justify salvo que fuerza la última línea */
    text-align: justify-all;
}

word-spacing

Distancia entre palabras.

.texto {
    word-spacing: 1.2rem;
}

letter-spacing

Espacio entre letras.

.texto {
    letter-spacing: 1.2rem;
}

text-decoration

Línea inferior, superior o tachado.

.texto {
    /* Subrayado inferior */
    text-decoration: underline;
    /* Subrayado superior, y además de color rojo */
    text-decoration: overline red;
    /* Subrayado tachado */
    text-decoration: line-through;
    /* Quitar subrayado */
    text-decoration: none;
}

hover

Pseudoclase que es activado cuando el usuario deja el cursor sobre el elemento.

/* Estilos por defecto */
.estilo {
    color: orange;
}

/* Estilos cuando el cursor esta encima */
.estilo:hover {
    color: blue;
}

font-family

Seleccionar fuente.

.estilo {
    /* Nombre de fuente + nombre genérico:
    Si no encuentra la primera instalada, busca la genérica */
    font-family: "Oswald", sans-serif;
    font-family: "Poppins", sans-serif;

    /* Nombres genéricos más utilizados */
    font-family: serif;
    font-family: sans-serif;
    font-family: monospace;
}

font-face

Cargar fuente.

@font-face {
    /* Alias que le das para utilizarla */
    font-family: "Fira Sans";
    /* Origen */
    src: url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    /* No bloquea la carga del texto. Cuando se descargue la tipografía se aplicará */
    font-display: swap;
}

body {
    /* Utilizas */
    font-family: "Fira Sans";
}

Los formatos más extendidos, y por orden de recomendación, son:

woff2
woff
otf
ttf

font-display

Forma de carga.

.texto {
    /* No muestra el texto hasta que sea cargada la tipografía */
    font-display: block;
    /* Si muestra el texto. Cuando sea cargada la tipografía cambiará */
    font-display: swap;
}

Actividad 1

A partir del prólogo de Moby Dick, crea una web usando los siguientes estilos en su diseño.

font-size
font-style
font-weight

Usa el siguiente texto.

Moby Dick

Herman Melville

Prólogo

Vivimos tiempos en que los hombres pueden arponear impunemente a las ballenas. A despecho de todos los ecologistas del mundo, las localizan por medio del radar, consiguen incluso algunas veces la complicidad de un hidroavión y luego, para dar muerte al enorme mamífero que emerge a lo lejos, tienen suficiente ya con apretar el gatillo desde la cubierta del barco homicida. Ni siquiera les tiembla el pulso.

Hubo otras épocas, sin embargo, en las que no lo tuvieron tan fácil. Los marineros embarcaban entonces en incómodos veleros, arriaban precipitadamente los botes, remaban sin descanso hacia donde estaba la ballena y, cuando la tenían a tiro, lanzaban los crueles arpones y confiaban en su buena suerte.

Actividad 2

Vamos a mejorar la actividad anterior

Separa las letras del título: Moby Dick.
Separa un poco el nombre del autor y su apellido.
Convierte el título del capítulo, Prólogo, en mayúsculas.
Justifica el texto del capítulo.

Actividad 3

Somos tan tozudos como el Captain Ahab, no nos rendimos con Moby Dick.

Realiza las siguientes tareas.

Cuando mi cursor se coloque sobre el título, debe cambiar su estilo a cursiva y cambiar su color a azul.
El título del capítulo debe convertirse en negrita y en rojo.

Actividad 4

Dejamos de lado, de momento, nuestra lucha marina y nos centramos en crear un sitio nuevo con el texto que tú quieras.

Los pasos a seguir son:

Descarga 2 tipografías diferentes, una para el título y otra para el texto.
Carga en el CSS ambas fuentes con @font-face.
Crea un par de clases para cada fuente y aplica sobre el HTML donde corresponda.

Actividad 5

A partir del siguiente texto...

Aquellas cacerías, sin embargo, acababan muchas veces en tragedia. Fue en uno de esos lances, por ejemplo, donde el enigmático protagonista de esta novela, el capitán Ahab, perdió una pierna, la sustituyó por otra de marfil y concibió un odio mortal hacia aquella colosal ballena blanca y solitaria que sembraba el terror por mares sin civilizar.

Lo que deberíamos hacer ahora, sin embargo, es determinar las razones de ese odio inextinguible. Seamos cautos y no aventuremos hipótesis precipitadas. Puede que la mutilación de Ahab no tuviese nada que ver porque todos sabemos que hay odios que encuentran sus más secretas motivaciones mucho más allá de las cosas que han sucedido en este mundo y que actúan sobre nosotros a nivel inconsciente.

Logra la siguiente Web.

Actividad 5