Beink
- Dec 30, 2021
- 7 min read

When text and image intermingle

Lettre "A" par Macrovector

Whenever one wishes to integrate text into an image or images into a text, the question arises of how to arrange one in relation to the other. The text can be separated from the image, supplement it (title, subtitle, caption), match or contrast with, integrate with it or even become completely inseparable from the image (drawn text).

Figure 4 of the scientific article to which I contributed during my thesis.

In a scientific article, text and image are generally redundant with each other: the text must be understandable without the image and the image must not contain anything new to the text and must be completely and completely peeled into the text. Besides, a figure in a scientific article cannot be without a title and a caption, as well as a figure number. It is therefore far from being sufficient on its own, and mainly serves to provide proof of what is put forward in the text. The scientific article is therefore a format not fond of the proverb "a good sketch is better than a long speech", since the figure is rather the illustration of the text.

Yet who here has not dreamed of magically replacing the introduction of a scientific article with a drawing or a set of explanatory diagrams? See why not in the form of a comic strip ...

Take as an example the first paragraph of the introduction to the scientific article The Polo kinase Cdc5 is regulated at multiple levels in the adaptation response to telomere dysfunction, on which I contributed during my thesis. And imagine it in a drawing. Knowing how to decipher a drawing is a skill that can be learned, just like reading text, because images also have their codes and reading rules. A good exercise to know your ability to read an image, is to take the graphic summary made here by Beink and "read it aloud" that is to say to tell a logical story from what you see. . Some codes are general (the arrow with a flat end, for example, represents an inhibition).

So what story did you come up with? Does it correspond to the text, in general terms?

Diagram of the transmission of the nerve signal within a synapse. Drawing by Jeanne Le Peillet, Beink. https://www.key-draw.com/

Text and image are therefore two different languages, two means of expression that may or may not be suitable for a particular person or subject of study. Using both can therefore be a way of saying the same thing in two different ways, as is the case in a scientific article, for example. Scientific articles are highly codified, both in their writing but also in their visual organization. For example, an illustration should bring one idea and only one. We are therefore far from the big balance sheets. Yet these are the most able to understand the whole of a reflection by integrating each idea into a global context. But I want to make it clear that just because you don't see much in scientific articles does not mean that things cannot be changed!

Layout grid. Credit: unknown.

Arranging text and images is a discipline known as page layout. Layout is the fact of graphically arranging content in a given space, which can be for example a paper page, a web page, etc. Without a layout, the content would simply be placed in the order in which it was collected. It is thanks to a good mastery of the layout that we manage to make the content harmonious, pleasant to read, and above all: understandable. The layout is not reflected without paying attention to the reading path, or even without thinking about a minimum of consistency in the graphic charter.

Below are some simple rules to get you up to speed on the art of page layout.

Give graphic consistency to your document, simply and efficiently!

Choose 2 character fonts:

Photo magazine, containing 1 title font and single paragraph font. Credit: Adobe Stock.

o One for the titles, which can be original, visually impactful, which can take the typo of the logo of your company or institute for example or on the contrary be very personal.

o One for the body of the text, preferably as easy to read as possible, so generally quite basic.

If the need for a 3rd font really arises, for example to highlight a quote, or for the captions, we would prefer to change the formatting of one of the two fonts already chosen to create the illusion. a 3rd font (italics, bold, capital letters, change of character size).

Couverture d'un Closer quelconque.

You wonder why so many fonts exist if it is to choose only two? But to create tabloids of course! Or any other extremely flashy and unprofessional visual medium.

Come on, let's play a little game. How many different typefaces, or variations of fonts, do you see on that front cover of Closer?

The first text on Marine Le Pen: same font, but part written in italics, the other in bold. So already 2 illusions of different fonts. "Closer" is a title of a particular font which is not repeated elsewhere. "People - lived - fashion - TV" is still different. The rest of the typefaces are basically the same, but all in different styles: italic, bold italic, uppercase, lowercase, lowercase bold, uppercase bold italics, horizontal or slanted writing, and at least 8 different font sizes. Then of course, the police allowing to register the serial number, the price, the date, and any information essential to the publication of the number.

Therefore ! When thinking about your layout, ask yourself what impression you want to give, and when in doubt, go for sobriety!

Choose 2 font sizes:

Crédit : Cécile Andreu

Even the size of the fonts matters! For each chosen font, adjust the size of the characters and do not change any more.

For example, 12 for the body text font, which must, remember, be extremely readable.

For the title font, more original (or not), you can have fun choosing the size: see things in gigantic to give impact to your layout, or choose a more traditional size according to the message contained in your work.

Choose your color palette:

Same watchword here: sobriety. Select two colors, which are complementary, of the same shade, contrasting, etc. and for this choice I refer you to the article on colors written for you in a previous newsletter: Barriolez avec harmonie!

The idea is to use the standard black for the body of the text, and to use the color palette for the titles, captions, page backgrounds, color theme of the inserted images, etc.

Below, nine palettes of two colors, generated with Coolors.

Take care of the alignments

The sobriety and efficiency of a successful layout also depends on the alignment of the texts. If you choose to place the titles indented from the body of the text, don't change your mind along the way! Because the alignments greatly contribute to the uniformity of the layout. So you impose a width of margin for your titles, and another for your paragraphs. Likewise, if you choose columnar text layouts, be careful that each column of text is the same size. Finally, setting the paragraph format to "justified" rather than to align, will reinforce the cleanliness of your layout by making each line stop in the same place, giving an impression of rigor and mastery of word processing tools.

Also think about horizontal alignment, by starting your text columns all at the same height for example. Remember that printed works must be reflected on a double page, and not on a single page: so also take care of the alignment of texts and images on the left page compared to the right page!

To help you, you can use layout grids. Using the grid allows you to:

- To delimit the physical limits of the document, by choosing not only the format of the page but also the width of the margins (which can vary between the title and the paragraphs).

- To create columns of texts, replacing the large linear blocks, which increases the readability of paragraphs.

Crédit : inconnu.

- To organize the empty spaces in order to allow the reader a little respite, and therefore to make reading the document more pleasant. In addition to this altruistic side, empty spaces punctuate the page and give it character.

- To vary the inclusion of texts, titles and images to distribute them not necessarily evenly but rather in a way that gives strength, character and respondent to your page.

There are several types of grids, the easiest to use for an efficient layout in a short time are multi-column grids and modular grids, as shown below, on the left and right respectively:

Crédit image : Nundesign

And when image and text are inseparable?

Let’s end this discussion with a few considerations on the particularly interesting case where text and image are one, a scenario that brings together a number of situations.

Incorporating text into an image, playing on the characteristics of the image.

This photo is a good example of using the image to incorporate text, using yellow, the main color of the photograph, but especially the reflection in the water. (We can all the same regret that the incorporated text is not of the same typography as the marks already present on the ground, “R50”). So the watchword here is to have fun with your image! seek to play with its perspective, its dynamic.Utiliser une graphie qui transforme le texte en dessin

Illuminations

The first traces of illustration date back to antiquity, notably on certain papyri from ancient Egypt. But the introduction of decorative elements in Western manuscripts does not appear until quite late, around the 6th century: it is the arrival of illumination. Illuminations are decorations traditionally executed by hand and which adorn texts and manuscripts. For example, they can decorate a drop cap, which is the first letter in a paragraph or chapter, written larger than the rest of the text. This decorative element had a considerable impact on the appearance of page layouts, especially during the Middle Ages.

Calligraphy

Crédit : inconnu.

Calligraphy is considered an art: that of forming the characters of writing well, an art that can be applied to all types of alphabets. Beautiful calligraphy was a sign of prestige (now you have to write as legibly as possible to be a doctor, it seems). Calligraphy currently extends to advertisements: it plays on color contrasts, layout choices, and sometimes pushes letter abstraction to its limits.