Crear encabezados con texto superpuesto grande y pequeño
Los títulos introducen contenido.
Podemos aplicar muchos efectos y trucos a los títulos basados en gráficos para atraer a los lectores a continuar leyendo, establecer el tono o hacer que un encabezado se destaque entre muchos.
Pero a veces las técnicas más obvias, como la modificación del peso visual y el diseño, funcionan mucho mejor.
Los títulos superpuestos usan una pequeña cantidad de texto grande y una gran cantidad de texto pequeño para comunicarse más de lo que un encabezado simple podría hacer por sí mismo. Suena contradictorio? Solo si ignoras los puntos finos.
Siga leyendo para aprender cómo crear títulos memorables con texto superpuesto.
¿Qué tienen las formas extrañas de arriba con los nombres "WDD" y "WDD"? {$lang_domain} "¿?" Son artefactos desafortunados por haber colocado un texto sobre el otro sin importar la ubicación o el detalle. Aquí está la imagen ofensiva:
A simple vista, el gráfico anterior es una presentación directa del nombre de un blog y su abreviatura. El tipo de letra es el oficial utilizado por el blog; la naranja brillante viene directamente del tema del sitio web; y ambas líneas de texto se centran casi a la perfección.
Incluso está escrito y capitalizado de acuerdo con el estilo del blog. Pero es un intento de aficionado a imitar la técnica de superposición al golpear una larga línea de texto en una breve. (Las debilidades en este ejemplo son exageradas, aunque no poco comunes).
El sombreado anterior revela las nuevas formas creadas por las dos piezas de texto. La forma en que las dos líneas se relacionan con cada una y el orden en el que se leen depende de cómo se diseñen. Hay más en la superposición de texto que la configuración de uno encima del otro.
Por supuesto, la superposición no siempre es la mejor manera de organizar un título corto y un subtítulo largo.
Los ejemplos a continuación muestran algunos tratamientos posibles cuando un diseño requiere algo más creativo que lo normal h1 y h2 elementos.
El texto superpuesto tiene una elegancia que no se puede duplicar fácilmente con HTML (aún). Dos líneas de texto juntas a menudo suman más que la suma de cada una individualmente.
Fundamentos del texto superpuesto
El texto superpuesto contrasta dos líneas de texto una contra la otra. El texto grande descansa detrás del pequeño texto, que a menudo contiene más palabras. Las partes difíciles aseguran que ambas líneas sean igualmente legibles, haciendo que ambas funcionen juntas en lugar de una contra la otra y manteniendo todo el paquete en el tema.
Diferentes técnicas cambian el efecto del texto superpuesto.
Aquí están los cuatro factores principales que afectan el texto superpuesto:
- La ubicación tiene que ver con la forma en que el texto pequeño se coloca en relación con el texto grande. Esto afecta directamente cómo se lee el texto. Si el texto pequeño está hacia la esquina superior izquierda, es probable que se lea primero (es decir, antes del texto grande). Si el texto pequeño está hacia la parte inferior derecha, probablemente se leerá en segundo lugar.
- El peso relativo se refiere a la cantidad de atención que una pieza de texto dibuja en relación con la otra. Dado su tamaño, el texto grande tiende a dominar. Sin embargo, si el texto grande se desvanece en el fondo, saltará el texto pequeño.
- La voz (principalmente tipografía y color) se relaciona con las elecciones estéticas que establecen el estado de ánimo de la tipografía.
- La interacción es la más difícil. Tiene que ver con la forma en que las formas de letras de los textos trabajan entre sí. La interacción depende de la ubicación, el tipo de letra y los personajes mismos. El objetivo es vincular visualmente líneas de texto aparentemente opuestas.
La ubicación afecta cómo se leen las líneas como un todo
El orden en el que desea que los visitantes lean el texto es el factor más importante para determinar cómo organizar las líneas de texto. Como el inglés es un idioma de izquierda a derecha, el texto pequeño de la izquierda será significativamente diferente del texto pequeño de la derecha.
Con el pequeño texto en la esquina superior izquierda, el gráfico anterior dice así: "Evítalos como la peste". Clichés ". Sin embargo," clichés "está escrito tan grande que la gente podría leerlo primero. El equilibrio entre el tamaño y la colocación pone las dos líneas en igualdad de condiciones.
La versión anterior es menos ambigua. Desviar el texto pequeño a la esquina inferior derecha da una clara prioridad al texto grande. Ahora dice: "Clichés: evítalos como la peste".
Los títulos anteriores son intercambiables porque cada línea es más o menos independiente. Cuando las líneas dependen unas de otras, la ubicación es más crítica. Aquí hay un ejemplo de un trabajo pobre:
Poner el texto pequeño en la esquina inferior derecha deja a los lectores colgando. "Peste: evitar clichés como el ..."? Aunque la mayoría de la gente lo descubrirá, el momento de duda es la diferencia entre una presentación mediocre y una buena.
El arreglo justo arriba es el mejor porque el texto pequeño es la primera parte de la oración. Si queremos poner el texto pequeño a la derecha, el texto grande tendrá que formar la primera parte de la oración. Pero, de nuevo, hay un problema.
Dependiendo de la oración, usar solo la primera palabra para el texto grande no es suficiente, porque las líneas de texto deben funcionar individualmente y juntas. El texto anterior divide la frase incorrectamente. El verbo dominante "evitar" no tiene suficiente significado en sí mismo para garantizar la independencia. Y "clichés como la peste" suena como que estamos comparando frases sobreusadas con enfermedades, en lugar de prescribir evitar ambas. El significado de todo el gráfico cambia.
Incluso si tenemos que reducir el tamaño del texto grande, usar dos palabras (una frase completa) para el texto grande hace que ambas líneas se lean mejor.
Con la superposición de texto, obtener el fraseo correcto a través del diseño es tan importante como la elección del color y la fuente.
Equilibrar la dominación trabajando con, no contra, el fondo
Aunque el objetivo del texto grande es dominar, también puede sofocar fácilmente el texto pequeño. Pero eso no siempre es malo. El buen equilibrio no se trata de evitar que el texto grande domine el texto pequeño, sino más bien de mostrar su importancia relativa.
El tamaño del texto grande lo convierte naturalmente en la declaración principal. Eso es genial si el texto pequeño simplemente se supone que es compatible con el texto grande. Por ejemplo:
"WWW" salta primero. "Bienvenido a la era digital" elabora la idea, apoyando las tres Ws. Pero, ¿y si el texto pequeño supuestamente llevara el mensaje principal?
Arriba, el texto principal es "Bienvenido a la era digital". ¿Y qué significa eso? Desvanecido detrás, "WWW" proporciona una pista.
Cuanto más se combina el texto grande con el fondo, menos importancia adquiere. Cuando el texto grande es apenas visible, el texto pequeño se convierte en el elemento principal.
La interacción está en los detalles
La forma de un tipo de letra es la clave de su aspecto distintivo. Cuando dos líneas de texto se superponen, crean bolsillos, formas extrañas y otras distracciones sutiles.
Arriba, el gran texto blanco anaranjado y pequeño añade desorden innecesario a los contadores (es decir, los agujeros dentro de las letras). Solo, cada bit extra no dificulta mucho la legibilidad. Pero eso es parte del problema: porque no son lo suficientemente malos como para hacer que el texto sea ilegible, podrían descartarse fácilmente por carecer de importancia.
Para una máxima legibilidad, debemos preservar las letras del texto pequeño.
Como se muestra arriba, pequeños ajustes han aclarado la interferencia:
- Reubicado entre los terminales tipo abrazadera de la gran "C", la palabra "texto" ahora es mucho más clara.
- Observe cómo los tallos verticales de "r" y "n" en "explicativo" se encuentran con los bordes de la gran "C".
- Los contadores en "p" y "o" en "supportive" ahora solo contienen negro.
- Cortamos la letra grande "A" para aclarar la "s" minúscula en "apoyo".
El objetivo es preservar las formas de las letras pequeñas, incluso si los lectores no se dan cuenta.
La tipografía hace la diferencia
No todos los tipos de letra son adecuados para tamaños grandes y pequeños. En un tamaño lo suficientemente pequeño, los detalles de una tipografía pueden desaparecer. Y los detalles que se amplían a un tamaño grande a veces pueden crear problemas inusuales.
Las cuatro combinaciones de fuentes anteriores fallan por diferentes motivos:
- Este tipo de letra de secuencia de comandos fue diseñado para imitar la escritura a mano. Sus bordes irregulares contienen cientos de puntos vectoriales, la mayoría de los cuales se pierden en un tamaño pequeño.
- Pero haga que la secuencia de comandos sea demasiado grande y las letras se vean menos como la escritura a mano y más como las rutas de Illustrator festoneadas.
- Los bordes caligráficos de Zapfino son mejores que los de Texas Hero, pero el enorme ascendente en la "b" desequilibra la composición.
- Lucida Blackletter es demasiado complicado para ser práctico como fondo, al menos sin una disposición muy cuidadosa del texto pequeño. Además, su carácter único desaparece en un tamaño pequeño. ¿Son esos swoops y serifs, o es simplemente borroso?
Para texto grande, demasiado grueso o demasiado delgado es perfecto
Cuando superponga texto, piense en tipo grande como texto y fondo . Cuanto más complicadas sean las letras, más textura tendrán. Es decir, es más probable que oculten las formas de letras en el texto pequeño.
Para evitar problemas, engorde o adelgace. Las formas extra gruesas y extra livianas funcionan mejor que un peso normal de la misma cara. Ambos interfieren menos porque el texto pequeño tiene menos posibilidades de alcanzar un borde.
Por ejemplo, el texto grande en las variaciones de Luz y Negro anteriores golpean menos letras pequeñas. Por supuesto, cada rostro y cada conjunto de palabras es diferente. Pero en general, los pesos medios causan más problemas que los pesos finos y gruesos.
Ejemplos prácticos
¿Cómo podría funcionar esto con un texto más probable? Aquí hay algunos ejemplos de texto superpuesto.
Por qué funciona: descolorido en el fondo, el texto grande da una clara prioridad al texto pequeño. Las formas geométricas de Museo tienen pocas distracciones.
Posibles problemas: esta superposición no funcionaría si el texto pequeño fuera más corto. Para llevar el mensaje, el texto pequeño debe superponerse a las seis letras del texto grande.
Por qué funciona: el texto pequeño cruza solo tres trazos gruesos y dos finos de color. Un montón de contraste, incluso para una paleta de colores cálidos.
Posibles problemas: los bordes energéticos del texto grande parecen funcionar en contra de las elegantes líneas del texto pequeño.
Por qué funciona: Ambas líneas de texto tienen formas geométricas nítidas y están alineadas con precisión.
Posibles problemas: ¿El texto pequeño parece un poco perdido? ¿Las tipografías realmente reflejan el espíritu de " steampunk ? "
Por qué funciona: el seguimiento generoso en letras grandes y las líneas claras en ambos textos aclaran a todos los personajes.
Posibles problemas: ¿La textura de fondo hace que el tipo sea demasiado difícil de leer?
Por qué funciona: el texto grande y grueso es legible por sí mismo, mientras que el texto pequeño e íntimo invita a leer. Varios rellenos adicionales mantienen la profundidad de color de las letras mayúsculas "S".
Problemas potenciales:
Pero, ¿ayuda?
Vamos a aplicar estas lecciones a nuestra composición original.
Por qué funciona:
- El texto grande se mezcla con el fondo oscuro, pero su tamaño asegura que sea visible.
- El color brillante hace que el texto pequeño se destaque. La alineación a la derecha lo equilibra.
- El espaciado cuidadoso de las letras minúsculas y la simplicidad de las letras grandes mantienen el conflicto al mínimo.
- Los dos tipos de letra comparten elementos comunes. Por ejemplo, las dos "W" se alinean, a pesar de estar en caras diferentes.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion . Ben es un diseñador web que resuelve problemas de comunicación con un mejor diseño.
¿Cuáles son algunos de los posibles problemas del último ejemplo? Por favor comparte tus pensamientos en los comentarios a continuación.