ttgertika
Página principalBlogIconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

In addition to the base set of letters, marks, and symbols, most typefaces also have other graphic elements. These can be simple arrows and circled figures or more complex illustrations, like plants, animals, or people adapted to fit the mood of the typeface. However, even the simplest icons may look distinct in different fonts.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

What does their appearance depend on? How and why are they designed? What variations do they come in? In this article, we will focus on these questions and showcase the most captivating icons and illustrations from TypeType typefaces.

A little backstory: How did arrows and signs appear?

Arrows are one of the basic graphic element options included in almost every typeface. In fact, they don’t quite fit into the category of icons. However, we would still like to tell you more about arrows because they are widely used globally, primarily functioning as navigation aids. Where did they come from?

The modern arrow we are all familiar with is a simple graphic object: a straight line with two diagonals that meet at a single point. Four hundred years ago, the depiction of an arrow resembled the archer’s arrow, which actually forms the foundation of the symbol. With time, the illustration was simplified, lost its «feathering,» and became a schematic image.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Today, the arrow is a universal symbol that everyone understands. That’s why it is used even in records on board the unscrewed spacecraft Pioneer 10 and Pioneer 11. The illustrations on these plaques are meant for hypothetical habitants of other planets. The symbols communicate information about human beings and the location of the Earth and the Solar System in the Universe, so the illustrators decided that the meaning of arrows would be clear even for aliens.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Nevertheless, studies suggest that arrows were not commonly used as navigation aids until the 18th century. Before, other images served this purpose. The earliest recorded indicator symbol is the drawing you see below: it’s carved into the pavement in Ephesus city and dates back to approximately the 1st century CE. It shows a foot next to a woman’s face. Why a foot? This image literally calls you to «follow the lead» to get somewhere. So, paired with a woman’s face, this navigation sign indicated the way to the brothel.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

In the modern world, the foot symbol is also used in public spaces, such as shopping centers.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Apart from that, another symbol was used to show direction—a manicule, or pointing hand. It is believed that this symbol emerged in Spain in the 12th century CE. Such pointing hands were used to make text notes: manicules were drawn on margins and pointed at text fragments that needed attention.

The cuff gives away that it’s Harlequin’s hand. Yet, as the manicule gained popularity, its depictions diversified. The medieval period was characterized by particularly bold imaginings on manicules.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Summing up, the style of the pointing hand symbol depended on the cultural and historical features and the author’s vision. Now, let’s explore the factors that influence the appearance of icons in modern fonts.

What impacts the icon graphic?

To begin with, let’s answer the question of what the purpose of icons is in fonts. First, they are beautiful. Second, they help convey the idea of the font and its mood. Third, they may specify the context of font usage. Even the most basic icons, like arrows, manicules, hearts, etc., will have distinct looks in different fonts.

So, the visual style of icons is shaped by two factors:

  1. Overall mood of the font (typeface);
  2. Font’s application range.
Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

To design a set of icons, it’s essential to understand what the font’s message is and what associations it evokes. Character construction directly influences the font’s mood: the stem weight, contrast, ascenders and descenders, serifs, etc. All these structural features are reflected in the icon graphics.

The purpose of the font also influences the icon style: designers can create specific sets of icons for particular domains.

Icons and illustrations in fonts

Almost every TypeType typeface includes basic symbols, like circled figures, arrows, and other pointers. These are standard elements often used for navigation purposes, to create a hierarchy in a text (lists, for example), and more. As a rule, they are not classified as icons, even if they have distinct looks in different typefaces. For instance, in TT Norms Pro, our versatile bestseller, symbol design is characterized by simplicity and elegance. The arrow also maintains a very minimalistic appearance.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

In a more technological and robust typeface like TT Autonomous, the arrow looks a little different. The white space in the font is squared, and terminals and stroke ends are cut. So, the cuts in arrows reflect the forms of terminals, and the stem weight is the same as in the characters. The overall icon style is simple and elegant, without any decorative elements.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Icons and illustrations are more complex graphic elements designed for a specific font. We chose the most eye-catching examples of TypeType typefaces with icon sets to demonstrate how the font’s style and purpose influence the appearance of icons.

Spiky TT Ricks

TT Ricks evokes the following associations: spiky, sharp, a little extravagant, angry, mystical. The icon set for TT Ricks includes the symbols corresponding to this mood: playing cards, crescent moons, stars, chandeliers, and poisonous mushrooms.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

The character structure features dynamic, large serifs. TT Ricks is a high-contrast serif with dense typesetting. All these traits are reflected in the icon graphics. Let’s explore them with an arrow as an example. In this case, the arrow has a pointy top, a thin bar, and a diamond-shaped decorative element. These features support the overall concept of the font.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Charming TT Espina

TT Espina is another example of font graphics influencing icons’ graphics. This is a rather high-contrast, a little aggressive typeface with diamond-shaped forms resembling the boho style and something magical. The icon set of TT Espina refers to these associations: it features crystal balls, stars, comets, matches, and crystals.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Stylish TT Ricordi Greto

TT Ricordi Greto is an experimental font inspired by a floor plaque dating to 1423 found within the Basilica di Santa Croce, Florence. This font’s historical forms complement contemporary visual design approaches. The choice of icons for this typeface reflects this unique characteristic, featuring images of daggers, bones, skulls, flowers, and snakes. TT Ricordi Greto also includes a catchword set of 13 pieces that can be used as individual design elements.

Designer typeface TT Globs

TT Globs is a stylish and unusual slab serif with wide proportions. It gives off a playful and light vibe associated with summer. This typeface’s icon set emphasizes all these features: it includes eye images reminiscent of the glyph forms, cheerful flowers, and schematic images of planets and galaxies.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Cinematographic TT Trailers

TT Trailers demonstrates well how the font’s purpose can affect the icon set. This typeface was crafted to be a poster font for the film industry. It’s narrow and stretched to efficiently condense maximum information into a limited space. TT Trailers includes a set of small letters designed specifically for that purpose. The icon set of this font is also connected with its application area: it features tickets, a screen, a seat, popcorn, navigation signs, etc.

Convenient TT Interphases Pro

This typeface was designed to be used in interfaces; that’s why it features a large set of icons commonly used in interfaces: various arrows, ticks, gears, folders, etc.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Versatile TT Neoris

TT Neoris is a multifunctional chameleon font that can be adapted to suit any project. The glyph design in this font is simple and minimalistic but features some peculiar details. Given that the typeface was designed to suit diverse uses, it includes basic icons, like hearts, stars, hands, geometric shapes, and smiley faces.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Font graphics

It’s worth mentioning other graphical elements in typefaces that don’t fall under the category of icons.

initials in TT Ramillas

One of the most curious examples is TT Ramillas. After designing it, we decided to add something else to this font. Naturally, we began with research, resulting in the decision to create one outline font style and a set of initials.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

We crafted individual ornaments for each letter. To maintain the variation parameters, reduce the time spent on designing initials, and minimize labor intensity, we first created separate elements, like leaves, flowers, stems, and swirls. After that, we combined them, like mosaics, to decorate each letter.

All the elements were added as individual icons in the typeface. Designers can build their own ornaments out of them, use them as terminals, or use them as resources to edit the existing glyphs if needed for layout design.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Fonts with history

The fonts listed below are united by the fact of having historical background. Each typeface was based on a historical prototype, such as fonts from old books or inscriptions on ancient plaques. This distinctive feature influenced the graphic elements as well: each font features manicules as navigation symbols, not arrows.

TT Livret with book graphics

This serif fuses historical traits and modern forms. To allow for the use of TT Livret in books and other periodicals, we implemented a complete set of book layout graphics into the typeface, including vignettes.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Ornaments in TT Ricordi Marmo

In this vibrant, modern serif, the elements of Florentine sans serif are blended with more traditional visual choices. The typeface features a set of ornamental icons for a wide variety of purposes. They can replace certain letters to add eye-catching graphic elements to texts. You can also combine them to create borders and dingbats or simply use them as icons. All decorative elements are adapted to match the letters in the typeface.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

TT Ricordi Allegria

TT Ricordi Allegria is another font from the TT Ricordi series inspired by ancient inscriptions within the Basilica di Santa Croce, Florence. This elegant typeface includes several delicate icons suitable for creating dingbats and highlighting the font’s visual language.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

TT Marxiana

TT Marxiana is a reconstruction project of a font set used for the magazine called «Niva,» published in Saint-Petersburg during the late 19th to early 20th century. The TT Marxiana fonts closely match the appearance of the originals, making the typeface an ideal tool for designing a magazine or a book rendered in a 19th-century style. The font’s graphic elements include about 30 decorative navigation signs: arrows, hands, clubs, etc. The typeface also features the possibility to build decorative frames.

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Conclusion

It turns out that icons in fonts are not just a peculiar addition to emphasize the typeface’s character; they’re also an excellent tool that amplifies the designer’s possibilities.

Últimas publicaciones

Las Mejores Fuentes Cursivas de 2024: Una Guía Completa de Diseño

Las Mejores Fuentes Cursivas de 2024: Una Guía Completa de Diseño

Las fuentes cursivas son una herramienta de diseño poderosa que puede realzar tus proyectos visuales cuando se usan de manera reflexiva. Sin embargo, la clave está en saber aplicarlas de forma efectiva y adecuada. En esta guía integral, exploraremos el mundo de las fuentes cursivas.

Buscar etiqueta
Cómo Elegir las Mejores Fuentes para Infografías: Guía Completa

Cómo Elegir las Mejores Fuentes para Infografías: Guía Completa

Las infografías son una herramienta versátil y práctica que encuentra aplicación en todas partes: negocios, publicidad, ciencia, periodismo y más. Es una forma poderosa de comunicar información de manera simple y visual.

Buscar etiqueta
Las 10 principales tendencias tipográficas de 2024

Las 10 principales tendencias tipográficas de 2024

Do you want to keep your typography up-to-date and create genuinely inspiring projects? Experts and designers from the TypeType font studio are excited to share the key type trends of 2024 with you in this article. Stay trendy!

Buscar etiqueta
Las 15 mejores fuentes para revistas

Las 15 mejores fuentes para revistas

Las revistas son el lienzo perfecto sobre el que la tipografía puede revelar todas sus facetas. La fuente aquí no sólo transmite información al lector, sino que también influye directamente en el diseño. Transmite el mensaje de la revista, transmite valores e ideas. Este artículo habló sobre cómo elegir la mejor fuente para revistas y compiló una selección de 15 opciones actuales para publicaciones sobre diversos temas.

Buscar etiqueta
UniversiTTy: Lección 9. Caracteres en mayúsculas. Refinamiento detallado de contornos

UniversiTTy: Lección 9. Caracteres en mayúsculas. Refinamiento detallado de contornos

Welcome to the ninth lesson of our «UniversiTTy»! In this series, we guide you through the process of font design step by step. The font is a cohesive visual system. This can be seen on all levels: global (font type, weight, proportions, contrast, general forms) and at lower scales that encompass all graphic choices in individual characters. Let’s find out together how visual details influence the overall perception of fonts.

Buscar etiqueta
Las 15 mejores fuentes de contorno aprobadas por diseñadores en 2024

Las 15 mejores fuentes de contorno aprobadas por diseñadores en 2024

Las fuentes de contorno son una excelente manera de agregar variedad a su diseño y hacerlo atractivo y llamativo. ¿Qué son, dónde se utilizan y qué estilos de fuente se combinan con ellas? Hablamos de todo esto en nuestro artículo y también seleccionamos las mejores fuentes de contorno para varios proyectos.

Buscar etiqueta
Las 10 mejores fuentes para diseños de carteles

Las 10 mejores fuentes para diseños de carteles

Elegir la fuente adecuada para un proyecto es una tarea seria para un diseñador. ¿Cómo encontrar la mejor fuente entre muchas opciones y en qué criterios confiar a la hora de elegir? Te lo contamos en este artículo.

Buscar etiqueta
UniversiTTy: Lesson 8. Designing Basic Latin Characters. Uppercase characters

UniversiTTy: Lesson 8. Designing Basic Latin Characters. Uppercase characters

Welcome to lesson number 8 of our «UniversiTTy» series! Last time, we covered optical compensation, uppercase and lowercase character heights, and the concept of contrast. In this article, we will finally focus on glyph design specifically.

Buscar etiqueta
Cómo elegir una fuente: la guía definitiva para el diseñador

Cómo elegir una fuente: la guía definitiva para el diseñador

La fuente es uno de los elementos de diseño más importantes. Con su ayuda, puede enfatizar, complementar o incluso crear el ambiente del proyecto, colocar acentos y transmitir la información necesaria al usuario. ¿Cómo encontrar la mejor fuente entre muchas opciones y en qué criterios confiar a la hora de elegir? Te lo contamos en este artículo.

Buscar etiqueta

Buscar etiqueta

Más de 20 de las mejores fuentes finas y ligeras de 2024 para un diseño elegante

Más de 20 de las mejores fuentes finas y ligeras de 2024 para un diseño elegante

¿Buscas la mejor fuente delgada para tu nuevo proyecto de diseño? Explora y aprovecha nuestra colección de tipografías skinny, light y thin. Cada una de estas fuentes disponibles en el mercado hará que tus diseños se destaquen. Estas fuentes de línea delgada combinan perfectamente con varios medios impresos y proyectos digitales.

Buscar etiqueta
UniversiTTy: Lección 7. Diseño de caracteres latinos básicos. Altura de glifo, contraste, tamaños ópticos

UniversiTTy: Lección 7. Diseño de caracteres latinos básicos. Altura de glifo, contraste, tamaños ópticos

Welcome to the seventh lesson of our «UniversiTTy»! This article continues our fascinating explorations of the font creation process. Today, we will continue discussing optical compensations, find out how to determine the heights of uppercase and lowercase characters, and learn more about the essence of contrast.

Buscar etiqueta
Capacidades ocultas de las fuentes

Capacidades ocultas de las fuentes

Fonts feature numerous hidden capabilities. However, many designers either don’t know they exist or don’t understand how to use them. In this article, we will explore the topic of OpenType features: what they are, what they can do, and how to use them.

Buscar etiqueta
UniversiTTy: Lección 6. Diseño de caracteres latinos básicos. Introducción

UniversiTTy: Lección 6. Diseño de caracteres latinos básicos. Introducción

It’s time to continue our fascinating journey into the multi-dimensional topic of font design! The following article is dedicated to the first stage of designing basic Latin characters: glyph construction and determining the graphic features, proportions, and consistency.

Buscar etiqueta
Las mejores fuentes para email-marketing: ¿cómo elegirlas y utilizarlas correctamente?

Las mejores fuentes para email-marketing: ¿cómo elegirlas y utilizarlas correctamente?

La fuente adecuada para un boletín informativo por correo electrónico es uno de los componentes de su éxito. Entonces, ¿qué fuentes son adecuadas para los correos electrónicos y cómo utilizarlas correctamente en el diseño? Averigüemos en este artículo.

Buscar etiqueta
10+ mejores fuentes para diseño de etiquetas y envases

10+ mejores fuentes para diseño de etiquetas y envases

Una fuente o un par de fuentes correctamente seleccionados ayudarán a que el diseño sea brillante y funcional, revele la idea de la marca y distinga el producto de la competencia.Pero, ¿qué fuentes debería elegir para el diseño de envases y en qué criterios debería basar su selección? Averigüemos en este artículo.

Buscar etiqueta
Nuestra fuente dorada: cómo creamos la TT Neoris, una neogrotesca ideal

Nuestra fuente dorada: cómo creamos la TT Neoris, una neogrotesca ideal

TT Neoris is a TypeType team font released in 2023. Its name is derived from two words: «neo,» which means «new,» and «rise.» We’ve been working meticulously on it for two and a half years. At the moment, TT Neoris is the most ambitious project of the studio: our goal was to create the ideal Neo-Grotesque that would mark a new chapter in the history of typography and become a bestseller.

Buscar etiqueta
Nuestro resumen del año: El viaje de TypeType hasta 2023

Nuestro resumen del año: El viaje de TypeType hasta 2023

2023 became a very important year for TypeType. Throughout 2023, we actively expanded and improved, embracing change and consistently moving forward. So, in this article, we are taking a step back to take a fresh look at our transformations, document achievements, and note down plans for the future. Let’s review our year!

Buscar etiqueta
20+ mejores fuentes para títulos: TOP soluciones elegantes

20+ mejores fuentes para títulos: TOP soluciones elegantes

¿Qué fuentes es mejor elegir para los títulos y en qué criterios debería basar su selección? Hablamos de ello en este artículo y compilamos una lista de más de 20 mejores opciones.

Buscar etiqueta