Layout

Page organization: columns, paddings and margins

Most of the codices I have considered prefer a two-column structure, however some richly decorated ones present the text in a single block.

Consequently, I chose to keep a single block for the first section of the articles and set a bi-columnar structure for the rest of the text, testifying the co-existence of rigorous and variegate layout structures in an earlier era to the invention of printing.

In the columns, I minimized the margin between the paragraphs and unified the blockquotes to the rest of the text to make the layout more homogeneous and similar to the original examples. I set the column-gap property with a value of 5vw following the proportions of some examples I took into consideration. I used the overflow-wrap property with the value word-break to further increase the impression of homogeneity.

To give the impression of decorative density and density of the page, I preserved the absence of padding between the textual element and the marginalia, that is, the decorations that surround the manuscript page, because it is a characteristic that I found in most of the illuminated manuscripts taken into consideration.

Cover section and headings

I set a larger font-size (230%) for the title than the rest of the text to highlight it and placed it on the center of the page. It was a personal choice because, in most of the texts I referred to, the text wasn't provided of a title. I set a slight space between the letters through the letter-spacing property and a value of 1 em. I capitalized it through the text-transform property and aligned it to the center.

I have adopted the same type of solution for the h2s, clearly reducing the size of the text.

Borders and frames

I wanted to accentuate the importance of the marginalia and the finely decorated borders that usually surrounded the text trying to preserve their ratio, but since there is no precise information about it- or better, it often variates- I tried to maintain a proportionality that was as close as possible to some examples I took into consideration.

I consequently set the border-left-width property with a value of 100 and a border-right-width of 200, having realized that often the left margin was half of the right one. Instead, I decided to give up the decorations of the upper and lower marginalia, because it would have compromised the readability of the text, which is much longer than the examples that inspired me, and it would have been impossible to preserve the design of the border itself without some unappealing distortions.

I then chose a further frame for the first section of the text, that is, the non-columned one, because I thought it offered a space open to decorations and that it certainly represented a possibility of filling that the illuminated manuscripts would never have given up.

Since there are numerous frames on the web that recall the medieval period but sometimes they are rough remakes or in formats that are not compatible with the intent of inserting them in the layout, I decided to redraw them and export them in a PNG format, to comfortably adapt them to the background.

I therefore selected one of the marginalia that I considered most representative in terms of decorations and colors and redesigned it by changing some details to make it more adaptable to the context of insertion.

I then chose a suitable frame to embrace the first section of text and reproduced it using the same colors as the marginalia to make the final result more homogeneous.

For the borders of the images, I opted for a double border with a gold-colored filling, that I obtained by combining the outline (5px solid #d4af37;), box-shadow (0 7px 0 0 #34251f; 0 7px 0 0 #34251f; 7px 0 0 0#34251f; 7px 0 0 0 #34251f; 0 0 0 7px #34251f;) and border (2px solid #34251f) properties. I found the golden frame solution in the most precious manuscripts I analyzed and therefore emulated it.

Decorations

As for the typographic aspect, L’Abeille de la Nouvelle-Orléans is interesting because it uses different types of fonts for its pages, probably to highlight articles and inserts that would otherwise be too anonymous in a context so full of text.



• The ruling: in the Middle Ages the pages of the most precious manuscripts were characterized by the ruling, that is, by lines that served as a guide for scribes. The more important the book was, the more elaborate the ruling, and from this it is easy to deduce that the beautifully illuminated manuscripts had actual guidelines. In an attempt to recreate the impression of these guidelines, I decided to add a delicate underline to the text through the text-decoration property (0.3px underline). The choice to opacify it (text-decoration-color rgba(212, 31, 24, 0.07)) was then dictated by the fact that the ruling was sometimes done by exerting pressure with a blade on the parchment, and I wanted to re-create this impression.





• The inside-the-text decorations: the text of the illuminated manuscripts was often interspersed with decorative elements, positioned on the same line as the text and often recalling the colors or motifs of the main decoration. I therefore selected one of these decorative elements by extrapolating it from a manuscript and then adapted it to the content of my articles. I used the same decoration as background-image of the h2s.

Typography

As for the typographic aspect, one of the evident characteristics of medieval manuscripts is, to us, the poor legibility of the handwriting, whose typeface is extremely distant from ours.

• I therefore selected a font that echoes medieval writing, the Seagram, and I set the letter-spacing property with a value of -1.5px, that seemed to me the middle ground between not losing the historical rendering but not even legibility.


• The first pages of the codices I analyzed are often characterized by colored and golden decorated drop caps. To reproduce this effect, I therefore chose a decorative medieval font called Royal-7B3K, and I used a linear-gradient property selecting particularly bright shades of gold where I wanted to create a sort of glossy effect. I set the capital letter for every first section of the text through by selecting, through the Javascript function getElementsByTagName, every first paragraph of every second section (the first section being the cover) and adding a class (classList.add). Then I recalled in the CSS file and through the pseudo-selector ::first letter I set the values I wanted in the best way I could.

Colors

For the choice of colors, after looking at many pages of codices and gathering information about the most used inks, I decided to use the following most used shades that I maintained for the elements of the text and for the redrawing of the borders and frames. Each color has been sometimes introduced in a context in which it has been opacized or adapted to the context, but the guideline remains the same.

• Iron gall ink: for the body of the text. The use of this ink dates back to the first centuries after Christ, a favorite choice above all for its indelibility. Since the solutions proposed by the web were not exhaustive, I selected several color examples through a color-picker (the main ones being: #34251ff8 and #413029f6 hex colors), and I chose those closest to the originals. Since the illuminated manuscripts were written, of course, by hand, often different shades of ink were created on the sheet as the color “discharged”. This is why I chose to apply a linear-gradient with shades of colors close but more opaque to the main color.


• Carmine red or Cochineal(#960019 hex color): an insect-based color, used in illuminated manuscripts and with which I decided to render the titles and some of the blockquotes, since sometimes entire parts in red were found within the text.


• Cobalt blue (#0047AB hex color): with which I set some decorations and some elements of the borders


• Malachite green (#3C7A6E hex color): that I used for flower stems of the different borders and decorations.


• Gold: the choice of gold was certainly the most difficult one because finding the color closest to the very thin gold leaves that were used in the Middle Ages. Rather than looking for a color code that seemed too fake I used the color picker and experimented with various shades (#ae7f30, #b0863c and #fff77a hex colors) also through the use of the linear-gradient function of CSS.

Cover

For the realization of the cover I opted for a less decorated and more empty solution, because I noticed that often, in the manuscripts I took as a model, the first pages were always more sparse in decorations than the actual body of the text, overloaded with details.

All the magazine covers feature the Alice in Wonderland rabbit as the protagonist, because we chose to present a special edition of our issues and it seemed to us the best character to embody time, a necessary element to travel through the centuries by selecting the different styles.

I looked for a rabbit that was as similar as possible among the many animal decorations and I set it through the background-image of the div containing all of the cover elements. I cut out the image and applied it mirrored and repeated on the four corners of the page through the background-position with values top, right, bottom, left.

I then chose a frame that seemed suitable for the context of insertion but since it contained elements in my opinion too caricatured and forced, I reproduced the frame following the model and using the same colors as all the other frames, decorative elements and the text of the 1450 style.

References

• the Wikipedia page about illuminated manuscripts: https://en.wikipedia.org/wiki/Illuminated_manuscript


• World History Source: https://chnm.gmu.edu/worldhistorysources/r/21/whm.html


• Medieval Illuminated Manuscripts: https://manuscripts.kb.nl/


• Britannica: https://www.britannica.com/art/illuminated-manuscript


• National Gallery of Art: https://www.nga.gov/conservation/paper/manuscript-project.html


• The Getty Museum: https://www.getty.edu/art/exhibitions/making/


• Medieval Manuscript Manual: http://web.ceu.hu/medstud/manual/MMM/ink.html

Layout

Page organization: columns, paddings and margins

Although, in terms of content, L'Abeille de la Nouvelle-Orléans has a cultural imprint, offering information on the literary, theatrical and musical life of New Orleans, from a visual-aesthetic point of view, it assumes a layout in line with its times.

The text is spread over six (or even 7!) columns very close to each other and the articles - usually quite short - are interspersed with large amounts of advertising content.

I therefore chose to minimize the padding as much as possible and set the column-gap with a value of 8px. But, in order not to lose readability, I gave up the six-column organization for a three-column layout through the property column-count: 3.

To recreate the newspaper effect, I applied to the background, which emulates a sheet overlay, the box shadow property with a black color as value, setting an opacity of 0.5.

To give a further effect of condensation of the text I minimized the margin between the individual paragraphs (margin-top: 0, margin-bottom: 0) and decreased the line-height up to the limit beyond which the text would have been difficult to read, that is 0.9 em. I justified the text following the original template and, additionally, I reduced the whitespaces thanks to the overflow-wrap break word property that allowed me to break and wrap onto the next line. Finally, following the original, I indented the text of the first line of each paragraph through the text-indent property with a value of 1 em.

Cover section and headings

Instead, I wanted to highlight the headings (the h1 and h2 selectors) since the titles, in the case of L’Abeille de la Nouvelle-Orléans, seem to be the only elements that allow themselves more space and dimension than the rest of the text. So I kept the normal line-height value and in the h2s

I slightly increased the space between each letter and each word (letter-spacing: 0.1em ; word-spacing: 0.2em).

I applied the same type of reflection for the cover image, of which I kept the dimensions, to emphasize the structure of the original layout, which prefers a larger size for the header elements and then a considerable simplification and a reduced size in the text columns.

Borders

To reproduce the presence of the numerous advertising inserts and the various theatrical or literary information that characterized the newspaper, often highlighted through different types of borders, I have chosen that the lists (ul, ol) - the elements in my opinion most similar to the original sections - had an alternating border. I therefore reproduced a thick black frame through the border property and a value of 5px black with a slight border-radius (15px) and opacity (0.5) for the unordered lists of which I reduced the font-size, following the original pattern and applied a thin double border to the ordered lists.

Instead, I applied a thin (1px) black border to the odd images and a dotted border to the even ones selecting the latters through the pseudo-selector section:nth-child(even). I left a slight padding (2%) to the figure captions, which I noticed to be slightly emphasized over the rest of the text.

Decorations

I then divided the sections emulating the modus operandi that L’Abeille de la Nouvelle-Orléans adopts for the separation of the various articles from the advertising inserts, i.e. by applying a section end indicator that was as similar as possible to the original. To do so, I used the background-image property, positioning it on the bottom and giving a padding of 30px.

Typography

As for the typographic aspect, L’Abeille de la Nouvelle-Orléans is interesting because it uses different types of fonts for its pages, probably to highlight articles and inserts that would otherwise be too anonymous in a context so full of text.



• For the body of the text I adopted a digitalized version of the font-family Didot, a geometric serif font with very fine graces created by Firmin Didot in the late 1700s and then widely used throughout the nineteenth century, especially by French language publications.


• For the h1, I used Cheltenham Extra Condensed Bold, that I found in one of the many titles that inspired me.


• I then alternated the Cheltenham Extra Condensed Bold and the Franklin Gothic (Std Extra Condensed) through the pseudo-selector section:nth-child(even/odd) so that each section has its h2s visually diverse. I liked the fact of the coexistance of a sans-serif font and a serif font for the same element and it appeared many times in the examples I had.


• For the publication date, the byline and the figure captions I used the sans-serif font Franklin Gothic (Std Extra Condensed), which, despite being designed in the early 1900s, recalls and is remarkably close to the original.


• As for the subtitles, I decided to use a font that emulates the one that L’Abeille de la Nouvelle-Orléans uses in the title of the newspaper itself, that is called Deutch, because I wanted the coexistence of numerous fonts on the same page to emerge as much as possible.


• For the figure-caption of the cover image – the cover being the space in which the variety of fonts emerges the most- I selected a font that emulates the Lehmann Egyptian typeface. It was quite common, for the time, to find inserts or titles that use slab serif (or Egyptian typefaces).

Colors

As for the choice of colors, I applied a grayscale filter to my background to give a homogeneous impression of a whitish page. The same filter affects my images, but on them I specified a percentage of brightness (60% and again 150%) and accentuate the contrast (150%) to give an older effect to them.

I then chose the black color for the text of the entire page and set a very slight opacity (rgba(0, 0, 0, 0.8)) that served to simulate a flat and not bright black, the effect of using less valuable inks for printing newspapers.

Cover

The cover presents, instead of the emblem depicting the bee of the reference newspaper, our character of the month, that is the rabbit from Alice in Wonderland, specially redesigned to take on a style more similar to the represented era. I then kept the publication date with a thin double border (border-bottom/border top: double black).

Finally, I decided to take a little more risk in the layout of the article titles, giving a different border to each one - the same I used for the lists and images of the articles - and creating a slightly shaded effect through the box-shadow property and bottom and top of the borders and with a slight opacity. The latter effect was conceived because in some of the original advertisements a perspective and depth effect was simulated through a three-dimensional drawn border.

The reason why I wanted to recreate the effect of the advertisements within the pages of L'Abeille de la Nouvelle-Orléans for my cover was due, on the one hand, because of the spatial importance they assumed for the newspaper and on the other hand because, to emphasize them, they were the elements in which more decisive typographical choices and layouts emerged.

References

• The Wikipedia page of L'Abeille de la Nouvelle-Orléans: https://fr.wikipedia.org/wiki/L%27Abeille_de_la_Nouvelle-Orl%C3%A9ans


• Google News Archive: https://news.google.com/newspapers?nid=nlKf13ul9_IC&dat=19100301&b_mode=2&hl=it


• Library of Congress: https://www.loc.gov/item/sn86079022/


• Guilty Novin, History of Layout Design and Modern Newspaper & Magazins, Chapter 58: http://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html#Three
  

Bauhaus

The 1920’s decade saw a ferment of both radical and conservative typographic ideas.

From the experimental came a sense of the Modern, meanwhile the peaks of typographic history were revived by traditionalists as representing values that needed to be restored.

The ideas and activities of these years reveal the emerging significance of typography, its position in the flux of creativity between fine art and architecture, and its value as a crucial political and commercial tool.

At the centre of the emergence of a new typography was the Bauhaus. This radically new school, which taught architecture and the applies arts as interdisciplinary subjects, was founded in Weimar in 1919.

To represent the style of the first half of the twentieth century I did not take inspiration from a particular article, but I understood the peculiarities of the Bauhaus and I tried to reproduce them in the best way I could.

I did not take inspiration from a particular article, but I understood the peculiarities of the Bauhaus and I tried to reproduce them in the best way I could.

Layout

The proponents of the Bauhaus looked forward to the pages of grey text being transformed into colourful narratives and being conceived as a dramatic whole so that individuals’ pages were part of a sequence more similar to film frames.

Tensions were to be introduced into the layouts by contracting visual elements- such as empty/full, light/dark, vertical/horizontal, upright/oblique- and these were to be achieved chiefly through the disposition the elements.

A strong difference distinguishes the box the cover.

The latter, that includes the title, the publication date, the by line and the subtitle, I let myself be carried away by the recklessness, the vivacity but above all by the ambiguity of the Bauhaus posters.

I added the flex value to the display property, just to easily manage the content. 'Flex-direction: column' rule allowed me to arrange the elements vertically since everything had to be outside the columns, instead through the rule 'column-span:all' the elements of the cover resulted outside the column structure, since the cover and the box had to appear as distinct entities.

Going forward, I added the 'word-break: break-all' rule to some elements (URL’s) for visual reasons since without it the text would have come out from the edges of the box itself.

Bauhaus is one of the most renowned graphic design visionary firms and changed graphic design by creating a utopian vision. To represent these characteristics, thanks to the property 'transform: rotate(-10deg)' , I tilted the entire cover to the left, including any contained image.

In opposition, for the representation of the box I used the layout of Bauhaus newspapers.

The text is divided into two columns and were and alignment is justified, because the expression must be of clarity and absoluteness.

The column-gap it's minimal because this how it used to be in the articles of the first half of the twentieth century.

Despite this, I still wanted to combine some characteristics of the Bauhaus posters, having been very impressed by them.

Therefore the images, contained within the columns with the object-fit property and the rule 'display: block ' to occupy all the available space, allow the user to interact with them: the ScaleX(-1) value of the transform property resizes an element along the x axis (horizontally).

This unconventional choice is dictated by the awareness that the Bauhaus was born as a very rigid architectural style framed in its own geometrical forms which, although changing in the different buildings, did not change its essence.

Padding, Margin and Borders

No borders have been added inside the box and the cover, instead regarding the padding, in the first one I gave a value of 30 pixels to ensure that the text was well readable.

The H2 has padding of 5 pixels to have a minimum space between sections.

The separate headers are a deliberate effect: it creates geometric disorder typical of posters but not of newspapers: my desire to combine the two types of representation, albeit very different, remains clear.

The margin has the value auto, this means that the box is placed in the centre of the page that contains it.

The figure caption has 10pixels of padding to be a little bit distinct from the image.

To maintain the distance between the cover and the box even in the case of smaller screens I have given the last element, therefore at the date of publication, a rule 'margin-bottom: 25vh'.

The title has the rule 'margin-top: 20vh' so as not go outside of the box and all elements present in the cover have the rule 'text-align: center' , for clearer readability.

Decorations

Advertising was of particular interest to Bayer and he promoted ideas on the psychology of advertising and its relationship to the consciousness.

The importance of placing arresting and symbolic elements into typographic form was made apparent.

The primacy of red and black in two-colour printing, the power of dynamic white space, highly contrasted type sizes used to express relative values of information and the growing use of photomontage were recognize as key concepts.

Schmidt, Bayer's successor, encouraged a slightly wider range of typefaces and evolved grids that moved away from the strictly modular, experimenting more with overlaying one simple pattern on another to create dynamic complexities.

To merge all these approaches and innovations, inspired by the minimal architectural feature, with a the JavaScript function 'document.createElement("DIV") , I added a new element into the HTML and through the classList.add("name") function I assigned a class in order to be able to recall it in the CSS.

These elements, which are six and are displayed as three elements because every two are superimposed with a slightly different padding to give the idea of three-dimensionality, another typical element of this style. I added the property @keyframe that is a block of rules to specify the initial state, the final state and an arbitrary number of intermediate states.

After it, I created an animation with the two most significant geometric shapes reminiscent of the Bauhaus: circle, square. In all truly great eras of art the simple forms of geometry were brought back into use; since the body of the work of art, its internal structure, can only be based on these eternal primary forms that give rise to an order of constant and invariant primary sensations in all men, with minimal variations.

In fact, the square will always give the sensation of stability, while the circumference that of indefinite continuity. A straight horizontal line will give the impression of continuous and calm movement, a broken line leads to discontinuous movement and rhythm.

These two alternates in an automatic way. The circle has width and height with value 100 pixels and the border radius with value 50%, rounding values for all four corners. On the contrary, the square has width with value 50 pixels, height, and border-radius with value 0.

The position of the element is absolute. I managed to superimpose it on the Cover. The text remains visible thanks to the opacity property with a value of 0.2. The column span also here has the property all to place itself directly above the cover, without obscuring it.

Both geometric shapes are shown inclined as all the writings always thanks to the property 'transform: rotate(-25deg).

This choice is justified by my personal desire to give even more effort to style and always inspired by the Bauhaus posters.

Typography

The minimalist sans serif face was one of the several proposals for such a reductive typeface.

The argument for a single alphabet was based since the upper case is not heard but is only seen.

It made written language and its presentation more complex and expensive, demanded more effort in the learning and then in the setting as well as the typesetter’s carrying of more characters. Bayer’s single alphabet proposal is distinctive for generating its forms from a declared reductive range of a few angles, arcs, and selected lines.

In 1925 Walter Gropius commissioned Bayer to design a typeface to be used for all official Bauhaus communications.

Following this functionalist approach, Bayer designed an "idealistic font".

Font Box

Following these assumptions, inside the box I used two fonts that alternate: for the article, the font ‘Prime’ and for the h2 the so-called ‘Bayer’ font, both without any world in upper case with the rule 'text-transform: lowercase'.

For the article, the font weight is bold and font-size 20 pixels.

The feature of h2 is 'text-decoration: underline, dotted'.

The architectural signs of this style are the circle, the square and the triangle and with this decoration I wanted to recall it also within the text.

Font Cover

For the title I used the so-called Bayer font.

The same situation of mixed fonts is found inside the Cover where the subtitle, by line and publication date have the 'Prime' font of the text, all strictly without masculine letters.

The title has the rule 'font-size: 50 pixels' while everything else remains at font size 20 pixels.

The by line and the publication date also have the rule 'text decoration: underline'.

All these choices remain justified by the desire to reproduce an original style while maintaining the main canons and colours of the Bauhaus.

Colors

Bauhaus art uses very few colours that give light back to natural shadows.

Each secondary colour arises from the union of the two primary colours black and white.

The only colours used are black, white, red, yellow and blue.

These were used into the Bayer’s lessons: his teaching was not formal.

He directed the work of students on real commissions that were pulled into the department.

Advertising was of particular interest to him and the primacy of red and black in two-colour printing, the power of dynamic white space, highly contrasted type sizes used to express relative values and the use of collage.

Within the animation I alternated some main colours within the two geometric shapes: red, blue, and yellow.

The title is black with red text decoration underline.

The alternation of red and black creates a visual effect of energy, just as Bayer said.

As background colour I used a color called 'Romance'.

Cover

For the Cover I kept the stylistic characteristics contained in the style.

The animations, in addition to having been reduced to two and therefore to four elements added through JavaScript, have the same principles.

I added the borders, I increased the opacity and I removed every colour. The whole is motivated by the addition of a background image.

The title has a font-size of 90 pixels compared to 30 pixels at the date of publication and the title is also aligned in the centre.

The three elements contained in the HTML, each with title of the collection, author and date have a padding of 30 pixels to be well spaced and fill the entire cover.

To the first element, called 'first', I added the rule 'border-right:black 20px', and 'border-left:yellow 20x', while to the second element a 'border-left:red 20px'.

Finally, at the last element a rule border-top: blue and a border-right: yellow.

I recalled all the titles, removing the underline of the URL with text-decoration: none, and I gave them all a font-size of 40 pixels. In addition, with a: hover the colour changes for each title, always taking up the yellow, red and blue of the Bauhaus.

References

• Bauhaus | The Art Newspaper https://www.theartnewspaper.com/bauhaus


• Bauhaus Movement http://www.magazine.bauhaus-movement.com/


• Bauhaus journal 1926-1931https://www.lars-mueller-publishers.com/bauhaus-journal-1926%E2%80%931931


• Blackwell L, 20th Century Type, 1998


• How Bauhaus Redefined What Design Could Do for Society https://www.nytimes.com/2019/02/04/t-magazine/bauhaus-school-architecture-history.html

Rolling Stone

The article that I have chosen for representing the second half of the 20th century fits into the trend labelled “youth culture”, created by and for teenagers and twenty-somethings, product of the post war baby boom and a generation crucially free from the experience of war and the values of the earlier era.

It is called “The Rolling Stone”, a biweekly American magazine that reports on music, pop culture, and politics.

It was founded in San Francisco in 1967 by Jann Wenner, a former student at the University of California, Berkeley, and Ralph Gleason, a jazz critic for the San Francisco Chronicle newspaper.

Like many other countries in the world, Italy also had its own edition of Rolling Stone: the Italian edition was published for the first time in 1980, and the first issue was published in April.

Co-founders of the Rolling Stone Italian Edition were Franco Schipani and Joseph Lodato.

In addition to the newspaper publication, the Italian editorial staff also took care of organizing concerts by foreign artists; this attempt, however, had an ephemeral life.

The article that I took as a point of reference in the creation of this style belongs to the Italian edition, year 1 number 6, 28 June - 11 July 1980.

Layout

I used two different layout organizations for the cover and the box.

Starting from the box , the first real challenge for me was trying to understand how to place all the elements within 3 columns and secondly thinking about how this could have seemed as similar as possible to the article chosen, so I used the property 'column-count: 3' and 'column-gap: 2em' to leave a minimum space between one column and another and to conclude the rule 'column-rule:2px'.

The text is justified for representing every article in the columns in an orderly manner, thanks also to the rule 'column-fill: balance'.

For the background, I decided to insert an image that represents the paper of a newspaper.

The choice remains justified by the desire to represent the article in a more similar way to that of the Rolling Stone.

Instead for the cover, one of the hardest operations was to give the same order to the title and the subtitle.

With the property “display: table” I set a hierarchy and thanks to the attribute “table-header-group” the Subtitle has moved above the other elements. The title with the attribute “table-row-group” is positioned in the centre and finally the by line and the publication.

To stay as faithful as possible to the article, the by line has 'text-decoration: underline'.

I used the rule 'text-align: justify' for both cover and subtitle but this last has a smaller font-size, to faithfully reproduce the subtitle at the top of the article.

Padding, Margin and Borders

Analysing the box, at first glance I noticed a border with two styles: the outline property has value ‘solid’ and the border has value ‘double’.

I gave more pixels to the border because outline is external and exactly as the image of the article shows a clear detachment with the outer body. I also gave a 'border-spacing:10px', which is the horizontal space into the table.

The images have a display block which takes up all available space, so it does not accept other elements in the same row, a width of 100%, a black border and a red outline exactly like the pictures in the chosen article.

Typography

The choice of fonts turned out to be much simpler.

For the box I imported the font face ‘Rene’, which is sans serif to best represent the simplicity of the 1980’s article.

In stark contrast to the added title 'Rolling Stone' I used the typical 'Roya' font.

The 'font-size:15px' within a box was chosen to be legible, just like a real large and clear newspaper page, and still trying to reproduce the article, the font of the h1 is ‘Roya’.

The value of the font size property in this case is completely different with a value of 35 pixels, and the rule 'font-weight:bold' was to give it more thickness.

In this case the difficulty was to position it completely to the right as closely as possible to the column.

The 'line- height:1em' and the letter-spacing helped me to compact it, without making it look too squashed and unreadable.

The rule 'text-align: right' value moved the title as close as possible to the right column, making it very similar to the title to be represented.

Thanks to the DOM JavaScript I could added a new class without modifying the HTML.

Then, I added to it a Class called “Rolling”.

This element it is very useful to show at first glance that I have chosen the style of the Rolling Stone magazine.

The font is ‘Rene’, with a text shadow black and the colour red.

The position is fixed, in such a way that it remains fixed even if you scroll through the article, and the value “left” and “right” to make it central between columns.

Capitalize the first letter in the most harmonious way possible in the text, trying not to leave empty spaces or not to let the letter out of the edges, was yet another challenge.

The rule in this case is ' section > p:nth-child(1):: first-letter' and the four important properties are font-size, line-height, margin-right and padding.

Turning everything into uppercase and floating to the left, it was a set of measures to match to make the letters fit perfectly with a depth of 4 columns.

Colours

Through the colour picker directly on the image of the chosen article, the main colours representative of the article but in general of the newspaper 'Rolling Stone' are black, red and yellow.

The red and black chosen for added title were been found with colour picker from the Figure 8, while the red border of the images also found with colour picker was found from the chosen article in Figure 1.

Cover

I reproduced the cover of the chosen article, Italian edition, year 1, number 6 of 1980. Starting from the colours, I used the exact same green of the original for the title and for one of the three borders, that is the last one created with the box-shadow property.

The middle border was created with the outlinein a yellow color and the border itself has the same red as the one used for the added title ‘Rolling Stone’ into the style.

Authors and dates of the three elements have a yellow text-decoration, miming the original and the URL’s they do not have any decoration, for greater readability and are in black colour.

References

• Color Picker https://imagecolorpicker.com/


• Rolling Stone Edizione Italiana https://picclick.it/Rolling-Stone-Edizione-Italiana-Bob-Marley-233773853592.html


• Rolling Stone https://www.rollingstone.it/


• Rolling Stone Wikipediahttps://it.wikipedia.org/wiki/Rolling_Stone

Grunge typography became increasingly popular in the 1990s. This art movement was spectacular, expressive and rebellious. A messy and chaotic style; based on experimentation, reinvention and destruction, with the main purpose of breaking all the rules. The charm of grunge was built on a basic idea: it had never been seen before. It wasn't just the experimental design of the letters, but the way they were positioned on the page. In fact it appears illegible at first glance because what matters is to communicate; it is not important that the message is read, but it has to be communicative.

David Carson is considered the father of grunge typography. He was one of the most famous and influential graphic designers of the 1990s. His ability to experiment and take risks to create unique designs made him esteemed and imitated by designers around the world. It can be said that his style defined the era of grunge typography. He became famous for his experimental and deconstructive typography designs and the art direction of Ray Gun magazine.

Ray Gun is an American alternative rock-and-roll magazine, first published in 1992 in Santa Monica, California. Led by artistic director David Carson, Ray Gun explored the experimental use of typography, starting some of the most original experiments among those that have involved typography in the last twenty years. The result was an abstract, chaotic, unconventional style, not always legible, but incredibly distinctive and recognizable.

The main contents of the magazine were musical artists, pop culture, lifestyle, advertising, celebrity icons.

Page organization: columns, paddings and margins

The background reproduces the sheet of a two-sided magazine, was created using the "background-image" property applied to the div containing the style, and the image of a blank magazine was chosen.

The layout is unstructured, there is no formal grid structure, the page is conceptually divided into 4 columns, applying the “column-count: 4” property to the div containing element. The columns are compact, in fact their column-gap is just 5px.

It should be noted that some elements are turned slightly to the left. In my case, this rotation was applied every time a blockquote is encountered, using the “transfrom: rotate ()” property. In addition, where the references are present, a slight inclination has been applied, using the "transfrom: swek" property.

Titles, subtitles, citations and images

To reproduce the title, a grunge-style sans-serif font was chosen, Boycott font, adding some details such as the purple rectangle at the beginning, which was reproduced by selecting the first letter with the pseudo-selector h1 :: first-letter and then adding a padding-left, to create an indent, then the letter was given a background-color and the edges were rounded with border-radius.

In addition there is a barcode, applied to the H1 selector through the background-image property. The barcode is set up differently than its usual one. This artistic choice, wanted by David Carson, was made to make visible and more appreciated, an element such as a barcode, not typically considered in a meaningful way by the reader.

Paragraphs have different forms. The diversity in their shape has been reproduced by creating an elliptical div element, using the “shape-outside” property, which is positioned alongside - on the left side - of some paragraphs selected by using javascript. Since no rules are given to the div to make it visible, the effect obtained is that of an elliptical or rectangular space between one paragraph and another.

In addition it can be seen that some paragraphs are read from right to left, this effect has been recreated thanks to the combination of the properties “direction: rtl” and “unicode-bidi: bidi-override”. Those paragraphs are usually not justified, the latter characteristic being typical for the rest of the paragraphs.

Another typical Raygun feature is the different color of the text. Since there is almost no distance between the paragraphs, to make the division into columns more visible, a different color is used, usually black and gray alternate.

In the Raygun magazine it is very common to find parts of the text underlined, usually in black. For this reason, every time there is a quotation inside the paragraph (“”), a different type of font has been applied to give it greater prominence: Typenoksidi regular Font. To recreate the effect highlighted, the font color is white and the background-color is black.

Some images are colored, but a 40% sepia filter is applied to them (using the “filter” property). Other images are instead in black and white, in this case the “filter” property was used with the values: grayscale (100%) saturated (50%). In fact, it is typical for raygun magazine to have the coexistence of colored images and black and white images on the page. This alternation is made possible by the selector “: nth-child (odd)”, which, applied to the section element, allows you to select the odd sections, then through a hierarchical selector you can apply the filter to the images of the section.

For the descriptions of the images - where present - the font used is Nimbus Sans Becker PBla Regular. In addition, the space between characters and words is less than the usual one, practically non-existent. This effect has been recreated, horizontally, with the “letter-spacing” property with value -1 and, vertically, with the “line-height” property with value 0.7. The description of the images usually overlaps the image. To achieve this overlap, the "position" property with relative value was used, so it was possible to move the div element, containing the description, in relation to its natural position. The shift took place with “top: -130px” and “right: 6px”.

Typography

As for the fonts used, it is typical of the grunge style to use multiple fonts on a single page. All fonts used are san-serif fonts. In some cases they are enriched with details, such as scratches, to express originality and to be unconventional.

The font used for the titles is Boycott font, a grungy display font with noisy design and a little rough around the edges.

>

For the h2 elements I have chosen the DINfun Pro fonts which are special versions of the classic DIN 1451 Mittelschrift font (these new fonts are very different from the serious and concrete roots of the original font). Specifically, the variant used is DINfunProCounterless, where the counters of the letters are full.

For the paragraphs the font chosen is Enuverse font, created specifically for Ray Gun magazine. Used for the first time in the issue number 59 (1998).

For internal citations I used Typenoksidi regular Font. A typewriter font, which sometimes has slight irregularities, to give a more realistic effect.

For blockquotes the font used is the BV variant of the DISTRO font, in which the outline is marked and the body of the character is empty to give greater thickness.

The DISTRO M variant was used for the names of people, places and entities, very common in grunge typography as it has several irregularities from a font-weight point of view.

Nimbus Sans Becker PBla Regular font was used for the figure captions.

The Fliped font was used for lists since it has scratches, a typical characteristic of the grunge style.

Colors

As for the colors, the following were chosen:

• white (darker rgb 248,244,235) for the background.
• green (rgb 42,82,51) for the color of the section titles.
• purple (142,127,146) for the decorative elements. Names, places, entities highlighted in the paragraphs and details in the titles.
• black and gray for the color of the paragraphs, which alternate both to make the text more readable.

In reproducing the cover I was inspired by the release number 39, in 1996. The font used for the title and for the titles of the articles is DINfunProCounterless. The articles are centered and slightly inclined as in the original. On the backgorund, instead of Beck, the artist to whom the release is dedicated, there is the image of Alice in Wonderland's rabbit in a grunge version. The image is blurred as in the original to make the text more readable.

• https://it.wikipedia.org/wiki/Ray_Gun
• https://en.wikipedia.org/wiki/Ray_Gun_(magazine)
• Martin Scott Jarrett, Ray Gun: The Bible of Music and Style (first published in 2019)

Wondering what web design and communication will look like in the future I imagined displays that will appear exactly where we need them, content will appear everywhere and the user interface will not be in the form of a screen as we know it today.For this reason, I decided to reproduce a hologram, or a parallactic image obtained through the use of a laser light.This technology is able to represent this new “ethereal design” at its best, giving a greater sense of reality to those who use it. The flat, two-dimensional design will be enriched not only from a visual point of view, but will also involve other senses such as hearing. There will be greater connection with the user, for example the new devices will be able to recognize the user's mood and consequently change color tones and auditory tones.

Page organization

The layout is organized as to reproduce a hologram. The "linear-gradient" css function has been applied to the background of the container div element, which represents the intangible but projected "display" of the hologram, so as to be able to uniformly mix colors - of light shades tending to white and gray – and to create a gradient and therefore more realistic effect. The text of the paragraphs is justified, through the property "text-align" and the corresponding value "justify".In addition, the text is organized in a single column, positioned in the center of the div element, thanks to the "margin" property and its "auto" value.Finally, the top and bottom padding allowed me to give more airiness to the text.

Under the container div element, I simulated the laser light from which the hologram is obtained. A div element was firstly created using javascript. The div is fixed under the hologram through the position property with fixed value, then it is positioned with the bottom, top and right properties. Different shades of color were used through the box-shadow property and then the floating effect was created using the @keyframe rule, which uses the "transform" property to apply a vertical transition.

On the left side of the "hologram" there are three round shaped buttons of different colors.

By clicking on one of them, it is possible to change the colors and the sound background based on the user’s mood. For this reason, through javascript, each button is associated with the "onclick" event, which calls a javascript function that applies a different style sheet. The graphic details of the user interaction were created with the ": hover" selector, which changes box-shadw and opacity level of the buttons when the user passes over a button with the mouse.

The title is positioned to the center. A glitch effect has been applied to simulate graphic display errors, typical of holographic transmissions. The effect was created via css. First of all, I tripled the text, each of the three versions of the text has the text-shadow property with a different value (color), plus the shadow of the duplicates is positioned with a different height than the text. The first copy of the text overlaps before the h1 (original) element thanks to the psuedoselector :: after, while the other copy is positioned below the text with the psuedoselector :: before. I then created the animation with the @keyframe rule and through the clip-path properties I gradually show different portions of the text.

The h2 elements are in a central position, they have a letter-spacing of 10px. The letters are all in uppercase, via the text-transfrom property with value uppercase. In addition, the shadow box has been modulated so that the outlines of the text have a gradient color, to give the text a neon effect (brightness).

A glitch effect has been applied to the blockquotes, created differently than the glitch effect of the h1 element. In this case through the @keyframe rule the text-shadow is modulated gradually and vertically, by applying the transfrom property it is possible to implement a vertical translation.

The images are centered and have rounded edges, the effect is created through the border-radius property applied to the four corners of the image. In addition it is possible through the “: hover” selector, to apply a zoom on the images.

The fonts used have a minimal style, geometric and regular spacing.Two different variations of the Dosis font were used, a font with a modern and rounded style.it was designed by Edgar Tolentino, refined and enlarged by Pablo Impallari, interspersed and crenated by Igino Marini IKern. Specifically, the variants used are 'Dosis book' for h2 elements, paragraphs and blockquotes elements.While for the title the version used is 'Dosis medium', a version with a more marked style to give greater prominence to the title.

The main colors used on the style “starting page” are the white used for the text. In some cases, for the h2 elements, a text-shadow has been applied on the shades of purple, specifically # ff00f2 opacified, to give greater prominence. For the background I used the rgba gray (156, 156, 156, 0.8), and again the rgba white (255, 255, 255, 0.8). In this case, both colors have been opacified to recreate an effect of transparency. A black background-color was applied to the body, to create greater contrast with the shades chosen for the div element (hologram).

As for the three mood-related variants, in the "right on" variant neutral shades such as white and pink prevail.In the “wake up” version yellow and purple prevail, being considered as energizing colors. Finally, for the “chill” variant, different shades of blue were used, a color that exudes a sense of calm and well-being.

When creating the cover, the font used for the text Dosis in the 'book' variant. An image was chosen as the background that depicts the hole through which Alice "travels" until she reaches Wonderland, “the rabbit hole” that recalls the “character of the month” of our magazine. The titles of the articles are centered, arranged one below the other.They are contained in div elements to which a background color has been applied, which recalls the colors of the buttons through which the mood is chosen when viewing the articles. In addition, through the “: hover” selector the text-shadow changes color, passing to lighter shades, to simulate an increase in brightness, creating an “on” effect.

References