<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Typography &#8211; Fragments of Beauty</title>
	<atom:link href="https://frammenti.stefanseifert.com/category/typography/feed/" rel="self" type="application/rss+xml" />
	<link>https://frammenti.stefanseifert.com</link>
	<description>Typeface Works and Essays</description>
	<lastBuildDate>Sun, 10 Dec 2023 09:44:48 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.5</generator>

<image>
	<url>https://frammenti.stefanseifert.com/wp-content/uploads/2016/12/cropped-Homescree_icon-32x32.png</url>
	<title>Typography &#8211; Fragments of Beauty</title>
	<link>https://frammenti.stefanseifert.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Ein Blick auf den Bücherkosmos der Stamperia Valdonega</title>
		<link>https://frammenti.stefanseifert.com/2023/12/ein-blick-auf-den-bucherkosmos-der-stamperia-valdonega/</link>
					<comments>https://frammenti.stefanseifert.com/2023/12/ein-blick-auf-den-bucherkosmos-der-stamperia-valdonega/#respond</comments>
		
		<dc:creator><![CDATA[elementi]]></dc:creator>
		<pubDate>Sun, 10 Dec 2023 09:31:28 +0000</pubDate>
				<category><![CDATA[Typeface Design]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Bodoni]]></category>
		<category><![CDATA[Centaur]]></category>
		<category><![CDATA[Garamond]]></category>
		<category><![CDATA[Magazine]]></category>
		<guid isPermaLink="false">http://www.seifertfragments.de/?p=3152</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
					<wfw:commentRss>https://frammenti.stefanseifert.com/2023/12/ein-blick-auf-den-bucherkosmos-der-stamperia-valdonega/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Magazine Double-Pages from My University Archives</title>
		<link>https://frammenti.stefanseifert.com/2021/08/magazine-double-pages-from-my-university-archives/</link>
					<comments>https://frammenti.stefanseifert.com/2021/08/magazine-double-pages-from-my-university-archives/#respond</comments>
		
		<dc:creator><![CDATA[elementi]]></dc:creator>
		<pubDate>Fri, 27 Aug 2021 06:15:09 +0000</pubDate>
				<category><![CDATA[Experimental]]></category>
		<category><![CDATA[Magazine]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Beauty]]></category>
		<guid isPermaLink="false">http://www.seifertfragments.de/?p=3083</guid>

					<description><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-scaled.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-scaled.jpg 2560w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-768x513.jpg 768w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-1536x1027.jpg 1536w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-2048x1369.jpg 2048w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-300x200.jpg 300w" sizes="(max-width: 2560px) 100vw, 2560px" /></p><span class="initial"><span class="cap">I</span></span> remember cutting out these beautiful cursive text blocks in <em>Garamond (No. 3)</em> from photographic enlargements made with a reproduction photo camera. It took me a while to arrive at these seemingly simple layout solutions. Purely composing like a painter, with text instead of color and form. The image overlaying text blocks were enlarged and developed on transparent film material, which I carefully mounted over the color photocopies of those wonderful <span class="author">F. C. Gundlach</span> photographs I had found in an antiquarian bookstore (and with whose long-gone beauties I had literally fallen in love).

<blockquote>In those days, there was a lot of work with scissors and montage, which in a way forced us to think about typography differently than we do today.</blockquote>

In those days, there was a lot of work with scissors and montage, which in a way forced us to think about typography differently than we do today. This had a lasting impact on my way of perceiving sets of text, which in turn seemed to be woven from excellent (phototypesetting) typefaces as if into a tapestry. Flipping through my old <span class="author">Daniel Berkeley Updike</span> copy of <em>Printing Types, Their History of Forms and Use</em> recently, I suddenly realized that what I was doing resembled what the old printers of the 15th century produced with text as form, compact and as the purest element of composition.

Only later did I begin to discover what <span class="author">Brodovitch</span> and <span class="author">Liberman</span> were doing for the famous fashion magazines. I'm still very interested in magazine layout. Although, well, I would do it differently than what I see in most magazines today. I would go back to composing with text....

<strong>Credits:</strong>
<span class="author">F. C. Gundlach</span> | Photography
<span class="author">Guido Löhrer</span> | Photography (reproduction)
]]></description>
										<content:encoded><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-scaled.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-scaled.jpg 2560w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-768x513.jpg 768w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-1536x1027.jpg 1536w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-2048x1369.jpg 2048w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/layladylay_1-300x200.jpg 300w" sizes="(max-width: 2560px) 100vw, 2560px" /></p><span class="initial"><span class="cap">I</span></span> remember cutting out these beautiful cursive text blocks in <em>Garamond (No. 3)</em> from photographic enlargements made with a reproduction photo camera. It took me a while to arrive at these seemingly simple layout solutions. Purely composing like a painter, with text instead of color and form. The image overlaying text blocks were enlarged and developed on transparent film material, which I carefully mounted over the color photocopies of those wonderful <span class="author">F. C. Gundlach</span> photographs I had found in an antiquarian bookstore (and with whose long-gone beauties I had literally fallen in love).

<blockquote>In those days, there was a lot of work with scissors and montage, which in a way forced us to think about typography differently than we do today.</blockquote>

In those days, there was a lot of work with scissors and montage, which in a way forced us to think about typography differently than we do today. This had a lasting impact on my way of perceiving sets of text, which in turn seemed to be woven from excellent (phototypesetting) typefaces as if into a tapestry. Flipping through my old <span class="author">Daniel Berkeley Updike</span> copy of <em>Printing Types, Their History of Forms and Use</em> recently, I suddenly realized that what I was doing resembled what the old printers of the 15th century produced with text as form, compact and as the purest element of composition.

Only later did I begin to discover what <span class="author">Brodovitch</span> and <span class="author">Liberman</span> were doing for the famous fashion magazines. I'm still very interested in magazine layout. Although, well, I would do it differently than what I see in most magazines today. I would go back to composing with text....

<strong>Credits:</strong>
<span class="author">F. C. Gundlach</span> | Photography
<span class="author">Guido Löhrer</span> | Photography (reproduction)
]]></content:encoded>
					
					<wfw:commentRss>https://frammenti.stefanseifert.com/2021/08/magazine-double-pages-from-my-university-archives/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>From a time when…</title>
		<link>https://frammenti.stefanseifert.com/2021/08/from-a-time/</link>
					<comments>https://frammenti.stefanseifert.com/2021/08/from-a-time/#respond</comments>
		
		<dc:creator><![CDATA[elementi]]></dc:creator>
		<pubDate>Tue, 17 Aug 2021 11:26:31 +0000</pubDate>
				<category><![CDATA[Magazine]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Beauty]]></category>
		<category><![CDATA[Elegance]]></category>
		<category><![CDATA[Model]]></category>
		<category><![CDATA[Woman]]></category>
		<guid isPermaLink="false">http://www.seifertfragments.de/?p=3066</guid>

					<description><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled.jpg 2560w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-768x511.jpg 768w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-1536x1022.jpg 1536w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-2048x1363.jpg 2048w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-300x200.jpg 300w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled-400x265.jpg 400w" sizes="(max-width: 2560px) 100vw, 2560px" /></p><span class="initial"><span class="cap">…</span></span> we were fashion editor, casting director, photographer, art director, typographer and type designer all rolled into one.

The story behind the “blue” photography was quite unusual and perhaps worth telling. I intended to photograph scenes of extreme elegance, and of course in Paris. But as a student I had no money, so I decided to develop a concept to photograph fashion on real women in the street. A kind of street photography, but with the ambition to make something very elegant. 

So I spent 2 weeks in Paris (I settled on a campsite near the Bois de Bologne) looking for beautiful, well-dressed women. An endeavor that was not as easy as I had imagined. In order to take these kinds of paparazzi shots without a model, I had to remain unidentified. I used a 500mm telephoto lens with mirrors that allowed me to shoot handheld without attracting too much attention. For this, I used high-sensitivity 3200 ASA film material. In this way, I could shoot by hand and achieve exposure times of 1/250s or less to maintain focus. With a motor shutter, I took more than 600 shots (which was quite a lot at the time, since I was using analog film). Much of this footage was trash, but occasionally something really beautiful happened.

<blockquote>After I took a series of shots, the beautiful lady began to notice my uninvited presence. But perhaps she also saw in what state of arousal I was. […] She let me finish my work with indulgence.</blockquote>

However, the most amazing and exciting scene was this beautiful young lady sitting in a sidewalk cafe (I don't remember where) behind the window, probably talking to a friend. I was so mesmerized by her beauty that I forgot everything that was happening around me. I stopped almost in the middle of a chaotic street with parked cars, passengers around me complaining.... After I took a series of shots, the beautiful lady (although I was at some distance) began to notice my uninvited presence. But perhaps she also saw in what state of arousal I was. For she gave me a beautiful but barely noticeable smile and continued talking as if nothing had happened. She let me finish my work with indulgence. 

Later, in the dark room, I developed the coarse-grained film on hard photographic paper (AGFA barrit no 5 graduation) to make the grain stand out even more and achieve an almost abstract pointillism effect. Further, using a special chemical treatment, I changed the silver tones to a dark blue and experimented with it for almost 2 weeks. (At that time, you could hardly enter the lab at the university without running into me there.) In the process, I noticed that the grain was no longer as even. So I bought retouching paints in all shades of blue to gray, and with a fine hair brush I filled in the holes, at the same time scraping free the paper white in the condensations with a medical scalpel. This took me another 2 weeks. Extremely concentrated, almost meditative work. But I was completely in love with this beautiful face.

I decided to redraw a classic fashion typeface, <em>Caslon No. 540</em> from <span class="author">Linotype</span>, by hand to accompany my photographs. I enlarged the letters and drew them on tracing paper, which I placed over them. In this way I achieved a more beautiful and graceful typeface, especially by making the hairlines thinner. Then the letter images were zoomed out again with a reproduction camera and mounted on a transparent film, which was then deducted as contact under vacuum. The resulting text blocks or words were also exposed on AGFA No. 5 to achieve the absolute black on a brilliant white. According to my previous conceptual studies, I wanted the individual words (seVouer) to appear “cut out” of a text block surrounding. So I intentionally added partially truncated letters of the following or preceding words of an imaginary sentence.

One could say that the whole process was a very personal result of “<em>se Vouer</em>”: to dedicate oneself to something close to the border of self-sacrifice in order to represent beauty.

<strong>Credits:</strong>
<span class="author">Stefan Seifert</span> | Photography
<span class="author">Guido Löhrer</span> | Photography (reproduction)
Unknown | Model
<span class="author">Beatrix Herre</span> | Model (legs)]]></description>
										<content:encoded><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled.jpg 2560w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-768x511.jpg 768w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-1536x1022.jpg 1536w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-2048x1363.jpg 2048w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-300x200.jpg 300w, https://frammenti.stefanseifert.com/wp-content/uploads/2021/08/seVouer_1-scaled-400x265.jpg 400w" sizes="(max-width: 2560px) 100vw, 2560px" /></p><span class="initial"><span class="cap">…</span></span> we were fashion editor, casting director, photographer, art director, typographer and type designer all rolled into one.

The story behind the “blue” photography was quite unusual and perhaps worth telling. I intended to photograph scenes of extreme elegance, and of course in Paris. But as a student I had no money, so I decided to develop a concept to photograph fashion on real women in the street. A kind of street photography, but with the ambition to make something very elegant. 

So I spent 2 weeks in Paris (I settled on a campsite near the Bois de Bologne) looking for beautiful, well-dressed women. An endeavor that was not as easy as I had imagined. In order to take these kinds of paparazzi shots without a model, I had to remain unidentified. I used a 500mm telephoto lens with mirrors that allowed me to shoot handheld without attracting too much attention. For this, I used high-sensitivity 3200 ASA film material. In this way, I could shoot by hand and achieve exposure times of 1/250s or less to maintain focus. With a motor shutter, I took more than 600 shots (which was quite a lot at the time, since I was using analog film). Much of this footage was trash, but occasionally something really beautiful happened.

<blockquote>After I took a series of shots, the beautiful lady began to notice my uninvited presence. But perhaps she also saw in what state of arousal I was. […] She let me finish my work with indulgence.</blockquote>

However, the most amazing and exciting scene was this beautiful young lady sitting in a sidewalk cafe (I don't remember where) behind the window, probably talking to a friend. I was so mesmerized by her beauty that I forgot everything that was happening around me. I stopped almost in the middle of a chaotic street with parked cars, passengers around me complaining.... After I took a series of shots, the beautiful lady (although I was at some distance) began to notice my uninvited presence. But perhaps she also saw in what state of arousal I was. For she gave me a beautiful but barely noticeable smile and continued talking as if nothing had happened. She let me finish my work with indulgence. 

Later, in the dark room, I developed the coarse-grained film on hard photographic paper (AGFA barrit no 5 graduation) to make the grain stand out even more and achieve an almost abstract pointillism effect. Further, using a special chemical treatment, I changed the silver tones to a dark blue and experimented with it for almost 2 weeks. (At that time, you could hardly enter the lab at the university without running into me there.) In the process, I noticed that the grain was no longer as even. So I bought retouching paints in all shades of blue to gray, and with a fine hair brush I filled in the holes, at the same time scraping free the paper white in the condensations with a medical scalpel. This took me another 2 weeks. Extremely concentrated, almost meditative work. But I was completely in love with this beautiful face.

I decided to redraw a classic fashion typeface, <em>Caslon No. 540</em> from <span class="author">Linotype</span>, by hand to accompany my photographs. I enlarged the letters and drew them on tracing paper, which I placed over them. In this way I achieved a more beautiful and graceful typeface, especially by making the hairlines thinner. Then the letter images were zoomed out again with a reproduction camera and mounted on a transparent film, which was then deducted as contact under vacuum. The resulting text blocks or words were also exposed on AGFA No. 5 to achieve the absolute black on a brilliant white. According to my previous conceptual studies, I wanted the individual words (seVouer) to appear “cut out” of a text block surrounding. So I intentionally added partially truncated letters of the following or preceding words of an imaginary sentence.

One could say that the whole process was a very personal result of “<em>se Vouer</em>”: to dedicate oneself to something close to the border of self-sacrifice in order to represent beauty.

<strong>Credits:</strong>
<span class="author">Stefan Seifert</span> | Photography
<span class="author">Guido Löhrer</span> | Photography (reproduction)
Unknown | Model
<span class="author">Beatrix Herre</span> | Model (legs)]]></content:encoded>
					
					<wfw:commentRss>https://frammenti.stefanseifert.com/2021/08/from-a-time/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Magazine Layout for the Web</title>
		<link>https://frammenti.stefanseifert.com/2017/07/magazine-layout-for-the-web/</link>
					<comments>https://frammenti.stefanseifert.com/2017/07/magazine-layout-for-the-web/#respond</comments>
		
		<dc:creator><![CDATA[elementi]]></dc:creator>
		<pubDate>Sat, 22 Jul 2017 16:26:54 +0000</pubDate>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Magazine]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Chanel]]></category>
		<category><![CDATA[Elegance]]></category>
		<category><![CDATA[Fluidness]]></category>
		<category><![CDATA[Proportion]]></category>
		<guid isPermaLink="false">http://www.seifertfragments.de/?p=1983</guid>

					<description><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section.jpg 1977w, https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section-768x451.jpg 768w" sizes="(max-width: 1977px) 100vw, 1977px" /></p><span class="initial"><span class="cap">O</span>n</span> the return of a recent journey to Italy I was annoying myself on the airport and, thus, bought me quite an older book about <span class="author">Richard Avedon</span> photography. Beautiful inspiring photographs, but what, by far, struck me most were some of those smaller pictures added on the margins of the pages: demonstrating how they were composed in <em>Harper’s Bazaar</em> magazine pages of the forties, fifties and beginning sixties by genius art director <a href="https://en.wikipedia.org/wiki/Alexey_Brodovitch" target="_blank" title="Wikipedia" rel="noopener noreferrer"><span class="author">Alexey Brodovitch</span></a>.

It was such a stunning way to divide and subdivide spaces between blocks of typography, white areas, finally, even in relation to the composition of the images themselves. I, at once, recognized dozens of obvious proportions referring clearly to the <em>Golden cut</em>, also blank spaces bordering text blocks within sober <em>squares</em> in a repeatingly degressive mode, thus beginning with big ones on the outer side down to smaller ones nested in their inside. Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.



<blockquote>A tendency to return exactly to that point from which we started. I am talking of explicit and distinctive <span class="quote_emphasize">magazine layout</span>.</blockquote>



Now, what we can take over into our times of such splendid examples? I guess we have to talk about <em>user interface (ui) design</em> in the first place. It is since long <em>the</em> most important discipline to aim at for excellent typography as it gathers all what is displayed on electronic devices rather than using paper. In my web design beginner years at the start of this century I remember that we were so much fascinated by the new facilities which the monitor design gave to us, such as animation in the first place. We were tempted, and I think we were right at that time to do so, to try everything that brought us as far as possible away from static <em>paper</em> layout. Whereas for now there seems to exist a clear tendency of modern webpages and applications, at least in those of them trying to introduce some elevated style and elegance, to return exactly to that point from which we started. I am talking of explicit and distinctive <em>magazine layout</em>.



<blockquote>Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.</blockquote>



And this is, by far, much more difficult as it may seem at a first glance! That is because we are confronted with a seemingly almost uncontrollable variety of devices and monitor sizes. Thus, modern <em>grid systems</em> developed refined methods to keep proportions (things that for many reasons before <em>CSS3</em> were only very hard, if not impossible to achieve) neat and clear, and scale them up and down in a horizontal and vertical direction. Some pages as <a href="https://www.chanel.com/en_WW/fashion/haute-couture.html" target="_blank" rel="noopener noreferrer"><em>www.chanel.com</em></a> base their concept on <em>absolute positioning</em> techniques employing <em>Javascript</em> recalculation. Meanwhile, almost unrecognized, there is another fine means to achieve similar things with pure <em>CSS</em>. Since <em>CSS3</em> was introduced we have measures as <em>vw</em> and <em>vh</em>, instead of percentage and rigid pixel widths. That allows our elements to act <em>relative</em> (in all circumstances and independent of their surrounding containers) to our outer <em>viewport</em> size and proportion, in consequence, leaving us the choice to treat the latter like a magazine <em>page</em>.

What seems little and certainly not one of the most breathtaking news of the web (but in fact it is fairly much!) gives back to us designers the possibility to act just as those ancient brillant layouters. We regain control of the division of spaces between text, white room and photography, being free to do collages etc. And many of new cool and elegant applications will take advantage of this, I am convinced! On my own homepage (<a href="https://www.stefanseifert.com" target="_blank" rel="noopener noreferrer"><em>www.stefanseifert.com</em></a>) relaunch I try to rely purely on viewport size relative measures. That is not only in horizontal sense, but also for rigorous vertical distribution of all elements keeping respective distances chained to page boundries, in both length and width.

To conclude, while I am dragging my browser window to control how my layouts adapt themselves harmoniously I enjoy a side glance at those adorable <span class="author">Bazaar</span> pages in my new “old” book: being so proud of, at least, trying to get close to what those great artists had achieved before us and, thus, participating to pass it on to a demandful, exciting future!]]></description>
										<content:encoded><![CDATA[<p><img src="https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section.jpg" class="attachment-md_post_thumb_large size-md_post_thumb_large wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section.jpg 1977w, https://frammenti.stefanseifert.com/wp-content/uploads/2017/07/YSL-section-768x451.jpg 768w" sizes="(max-width: 1977px) 100vw, 1977px" /></p><span class="initial"><span class="cap">O</span>n</span> the return of a recent journey to Italy I was annoying myself on the airport and, thus, bought me quite an older book about <span class="author">Richard Avedon</span> photography. Beautiful inspiring photographs, but what, by far, struck me most were some of those smaller pictures added on the margins of the pages: demonstrating how they were composed in <em>Harper’s Bazaar</em> magazine pages of the forties, fifties and beginning sixties by genius art director <a href="https://en.wikipedia.org/wiki/Alexey_Brodovitch" target="_blank" title="Wikipedia" rel="noopener noreferrer"><span class="author">Alexey Brodovitch</span></a>.

It was such a stunning way to divide and subdivide spaces between blocks of typography, white areas, finally, even in relation to the composition of the images themselves. I, at once, recognized dozens of obvious proportions referring clearly to the <em>Golden cut</em>, also blank spaces bordering text blocks within sober <em>squares</em> in a repeatingly degressive mode, thus beginning with big ones on the outer side down to smaller ones nested in their inside. Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.



<blockquote>A tendency to return exactly to that point from which we started. I am talking of explicit and distinctive <span class="quote_emphasize">magazine layout</span>.</blockquote>



Now, what we can take over into our times of such splendid examples? I guess we have to talk about <em>user interface (ui) design</em> in the first place. It is since long <em>the</em> most important discipline to aim at for excellent typography as it gathers all what is displayed on electronic devices rather than using paper. In my web design beginner years at the start of this century I remember that we were so much fascinated by the new facilities which the monitor design gave to us, such as animation in the first place. We were tempted, and I think we were right at that time to do so, to try everything that brought us as far as possible away from static <em>paper</em> layout. Whereas for now there seems to exist a clear tendency of modern webpages and applications, at least in those of them trying to introduce some elevated style and elegance, to return exactly to that point from which we started. I am talking of explicit and distinctive <em>magazine layout</em>.



<blockquote>Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.</blockquote>



And this is, by far, much more difficult as it may seem at a first glance! That is because we are confronted with a seemingly almost uncontrollable variety of devices and monitor sizes. Thus, modern <em>grid systems</em> developed refined methods to keep proportions (things that for many reasons before <em>CSS3</em> were only very hard, if not impossible to achieve) neat and clear, and scale them up and down in a horizontal and vertical direction. Some pages as <a href="https://www.chanel.com/en_WW/fashion/haute-couture.html" target="_blank" rel="noopener noreferrer"><em>www.chanel.com</em></a> base their concept on <em>absolute positioning</em> techniques employing <em>Javascript</em> recalculation. Meanwhile, almost unrecognized, there is another fine means to achieve similar things with pure <em>CSS</em>. Since <em>CSS3</em> was introduced we have measures as <em>vw</em> and <em>vh</em>, instead of percentage and rigid pixel widths. That allows our elements to act <em>relative</em> (in all circumstances and independent of their surrounding containers) to our outer <em>viewport</em> size and proportion, in consequence, leaving us the choice to treat the latter like a magazine <em>page</em>.

What seems little and certainly not one of the most breathtaking news of the web (but in fact it is fairly much!) gives back to us designers the possibility to act just as those ancient brillant layouters. We regain control of the division of spaces between text, white room and photography, being free to do collages etc. And many of new cool and elegant applications will take advantage of this, I am convinced! On my own homepage (<a href="https://www.stefanseifert.com" target="_blank" rel="noopener noreferrer"><em>www.stefanseifert.com</em></a>) relaunch I try to rely purely on viewport size relative measures. That is not only in horizontal sense, but also for rigorous vertical distribution of all elements keeping respective distances chained to page boundries, in both length and width.

To conclude, while I am dragging my browser window to control how my layouts adapt themselves harmoniously I enjoy a side glance at those adorable <span class="author">Bazaar</span> pages in my new “old” book: being so proud of, at least, trying to get close to what those great artists had achieved before us and, thus, participating to pass it on to a demandful, exciting future!]]></content:encoded>
					
					<wfw:commentRss>https://frammenti.stefanseifert.com/2017/07/magazine-layout-for-the-web/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
