Cambia el tamaño y el color del texto.
Agranda una frase de entradilla, pon una cita en tu color de marca, o vuelve un encabezado blanco sobre una foto oscura. Con Font size y Font color en el panel Style, cambias todo el texto de un elemento. Para parte de un texto, usa en cambio la barra de herramientas del editor de texto. Para tamaños y colores que cada página comparte, usa tu tema.
El vídeo sigue la receta de abajo: convierte una frase en una entradilla con un tamaño mayor y un color de marca.
Antes de empezar
- Abre la página en DXPR Builder; señalar un elemento muestra su barra de controles con More. ¿No conoces el constructor? Consulta Crea tu primera página.
- Save en el diálogo conserva un cambio en el editor. Save en la barra de herramientas del constructor, sobre tu contenido, guarda la página y muestra "Saved field".
- Usa el panel Style para un elemento: un párrafo de entradilla, una cita, un encabezado sobre una foto.
- Usa el editor de texto para parte de un texto y para la estructura. Haz un encabezado un encabezado real con Heading 2 o Heading 3, no una línea Normal más grande. Los lectores de pantalla y buscadores leen el nivel, no el tamaño.
- Usa la lista Styles del editor para estilos de texto de marca. Tu webmaster los define en General Settings > Text Editor > Custom styles (
/admin/dxpr_studio/dxpr_builder/settings). - Usa tu tema para la fuente del cuerpo, tamaños de encabezado y colores de enlace.
Receta: una frase de entradilla en tu color de marca
- Añade un elemento Text y escribe una o dos frases como texto Normal.
- Pasa el cursor sobre él, haz clic en More y luego en Settings.
- Abre el panel Style y arrastra Font size a 20. El texto crece mientras arrastras.
- Abre Font color y elige tu color de marca de las muestras, o escribe su código, como #1a4d8f, en el campo de color.
- Haz clic en Save en el diálogo. Con 20 px la frase cuenta como texto normal, así que necesita un contraste de 4,5 a 1. Introduce tu código de color y el color de fondo en un comprobador de contraste; una página blanca es #ffffff.
- Haz clic en Save en la barra de herramientas.
Lo que ves
La frase crece a 20 px y toma tu color de marca. Encabezados y enlaces dentro del mismo elemento Text toman ese color también, pero los encabezados conservan su propio tamaño.
Cómo funcionan los ajustes
Tamaño de fuente
Font size va de 0 a 100 px, y 0 conserva el tamaño de tu tema. El valor es el mismo en cada tamaño de pantalla: una línea de 48 px en escritorio es 48 px también en un teléfono.
El tamaño va en el elemento, y el texto que tiene su propio tamaño lo conserva. Los encabezados suelen tenerlo, porque Bootstrap los dimensiona desde el tamaño base de la página. El texto que dimensionaste con la herramienta de tamaño de fuente del editor también conserva su tamaño.
Color de fuente
El selector muestra la paleta de tu tema como muestras, cuando tu sitio tiene una. También tiene un deslizador de opacidad y un campo donde escribes un código de color, como #1a4d8f. Clear en el selector devuelve el texto al color del tema.
En un elemento de contenido como Text, Card o Alert, el color llega a todo lo de dentro, encabezados y enlaces incluidos. En una Section solo llega al texto sin color propio. Encabezados y enlaces que tu tema colorea conservan su color allí.
Las clases de color Bootstrap están marcadas !important, así que superan a Font color. Un ejemplo es el chip Primary text color bajo HTML classes. Otro es un estilo de editor como Primary Brand Text en parte del texto.
En un Button, el color va en el botón mismo y reemplaza el color de hover del tema. Define Font color también en Hover style.
Hover
El panel Hover style tiene su propio Font color y Font size. Un tamaño mayor en hover empuja el contenido a su alrededor, así que un cambio de color suele ser la opción más tranquila.
Contraste
Para texto que la mayoría puede leer, las reglas WCAG 2 en nivel AA piden este contraste:
| Texto | Contraste con su fondo |
|---|---|
| Texto normal | al menos 4,5 a 1 |
| Texto grande: 24 px (18 pt) o más, o 19 px (14 pt) o más en negrita | al menos 3 a 1 |
En una foto, mide contra la parte más clara tras el texto. Prueba tu par de colores con un comprobador de contraste, como el comprobador de contraste WebAIM.
Si no lo ves
- El encabezado dentro del texto no creció. El encabezado tiene su propio tamaño de tu tema. Elige otro nivel de encabezado en el editor de texto, o usa su herramienta de tamaño de fuente.
- Enlaces y encabezados conservan su color. En una Section, el texto con su propio color de tema lo conserva. Define Font color en el elemento Text.
- Font color no hace nada. Una clase de color como Primary text color o White text bajo HTML classes gana. Quita su chip.
- Parte del texto conserva otro color. Un estilo de editor en esa parte, como Primary Brand Text, gana. Quita el estilo en el editor de texto.
- Font size no hace nada en un contador. Circle counter y Number counter tienen su propio Font size. Usa ese.
- Un color de muestra ya no coincide con la marca. Una muestra copia el color cuando la eliges. Tras un cambio de paleta, elige la muestra de nuevo.
- El color de marca no pasa el control de contraste. Elige un tono más oscuro. O haz el texto de al menos 24 px, para que aplique el objetivo de 3 a 1.
- El texto cuesta de leer en una foto. El contraste es muy bajo. Oscurece la foto con un degradado, como se muestra en la página Backgrounds.
- El botón perdió su color de texto en hover. Tu Font color reemplaza el color de hover del tema. Define Font color también en Hover style.
¿Qué sigue?
- ID y clases HTML: reutiliza un estilo de texto con una clase en lugar de definirlo en cada elemento.