A typographic time travel Back to the future

In this page we have reported the choices we have made in relation to the historical documentations of our six styles. We tried to capture the aesthetics, spirit, and inspiration of the chosen periods, updating also them to best fit the new media (such as images, audios or small .gif animations) and to properly adapt them to a scrolling and/or pagination medium. In these ways we hope we gave a nice overview of the evolution of layout design and typography styles across the centuries (or rather, the millennia ).

The inspiration of the style was taken from the Sumerian cuneiform which is known to be the earliest writing system. Its origins can be traced back to about 3,200 BC and it developed from the pictographs and other symbols used to represent trade goods and livestock on clay tablets.

 

The word cuneiform derives from Latin ‘cuneus’, meaning ‘wedge-shaped’. It refers to the shape made each time while engraving cuneiform symbols with a reed stylus into the clay. In order to convey the idea of Sumerian tokens engraved on the clay texture, we made use of CSS property text-shadow: as well as white contrasting colour to make letters more integral and real.

---

Fonts

While manipulating fonts we opted for Kakoulookiam font for headings since the font includes every known glyph for the ancient inscription. Assuming that only a few people can read and understand sumerian script we used the :hover selector to display heading with a readable font when users mouse over them.

For the <p> articles content part we operated a smoother Cuneiform font which tries to emulate ancient script with familiar characters, making them pointed and edgy.

Peskyphoenicians font was used for image captions to create the feeling of extra ancient mystery and make users get a better idea of sumerian style text representation at the visual level. For instance, some letters have the inclination or token symbols similar to that used by the sumerians.

By using column CSS properties we specified the style of the rule between columns to create that “lined” texture inherent to clay tablets.

---

Bibliography

• Wikipedia page about Sumerian cuneiform;
• Cuneiform Library at Cornell University - The website has been developed by the Department of Near Eastern Studies, the Cornell University Library, and the Cuneiform Digital Library Initiative at UCLA with the aim to create an online corpus of the cuneiform tablets;
• Tablets Relating to Sumerian History in the Schøyen Collection -A website developed in cooperation with the National Library of Norway. It contains translations, commentary, and pictures of Sumerian cuneiform tablets of various contents kept in the Schøyen Collection, which is located in Oslo and London.

The history of typewriter typography begins with the nineteenth century. The first typewriter to be commercially successful was invented in 1878. Despite the evolution of typewriters cover more than a century, there are some typographical long lasting conventions that mostly derived from the limitations of the typewriter keyboard itself: the use of monospace fonts (both serif and sans-serif), the paragraph indentation, the practice of underlining text in place of using italics, or the use of all capitals to provide emphasis or to identify titles. Monospaced typefaces were born from the limitations of mechanical typewriters. When the typist pressed a key, the carriage moved the paper the same distance each time, so it was easier to return to a previous printing point to make corrections and do tabulation work. For what concerns the font family, we opted for Special Elite, since it was expressly created to mimic the Smith Corona Special Elite Type No NR6 and Remington Noiseless typewriter models. Furthermore, typewriters were not originally justification-capable machines, mainly because the space between words was fixed. Since the first device which allowed the automatic justification of text was patented most likely in 1920, we decided to keep this layout feature, that fits better the style of the typewriter of the late nineteenth century. In our stylesheet, the spacing between words has been set at 6px. Some examples of this typographic design can be found in Olivetti Archive, while the main historical information were taken from Typographica , a review of typefaces and type books, with occasional commentary on fonts and typographic design founded in 2002.

The background image of the article is a black Corona Typewriter – produced by the Smith Premier Typewriter Company Syracuse – on brown wood planks. On the other hand, as the background of the text we chose to imitate the typical support of typewriters documents, that is the white paper.

The Bauhaus was a German art school founded in 1919 by Walter Gropius in Weimar. The organization combined teachings of architecture, art and design through a rationalistic approach, with a specific attention to new technologies. Fine arts and crafts were the bases of the movement, which in fact was able to deal with all the disciplines, from sculpture to design, from ceramics to graphics.

The style of Bauhaus is commonly characterized as a combination of decoration and functional essentiality. Thus, typical Bauhaus designs – evident in painting, architecture, or interior design – feature little ornamentation and a focus on balanced forms and abstract shapes. In this aspect, the influence of artists as Wassily Kandinsky and Paul Klee, both teachers of the school (the first one from 1919 to 1923 and the second from 1921 to 1931).

Our choices for the typographic design of our Bauhaus Style are based exactly on this essentiality, starting from the background proposed for the page itself. The decorativism and dynamism of this style are due to some expedients such as the rotation of some titles, the insertion of lines and geometric shapes inside the texts, and the use of simple colors – like black and red – but wisely alternated.

Regarding the choice of the font family, we opted for Bauhaus 93 whose design is based on Herbert Bayer's 1925 experimental Universal typeface. It is a decorative font with simple geometric forms and even strokes that give the font a clean and distinctive look. The background image of the article is a recent reproduction of the typical Bauhaus graphics, while the specific color most used in the typography of this style was chosen as the background of the article, which is the #ead2b0 code obtained thanks to the tool Color Zilla, by Google Chrome. Similarly, the exact red color used in real graphics was obtained, the exact code of which is #b93239. Some feedback of what has been described so far can be found in the article "Bauhaus: How the Avant-Garde Transformed Modern Movement" published by My Modern Met and the book The New Architecture and The Bauhaus by Walter Gropius, the founder of the school and the movement.

WHAT & WHEN

For the second half of the XX Century we chose Pop art movement, in particular Roy Lichtenstein typography. Pop art is an art movement that emerged in the United Kingdom and the United States during the mid-to late-1950s. In particular, the term "pop art" was officially introduced in December 1962; the occasion was a "Symposium on Pop Art" organized by the Museum of Modern Art. The movement presented a challenge to traditions of fine art by including imagery from popular and mass culture, such as advertising, comic books and mundane cultural objects. Product labeling and logos figure prominently in the imagery chosen by pop artists, seen in the labels of Campbell's Soup Cans, by Andy Warhol. One of its aims is to use images of popular (as opposed to elitist) culture in art, emphasizing the banal or kitschy elements of any culture, most often through the use of irony. It is also associated with the artists' use of mechanical means of reproduction or rendering techniques.

---

WHO & WHY

We decided to choose Roy Lichtenstein (1923-1997) as the artist of excellence of pop art "typography" for many reasons. It work is exciting, vibrant, and ironic as the '60s were. Its use of parody produces a hard-edged, precise composition that documents while also parodying in a soft manner the old-fashioned comic strip that he chose as subject matter. As the other American artists, bombarded every day with the diversity of mass-produced imagery, Lichtenstein's work features thick outlines, bold colors and Ben-Day dots ("My style just don't come out looking calligraphic, like Pollock's or Kline's.").

Lichtenstein used oil and Magna paint in his best known works, such as 'M-Maybe' (1965), 'Ohhh...Alright...' (1964). and 'Drowning Girl' (1963), the tree artworks that had been chosen as background to the articles. Each of them was appropriated from stories in DC Comics' Secret Hearts, like 'Ohhh...Alright...', taken from #83.

Lichtenstein had a desire that his paintings look as mechanical as possible although he was a painter. He selected teen and action comics as subjects also since they were illustrated by teams that produced source material that was devoid of "personal elements of style". In this sense we also considered Lichtenstein's "typography": because his painting seem mechanical and impersonal, potentially reproducible. Lichtenstein's comics-based women, in fact, "look hard, crisp, brittle, and uniformly modish in appearance, as if they all came out of the same pot of makeup."

---

WHERE

The font used is a free version of the famous 'Roy Liechtenstein font' ('Dupuy Balloon');

The background of the article has been made with salmon on white Ben-day dots as background, to recreate the most used colors of the skins of Liechtenstein's ladies;

The head titles (<h1> and <h2>) feature a change of font ('Badaboom') and two different kinds of comic ballons: a 'shouted' one for <h1 and a 'spoken' one for <h2>;

All the images have a filter saturation of 900% to reach as much as possible the pure primary color (red, blue, yellow);

The audio included in the style is "Doo Wah Diddy Diddy" by the rock band Manfred Mann. It was chosen because, written in 1964, it conveys all the sparkling and happy atmoshpere of those years, and because the subject of the music is a natural, carefree and joyful love ("There she was just walking down the street / Before I knew it she was walking next to me / holding are hands just as natural as can be / We walked on to my door / Then we kissed a little more / Now we're together / We're so happy and that's how we're gonna stay");

Several additions had been made along the article by means of css pseudo-selectors (':after', ':before'): three exclamation points ("!!!") in the title (<h1>), "SBAM!" in the subtitle (<h2>), "$@*#&" in the <h3> and words "INCREDIBLE" and "CAN YOU BELIEVE IT?!!!" to the inline elements, as displayed below.

All these choices had been made to remain as faithful as possible to the original Lichtenstein's style and with the serialization typical of the typography, in particular here the one of comics strips, with text in balloons, captions, "vulgar language" ($@*#&) and exaggeration (pointed out by question marks).

---

BIBLIOGRAPHY

• "Pop art: a continuing history"
• "Roy Lichtenstein and the comic strip"
• "Art into pop"
• "Is it Possible to Answer the Question What is Pop Art in the 21st Century?"

The decrease in the cost of computing technology in the 1980s led to an arcade explosion and video games popped up everywhere and became a dominant cultural force, having marked the 80’s as the golden age of arcade games.

The whole design is the epitome of arcade game screen from the 80s, games were simple and had little complexity.

The theme song is “Space Invaders" by Australian songwriters recording under the band name Player One  in 1979. The song is based on the hugely successful 1978 video game Space Invaders. It was a novelty hit.

---

Fonts

To convey the spirit of the golden age of arcade games we made use of the most authentic fonts of the 80s.

SF Atarian System font was inspired by Atari, a video games company originally founded by Ted Dabney and Nolan Bushnell. It is widely considered as the pioneer in arcade games, home video game consoles. SF Atarian System is a close match to those used by Atari on its logo and their 2600 and 5200 cartridges and boxes.

Death Star font is the reminiscent of Star Wars logo from the 80s, the one with the redesigned “W", other letters widen and letter-spacing increased. Apart from being a vivid allegory to a famous movie/game, Death Star font uses uppercases which were extensively used in headings in the printed press during the decade.

Emulogic is a pixel font that makes a reference to pixel fonts developed from the invention of the computer and were based on the on-screen display format of pixels. Those fonts that are based on an array of pixels, are often called Bitmap fonts and are often designed only for a specific point size.

The photo frames in the articles that consists of 2 blue lines as well as dots represent PacMan pattern that is arguably the most famous and influential game to emerge from the ’80s. Furthermore, the dot-matrix pattern is reminiscent of the characters displayed on old text-based terminal screens.

Design manipulates a few basic colors: red, blue, white, black, yellow and orange. The chosen color palette recalls that color scheme used in video games. Furthermore, red, blue, green and orange were popular colors in the printed press in the 80s since the period was characterized by extensive use of vivid, experimental headings to create a totally captivating look.

---

Bibliography

• https://en.wikipedia.org/wiki/Arcade_game
• The Vintage Video Game Magazine Archive
• Best 80s video game magazines
• The Archive of Video Gaming and Computer Gaming Illustrated magazines.

How will the (near) future be?

Instead of project our minds into catastrophic events or thinking about the functional illiteracy that is spreading more and more, we decided to focus on an optimistic future, characterized by clean, healthy, and dynamic features. As written in the paper "Holographic Projection Technology: The World is Changing", one of the most important waves in the future technology will be holographic technology. First of all, holography is the method used to record patterns of light; These patterns are reproduced as a threedimensional image called a hologram.

From the first eye catching success of 3D hologram advertising and promotion, we will soon have the possibility to have holographic devices in our own hands, everyday: the holographic projectors that are under development will be able to be much smaller and portable.

For this reason, we decided to display a real-size possible "holographic mobile phone" held in the hand of a person, with a compact and futuristic design. In the background we put a blurred photograph of a natural area (a park, a garden...) to point out our optimistic vision of the future, accompanying it with sound of birds chirping. The choices of shades of light blue had been made to give a overall feeling of a modern flow, enhanced also by the "breathing" of the holographic device in the hand of the portrayed user, to simulate his/hers own breathing that is passed to it from the body, through the arm and eventually through the hand.

Through a CSS pseudo-selector (":before") we managed to add a personalized message to every article. Since our professor's name is Fabio Vitali, the message, therefore, is "Welcome back, Mr. Fabio. I have selected for you the latest news". To say it is Azuma Hikari, the 'virtual home robot' of the japanese product "Gatebox". (as Business Insider states here, "Gatebox AI is like an Amazon Echo mixed with the movie "Her," but fewer mustaches"). Beyond being your personal assistant, she's intended to be a companion of sorts , a friend, or even a... wife ("Single? Consider a Cross-Dimensional (Human-Hologram) Marriage"). She can text you friendly messages, asking you what are you doing or when are you coming back home. She can tell you she missed you and she is just as interested as you are in sitting on the couch and watching TV.

What is now a weird and expensive device will soon become a matter of everyday life, that will stay in your pocket. Because holographic phone is a thing. Virtual assistant is a thing.

Another message from Azuma Hikari is displayed also at the end of each article (by means, again, of a CSS pseudo-selector, this time ":after"): "Did you enjoy your article, Mr. Fabio? I can show you more". Regarding other formatting choices, the whole text is shown with the Google font Exo 2, a sans serif typeface that tries to convey a technological/futuristic feeling while keeping an elegant design. All the figures have a ":hover" event, that means that when you pass the mouse over them, they double their size, as how it can really be done with today's cell phones, and it probably will be done with holographic ones. Figure captions constitute in the color reversal: the text from black becomes white and the background from light blue to dark blue. Finally, the user will notice the presence of many advertisements (11 in total, for the longest articles) during the scrolling. In fact, we believe that as time goes on advertising will become increasingly invasive and more personalized (want to read something interesting? Here is Eli Pariser's book "The filter bubble", about the state of intellectual isolation that allegedly can result from personalized searches when a website algorithm selectively guesses what information a user would like to see based on information about the user, such as location, past click-behavior ...). Since our professor is a white italian male, with passion in IT and nerdy things, we put advertisements that could fit this kind of user (we propose three examples here, one for tobacco, one for books and one for Netflix).

---

BIBLIOGRAPHY

• "Holographic Projection Technology: The World is Changing"
• "The Future of Design According to 7 Web Visionaries"
• "Single? Consider a Cross-Dimensional (Human-Hologram) Marriage"
• "Gatebox AI"
• "New CSS Features That Are Changing Web Design"
• "The filter bubble"