Formateo de Texto(parte I)JUAN CARLOS CONDE RAMÍREZ

WEB-TOOLS

Objetivos

FCC-BUAP 2

◦ Conocer las propiedades relacionadas con la fuente.

◦ Entender el uso de fuentes Web y pilas de fuentes.

◦ Configuración de líneas de texto tal como altura de la línea, sangrías y alineación.

◦ Aplicar tratamientos de texto e identificar la importancia del espaciado entre letras y palabras.

JCCR©

•Al finalizar esta sección del curso, podrás elegir entre más de 15 nuevas propiedades CSS útilespara manipular la apariencia del texto.

•Al mismo tiempo aprenderás cómo usar selectores más potentes para los elementos de uncontexto particular (segmentos) con un id específico o nombre de clase (class).

•Dado que no hay forma de saber con certeza si la fuente que especifiques estará disponible ocuán grande o pequeña aparecerá la letra cuando llegue al navegador de los usuarios,abordaremos las mejores prácticas para enfrentar estos desafíos.

Importancia, I

FCC-BUAP 3JCCR©

•En CSS, las fuentes se especifican utilizando un pequeño conjunto de propiedades relacionadaspara el tipo de letra, el tamaño, el fuerza (peso) y el estilo de la fuente.

•Propiedades relacionadas con la fuente:

◦ font-family

◦ font-size

◦ font-weight

◦ font-style

◦ font-variant

◦ font

Propiedades de la fuente, I

FCC-BUAP 4JCCR©

Propiedades de la fuente, II

FCC-BUAP 5JCCR©

•Especificación del nombre de la fuente.

•font-family

◦ Valores: una o más fuentes o nombres de familias de fuentes genéricas, separadas porcomas.

◦ Predeterminado: depende del navegador.

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

•Ejemplos:

Nombre de la fuente, I

FCC-BUAP 6JCCR©

body { font-family: Arial; }

tt { font-family: Courier, monospace; }

p { font-family: “Duru Sans”, Verdana, sans-serif; }

•A continuación algunos requerimientos importantes de sintaxis:

◦ Todos los nombres de fuentes, a excepción de familias de fuentes genéricas, deben de comenzar conuna letra mayúscula. Por ejemplo, se debe usar “Arial” en lugar de “arial”.

◦ Usa comas para separar múltiples nombres de fuente, tal como se muestra en el segundo y tercerejemplo.

◦ Observa que los nombres que contienen un espacio en blanco entre caracteres (como Duru Sans en eltercer ejemplo) deben aparecer entre comillas.

Nombre de la fuente, II

FCC-BUAP 7JCCR©

•Seguramente te estés preguntando: "¿Por qué especificar más de una fuente?". Esa es unabuena pregunta, y nos lleva a uno de los desafíos más importantes de la especificación defuentes para páginas Web.

•Limitaciones de las fuentes.

◦ Los navegadores están limitados a mostrar sólo las fuentes a las que tienen acceso. Tradicionalmente, sehacía referencia a las fuentes que ya estaban instaladas en el disco duro del usuario.

◦ 2010 fue el auge de los navegadores con soporte para “fuentes Web integradas” usando la regla CSS@font-face, así fue posible para los diseñadores proporcionar sus propias fuentes.

Revisa la lectura: Entrega de fuentes propias(CSS)

Limitaciones de las fuentes, I

FCC-BUAP 8JCCR©

◦ Incluso cuando se especifica que la fuente debe ser Futura en una regla de estilo, si el navegador nopuede encontrarla (si la fuente no está instalada en la computadora del usuario o si la fuente Webproporcionada no se carga), el navegador usará su fuente predeterminada.

◦ Afortunadamente, CSS nos permite proporcionar una lista de fuentes de respaldo (pila de fuentes) sinuestra primera opción no estuviera disponible.

◦ Si no se encuentra la primera fuente especificada, el navegador intenta con la siguiente, y así haciaabajo en la lista hasta que encuentre una que funcione.

Limitaciones de las fuentes, II

FCC-BUAP 9JCCR©

p { font-family: “Duru Sans”, Verdana, sans-serif; }

•Familias de fuentes genéricas.

◦ “sans-serif" es sólo una de las cinco familias de fuentes genéricas que se puede especificar con lapropiedad font-family.

◦ Cuando se especifica una familia de fuentes genéricas, el navegador elige una fuente disponible de esacategoría de estilos (ver siguiente figura).

◦ Los nombres de la familias de fuentes genéricas no necesitan comenzar con mayúscula.

Familias de fuentes genéricas, I

FCC-BUAP 10JCCR©

Familias de fuentes genéricas, II

FCC-BUAP 11JCCR©

serif

sans-serif

monospace

cursive

fantasy

serif◦ Ejemplos: Times, Times New Roman, Georgia

◦ Tienen apéndices decorativos en forma de losa (serif) en los extremos de ciertos trazos de letras.

sans-serif◦ Ejemplos: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva

◦ Tienen trazos de letra recta que no terminan en losas.

monospace◦ Ejemplos: Courier, Courier New, and Andale Mono

◦ También conocida como de “ancho constante”, todos los caracteres ocupan la misma cantidad de espacio en una línea. Porejemplo, una W mayúscula no será más ancha que una i minúscula. Compara esto con los tipos de letra proporcionales (como elque estás leyendo ahora) y verás que asignan diferentes anchuras a diferentes caracteres.

Familias de fuentes genéricas, III

FCC-BUAP 12JCCR©

cursive◦ Ejemplos: Apple Chancery, Zapf-Chancery, and Comic Sans

◦ Emulan una letra cursiva o con una apariencia manuscrita.

fantasy◦ Ejemplos: Impact, Western, u otras fuentes decorativas.

◦ Son puramente decorativas y serían apropiadas para titulares y otros tipos de pantallas. Rara vez se utilizan para texto Web debidoa la disponibilidad y legibilidad multiplataforma.

Familias de fuentes genéricas, IV

FCC-BUAP 13JCCR©

•Estrategias de pila de fuentes.

◦ La mejor práctica para especificar fuentes es comenzar con la primera opción, proporcionar algunasalternativas similares, y luego terminar con una familia de fuentes genéricas. Por ejemplo:

font-family: Futura, Univers, Tahoma, Geneva, sans-serif;

◦ No hay límite para la cantidad de fuentes que puedes incluir, pero muchos diseñadores recomiendanmantenerse por debajo de las 10 fuentes.

◦ Una buena pila de fuentes deberá incluir fuentes relacionadas estilísticamente que se sabe que estáninstaladas en la mayoría de las computadoras.

Estrategia: Pila de fuentes, I

FCC-BUAP 14JCCR©

◦ Usar las fuentes que vienen con los sistemas operativos como Windows, Mac OS y Linux, así comoaquellas que se instalan con paquetes de software populares como Microsoft Office y Adobe CreativeSuite, te ofrece una sólida lista de fuentes (web-safe) para elegir.

◦ Los gráficos y estadísticas proporcionados por los siguientes sitios son excelentes recursos paraaveriguar qué fuentes están disponibles comúnmente.

◦ Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows

◦ Font Matrix

◦ Code Style’s Web Font Survey and Font Stack Builder

Estrategia: Pila de fuentes, II

FCC-BUAP 15JCCR©

◦ Como puedes ver, la especificación de fuentes para la Web es más una mera sugerencia, ya que notienes control absoluto sobre qué fuentes verá el usuario final.

◦ Puede ser que se muestre tu primera opción; o puede que sea la alternativa genérica. Esto es uno deesos caprichos de diseño Web con los que tendrás que convivir.

Estrategia: Pila de fuentes, III

FCC-BUAP 16JCCR©

•Hay muchos artículos en línea promocionando "las mejores pilas de fuentes“. La pila de fuentesque uses será, en gran medida, una cuestión de preferencia.

•Las siguientes recomendaciones están inspiradas en "8 Definitive Font Stacks" de Michael Tuck.Incluye fuentes de respaldo para Windows, Mac y Linux:

1. Narrow serif (Times-based)Cambria, "Hoefler Text", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Las mejores pilas de fuentes, I

FCC-BUAP 17JCCR©

2. Wide serif (Georgia-based)Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif",

"Liberation Serif", Georgia, serif;

3. Narrow sans-serif (Arial-based)Univers, Calibri, "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue",

Helvetica, Arial, sansserif;

4. Wide sans-serif (Verdana-based)"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-

serif;

5. Monospace"Andale Mono WT", "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New",

Courier, monospace;

Las mejores pilas de fuentes, II

FCC-BUAP 18JCCR©

•La propiedad nombrada font-size sirve para especificar el tamaño del texto.

•Especificación del tamaño de la fuente.

•font-size

◦ Valores: unidad de longitud| porcentaje | xx-small | x-small | small | medium | large |x-large | xx-large |smaller | larger | inherit

◦ Predeterminado: medium

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Tamaño de la fuente, I

FCC-BUAP 19JCCR©

•Es posible especificar el tamaño del texto de cinco diferentes maneras:

1. Con un tamaño específico usando una de las unidades de longitud CSS, tal como se muestra acontinuación:

h1 { font-size: 1.5em; }

Al especificar un número de unidades, asegúrese de que la abreviatura de la unidad sigainmediatamente al número, sin espacio adicional entre ellas:

INCORRECTO h1 { font-size: 1.5 em; } /*espacio antes de em*/

2. Con un valor de porcentaje, hacia arriba o hacia abajo partiendo del tamaño predeterminado oheredado del elemento:

h1 { font-size: 150%; }

Tamaño de la fuente, II

FCC-BUAP 20JCCR©

3. Con una de las palabras clave absolutas (xx-small, x-small, small, medium, large, x-large, xx-large). En la mayoría de los navegadores actuales, medium es el tamaño de fuentepredeterminado.:

h1 { font-size: x-large; }

4. Con las palabras clave relativas (larger o smaller) para hacer al texto más grande o más pequeñocon respecto al texto que lo rodea:

strong { font-size: larger; }

Tamaño de la fuente, III

FCC-BUAP 21JCCR©

•A pesar de todas estas opciones, los valores preferidos para font-size en el diseño Webcontemporáneo son las medidas em y los porcentajes (o una combinación de ambos).

•Ambos em y porcentajes son medidas relativas, es decir, se basan en otro tamaño de fuente: eltamaño de fuente heredado del elemento principal.

Tamaño de la fuente, IV

FCC-BUAP 22JCCR©

•Valores Porcentuales

• En el siguiente ejemplo, el font-size del padre (body) del elemento h1 ha sido puesto al 100% deltamaño de texto por defecto (generalmente 16 pixeles).

• El elemento h1 hereda el tamaño de 16px del elemento body, y al aplicar un valor de 150% para supropio font-size éste se multiplica por el valor heredado, resultando en un h1 que tiene 24 pixeles.

Tamaño de la fuente, V

FCC-BUAP 23JCCR©

body { font-size: 100%; }

h1 { font-size: 150%; } /* 150% de 16 = 24 */

•Una utilidad importante de esta característica se ejemplifica a continuación:

◦ Supón que un usuario tiene su tamaño de fuente establecido en 30 píxeles para leer desde unnavegador en televisión (desde el otro lado de la sala), el elemento h1 resultante será de 45 píxeles,pero mantendría su proporción con respecto al texto principal (body).

•Por lo tanto, la idea principal de usar medidas relativas es la conservación de proporciones.

Tamaño de la fuente, VI

FCC-BUAP 24JCCR©

•CSS3 proporciona dos amplias categorías de unidades de medida: absolutas y relativas.

Unidades de medida CSS, I

FCC-BUAP 25JCCR©

Unidad Relativa Descripción

px pixel, considerado relativo en CSS2.1 debido a que varía con la resolución de la pantalla.

em unidad de medida equivalente al tamaño de fuente actual.

ex x-height, aproximadamente la altura de una “x” minúscula de la fuente.

U N I D A D E S N U E V A S E N C S S 3

rem root em, equivalente al tamaño em del elemento raíz (html).

ch zero width, equivalente al ancho de un cero (0) en la fuente y tamaño actual.

vwviewport width, equivalente a 1/100 del ancho del puerto de visión actual (ventana del navegador).

vh viewport height, equivalente a 1/100 de la altura del puerto de visión actual.

vm viewport mínimum, equivalente al valor de vw o vh, el que sea más pequeño.

•Las unidades absolutas tienen significados predefinidos o equivalentes a los del mundo real.

Unidades de medida CSS, II

FCC-BUAP 26JCCR©

Unidad Absoluta Descripción

px pixel, definido como una medida absoluta equivalente a 1/96 de una pulgada en CSS3.

pt points (1/72 pulgadas en CSS2.1)

pc picas (1 pica = 12 points)

mm millimeters (milímetros).

cm centimeters (centímetros).

in inches (pulgadas).

•Deben evitarse las unidades absolutas porque no son relevantes para las distintas pantallas decomputadora.

•Sin embargo, puede ser la solución si estás creando una hoja de estilo para ser usada cuando seimprima un documento (p.e. un ticket).

•¿Notaste que pixel (px) está en ambas listas? Esto es porque la W3C no se ha decidido. Perodejando a un lado las definiciones, en la práctica los píxeles funcionan como una medidaabsoluta que no es tan flexible como las unidades relativas puras.

Unidades de medida CSS, III

FCC-BUAP 27JCCR©

•em es una unidad de medida relativa que, en la tipografía tradicional, se basa en el ancho de laletra mayúscula M (de ahí el nombre "em").

•Para texto con un tamaño de fuente de 16 pixeles, un em mide 16 pixeles; para texto de 12pixeles, un em equivale a 12 pixeles y así sucesivamente. Es decir, se basa en el tamaño del texto.

Medidas em, I

FCC-BUAP 28JCCR©

•Una vez que el navegador calcula las dimensiones de em para un elemento de texto, puedeutilizarse para todo tipo de medidas, como:

◦ sangrías,

◦ márgenes,

◦ el ancho del elemento en la página,

◦ etc.

•Cuando font-size es puesto en em, el valor de em funciona como un factor de escalamiento,similar a un porcentaje (p.e. 1.5em equivale a 150%).

Medidas em, II

FCC-BUAP 29JCCR©

body { font-size: 100%; }

h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */

•La solución más popular para hacer que los em se muestren consistentemente es establecer eltamaño del elemento body en 100%.

•Luego, a partir de ahí, usar em para ajustar el tamaño de los elementos de texto (como en elejemplo anterior).

•Esto permite preservar el tamaño de visualización preferido del usuario, pero asegura que loselementos de texto tengan un tamaño proporcional.

Mejores practicas usando em, I

FCC-BUAP 30JCCR©

•Sin embargo, ten en cuenta que debido a errores de redondeo, existe cierta inconsistencia entrelos navegadores y las plataformas.

•Los em se basan en el tamaño heredado del elemento, lo que significa que su tamaño dependede los contextos en los que se aplican.

•Si se tienen muchos elementos anidados, el aumento o disminución de tamaño se combinarácon cada nivel de anidamiento.

Mejores practicas usando em, II

FCC-BUAP 31JCCR©

•Caso de estudio:

1. Comienzas con un body puesto en 100% (16 pixeles).

2. Quieres un article que tenga sólo 14 pixeles.

3. Dividiendo la meta (14) entre el contexto (16) se obtiene 0.875em para el font-size del artículo.

4. Después, quieres que los elementos h2 de un article sean de 18 pixeles.

5. Esta vez el tamaño de em no se basa en 16 pixeles del tamaño del texto de body; se basa en los

elementos de 14 pixeles de article, debido a que ahora este es el contexto de h2.

6. Así que ahora se divide el la meta (18px) entre el contexto (14px) para obtener la medida final de em,

1.28571429 (se puede redondear a 4 posiciones después del punto decimal pero no es necesario).

Mejores practicas usando em, III

FCC-BUAP 32JCCR©

•Ya habrás advertido que para calcular los valores de % y de em, deberás de usar la formula:

target size ÷ size of content = result

•Así que escribe reglas de estilos de una manera que compense este efecto de composición.

Mejores practicas usando em, IV

FCC-BUAP 33JCCR©

body {font-size: 100%;}

article {font-size: .875em;}

/*basada en el tamaño de texto heredado de body*/

article h2 {font-size: 1.28571429em; }

/*basada en el tamaño de fuente de article, no de body*/

•La nueva medida relativa en CSS3 llamada rem (root em) se basa en el tamaño de fuente delelemento raíz (html).

•Si se especifica el tamaño del elemento html (presumiblemente al 100%), todos los elementosespecificados con rem serán relativos a dicho tamaño, y no a su tamaño heredado.

•Esto elimina el problema de composición que hace que em sea potencialmente problemático.

Introducción al Root Em, I

FCC-BUAP 34JCCR©

•Los navegadores que admiten rem usarán la última declaración en la pila.

•La unidad rem ya ha ganando popularidad en la comunidad de diseño Web. Para unaintroducción más completa al respecto, se recomienda el artículo "Font Sizing with rem" deJonathan Snook.

Introducción al Root Em, II

FCC-BUAP 35JCCR©

html {

font-size: 100%;

}

#main {

font-size: 12px;

font-size: .75rem;

}

•La forma restante de especificar el tamaño de letra es a través de palabras clave absolutaspredefinidas: xx-small, x-small, small, medium, large, x-large, y xx-large.

•Las palabras clave se escalan consistentemente. La siguiente figura muestra cada una de laspalabras clave absolutas considerando un texto definido a 16 pixeles.

Uso de palabras clave, I

FCC-BUAP 36JCCR©

•Se incluyeron ejemplos en Verdana y en Times para mostrar que, incluso con el mismo tamañobase, existe una gran diferencia de legibilidad para el tamaño small y anteriores.

•La ventaja del uso de palabras clave es que los navegadores actuales no permiten que el tamañodel texto se despliegue a menos de 9 píxeles, es decir, previenen los tipos ilegibles.

•La desventaja del uso de palabras clave es que son imprecisas e impredecibles. Por ejemplo,aunque la mayoría de los navegadores escalan cada nivel en un 120%, algunos navegadores usanun factor de escalamiento del 150%.

Uso de palabras clave, II

FCC-BUAP 37JCCR©

•Las palabras clave relativas, larger y smaller, se utilizan para cambiar el tamaño del textoen relación con el tamaño del texto del elemento principal.

•Nuevamente la cantidad exacta del cambio de tamaño está determinada por cada navegador yestá fuera de nuestro control.

•A pesar de las limitaciones, es una forma fácil de usar una tipografía un poco más grande o máspequeñas siempre y cuando las proporciones exactas no sean críticas.

Uso de palabras clave, III

FCC-BUAP 38JCCR©

•Después de haber analizado las familias de fuentes y el tamaño, las propiedades restantes de lafuente son sencillas.

•Especificación del peso de la fuente.

•font-weight

◦ Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |800 | 900 | inherit

◦ Predeterminado: normal

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Peso de la fuente (fuerza), I

FCC-BUAP 39JCCR©

•La propiedad font-weight tiene muchos valores predefinidos:

◦ Incluye términos muy descriptivos como: normal, bold, bolder y lighter.

◦ Así como valores numéricos: del 100 al 900.

•Debido a que la mayoría de las fuentes utilizadas en la Web tienen sólo dos pesos, normal ybold (negrita), el único valor de importancia de la fuente que se usará en la mayoría de loscasos es bold.

•Puedes utilizar normal para hacer que el texto que normalmente aparecería en negritas (comotexto fuerte o titulares) aparezca con un peso normal.

Peso de la fuente (fuerza), II

FCC-BUAP 40JCCR©

•En general, las configuraciones numéricas de 600 y superiores dan como resultado un texto ennegrita, aunque incluso eso puede variar según el navegador.

•Habrás notado que varias de las propiedades CSS vistas hasta el momento incluyen en su lista elvalor inherit. Este valor permite forzar explícitamente a un elemento a heredar un valor deestilo de sus ancestros.

•Esto puede ser útil para anular otros estilos aplicados a ese elemento

Peso de la fuente (fuerza), III

FCC-BUAP 41JCCR©

•La propiedad font-style afecta la postura del texto, es decir, si las formas de las letras sonverticales (normal) o inclinadas (italic y oblique).

•Especificación del estilo de la fuente.

•font-style

◦ Valores: normal | italic | oblique | inherit

◦ Predeterminado: normal

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Estilo de fuente (cursivas), I

FCC-BUAP 42JCCR©

•Cursiva y oblicua son ambas versiones inclinadas de la fuente.

•La diferencia es que la versión en cursiva suele ser un diseño de letra independiente con formaspropias de letra curva, mientras que el texto oblicuo toma el diseño de fuente normal ysimplemente lo inclina.

•La verdad es que en la mayoría de los navegadores, pueden verse exactamente iguales.

Estilo de fuente (cursivas), II

FCC-BUAP 43JCCR©

•Algunos tipos de letra vienen en una variante de "letra pequeña".

•Este es un diseño de fuente independiente que usa letras pequeñas estilo mayúscula en lugar dediseños de letras minúsculas.

•Variante de fuente (minúsculas).

•font-variant◦ Valores: normal | small-caps | inherit

◦ Predeterminado: normal

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Variante de fuente (minúsculas), I

FCC-BUAP 44JCCR©

•En la mayoría de los casos, no existe una fuente real de mayúsculas pequeñas, por lo que losnavegadores simulan pequeñas letras reduciendo las letras mayúsculas de la fuente actual.

•Esto es menos que ideal y dando como resultado pesos de trazo inconsistentes, pero es posibleque sea una opción aceptable para agregar más variedad a pequeñas cantidades de texto.

Variante de fuente (minúsculas), II

FCC-BUAP 45JCCR©

•Especificar múltiples propiedades de fuente para cada elemento de texto puede ser repetitivo ylargo, por lo que los creadores de CSS proporcionaron la propiedad de fuente abreviada quecompila todas las propiedades relacionadas con la fuente en una regla.

•Atajos de fuente.

•font

◦ Valores: font-style font-weight font-variant font-size/line-height font-family | inherit

◦ Predeterminado: depende del valor predeterminado para cada propiedad enumerada

◦ Aplicable a: todos los elementos.

◦ Herencia: sí

Atajos a propiedades de fuente, I

FCC-BUAP 46JCCR©

•El valor para la propiedad font es una lista de valores para todas las propiedades de fuente queacabamos de ver, separadas por espacios de caracteres.

•En esta propiedad, el orden de los valores es importante y es el siguiente:

{ font: style weight variant size/line-height font-family }

•Como mínimo, la propiedad font debe incluir un valor para font-size y un valor parafont-family, en ese mismo orden.

p { font: 1em sans-serif; }

Atajos a propiedades de fuente, II

FCC-BUAP 47JCCR©

•Una vez que se cumpla con los requisitos de tamaño y familia, los demás valores son opcionalesy pueden aparecer en cualquier orden antes del font-size.

•Cuando se omite el estilo, el peso o la variante, todos se vuelven normal.

•Existe un valor aquí que no hemos visto y es line-height. Tal como suena, ajusta la altura delas líneas de texto y se usa para agregar espacio entre líneas.

Atajos a propiedades de fuente, III

FCC-BUAP 48JCCR©

•Aparece justo después del tamaño de fuente, separado por una barra, como se muestra en estosejemplos.

• h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, sans-serif; }

• h2 { font: bold 1.75em/2 sans-serif; }

•Por ejemplo, usaremos la propiedad abreviada font para hacer algunos cambios en los títulosde h2.

Atajos a propiedades de fuente, IV

FCC-BUAP 49JCCR©