<?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>Graphic Design Archive | Elementi</title>
	<atom:link href="https://www.elementi-design.com/category/graphic-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.elementi-design.com/category/graphic-design/</link>
	<description>Corporate Design, Web Design, Marketing Consulting</description>
	<lastBuildDate>Fri, 13 Mar 2026 07:56:56 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.elementi-design.com/wp-content/uploads/2017/04/cropped-elementi-sign-512-32x32.png</url>
	<title>Graphic Design Archive | Elementi</title>
	<link>https://www.elementi-design.com/category/graphic-design/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Trifolio Magic — The Making Of</title>
		<link>https://www.elementi-design.com/trifolio-magic-the-making-of/</link>
					<comments>https://www.elementi-design.com/trifolio-magic-the-making-of/#comments</comments>
		
		<dc:creator><![CDATA[Stefan Seifert]]></dc:creator>
		<pubDate>Wed, 14 Sep 2022 11:14:22 +0000</pubDate>
				<category><![CDATA[Culture]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Books]]></category>
		<category><![CDATA[Layout]]></category>
		<category><![CDATA[Website]]></category>
		<guid isPermaLink="false">https://www.elementi-design.com/?p=11566</guid>

					<description><![CDATA[<p>I thought for a while about whether to feature this as a project on our website or something else. It didn't seem to fit with the rest. Not only because of the topic it tells about. Because books seem so far away from the big modern design topics like application development, UX design and so on. Still, I decided not to just skip it.</p>
<p>Der Beitrag <a href="https://www.elementi-design.com/trifolio-magic-the-making-of/">Trifolio Magic — The Making Of</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="layers" class="az-main-section-content az-module no-neg-margin az-padding-top-0 az-padding-bottom-0 az-section-full-screen az-section-with-equal no-animate-content az-module-bg-image">
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
            
            </div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-12 full-height az-main-col-content az-module az-col-pos-bottom az-v-space-clm clm-border-active no-animate-content az-module-default" style="border-right: 30px solid #141618; border-bottom: 30px solid #141618; border-left: 30px solid #141618;"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-website-layers az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: right;"><i class="az-icon az-icon-layers2" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Website Layers</p>

</div>
<div data-font-min="35" data-font-max="35" data-font-buffer="15" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 400; line-height: 140%; color: #ffffff;">
    <h1 style="padding-left: 15px;"><em>Trifolio Magic</em> — The Making Of.</h1>

</div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 1.5vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg" style="height: 9vh;"></div></div></div></div></div></div><a href="#making-of-1" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div id="making-of-1" class="az-main-section-content az-module az-padding-top-60 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-12 col-lg-8 flex-padding-4 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5>Preface</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p>I thought for a while about whether to feature this as a <em>project</em> on our website or something else. It didn&#8217;t seem to fit with the rest. Not only because of the topic it tells about. Because books seem so far away from the big modern design topics like application development, UX design and so on. Still, I decided not to just skip it. Again, not because of the result, the final product, which is actually a website. But because it contains so many interesting facts about how it came to be and why it is “magic” to me. [Stefan Seifert]</p>

</div></div></div></div></div></div></div><div id="photography-1" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-8 col-lg-10 flex-padding-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90 az-clm-force-height" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-media-gallery-wrapper az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="media-04337a9" class="az-media-gallery az-module-container az-isotope-container az-isotope-metro" data-animation-fx="yes" data-animation-in="fadeInLeft" data-animation-speed="default" data-animation-delay="300" data-offset-down="85">
            
            <div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w6 az-grid-metro-h4" data-referance-name="book-2"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/book-2.jpg" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/book-2-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/book-2-2800x1869.jpg);"></div></a></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w6 az-grid-metro-h4" data-referance-name="book-1"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/book-1.jpg" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/book-1-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/book-1-2800x1869.jpg);"></div></a></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w6 az-grid-metro-h4" data-referance-name="book-3"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/book-3.jpg" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/book-3-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/book-3-2800x1869.jpg);"></div></a></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w6 az-grid-metro-h4" data-referance-name="book-4"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/book-4.jpg" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/book-4-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/book-4-2800x1869.jpg);"></div></a></div>
        </div>
    </div>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-bg-images az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: left;"><i class="az-icon az-icon-camera2" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Website Background Images</p>

</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
(function($) {

// this is needed to make the Animation Scroll calculate correct start points when following up a section with Media Gallery in it!
$( document ).ready(function() {
    setTimeout( function() {
        window.dispatchEvent(new Event('resize'));
    }, 1500 );
});

})( jQuery );
</script>
    </div>
</div></div></div></div><div class="multi-clms col-md-4 col-lg-2 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5><span style="color: #bdbdbd;">01.</span> Photography.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: right;">There are photographers who are very good at photographing people, others who are good at photographing architecture or landscapes, and so on. And then there are the <em>artists</em>. Not that the former are not also artists. Of course they are. But there are those who have a very special way of looking at things. They may not be the ones who can represent an object or a person in the best of all possible ways. But they see substance, mere ideas of something where other people see nothing special. We hired Italian photographer <a style="color: white;" href="https://www.antonellaiovino.it" target="_blank" rel="noopener">Antonella Iovino</a> because she is one of those artists.</p>

</div></div></div></div></div></div></div><div id="photography-2" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-60 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-6 col-lg-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-shift-layer az-no-shift-x" style="margin-left: 90px; "><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: left;">We needed this artistic quality to reflect the special tactile quality of the famous books Trifolio prints for museums and renowned artists around the world. The feeling you get when you run your hands over the turned pages, when you touch the high color density of the printed images.</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-sm hidden-xs" style="height: 60px;"></div></div></div></div></div><div class="multi-clms col-md-6 col-lg-9 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div><a href="#magic" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div id="magic" class="az-main-section-content az-module az-padding-top-30 az-padding-bottom-90 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-3 flex-padding az-main-col-content az-module az-col-pos-bottom az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 90px;"></div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5 style="text-align: right;"><span style="color: #bdbdbd;">02.</span> Creating the Magic.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: left;">What could we do now as a key to tell the long traditional story of this particular print shop? Something that symbolized the magic that comes from these books? And there it was. The color powder (because they also make their own color pigments) sprinkled over the pages by the hand of a fairy!</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 6vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 90px;"></div></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" data-video-overprint="100" class="multi-clms col-md-9 col-lg-8 button-overlayer az-main-col-content az-module az-col-pos-middle az-v-space-clm animate-content az-module-bg-video"><div class="az-col az-clm-padding-0" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/magic-powder-start.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
            
            <div class="az-module-video-wrapper">
            <video id="player_69c9ad0435076" class="az-module-video-self az-module-video loading" preload="auto" loop controls>
                    <source type="video/mp4" src="https://www.elementi-design.com/wp-content/uploads/video/magic-powder-sm.mp4" />
                    <source type="video/webm" src="https://www.elementi-design.com/wp-content/uploads/video/magic-powder-sm.webm" />
            </video></div>
            </div>
            
        </div><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 37.5vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30vh;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-magic az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content hidden-xs" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: right;">Website Section with Scroll Sensitive “Magic Powder” <i class="fa fa-eyedropper" style="margin-right: 5px; font-size: 12px; position: relative;"></i>and Color Picking</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-magic az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content hidden-lg hidden-md hidden-sm" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: center;">Website Section with Scroll Sensitive “Magic Powder” <i class="fa fa-eyedropper" style="margin-right: 5px; font-size: 12px; position: relative;"></i>and Color Picking</p>

</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
(function($) {

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  $('#magic video source[type="video/mp4"]').attr('src', 'https://www.elementi-design.com/wp-content/uploads/video/magic-powder.mp4');
  $('#magic video source[type="video/webm"]').attr('src', 'https://www.elementi-design.com/wp-content/uploads/video/magic-powder.webm');
}

})( jQuery );
</script>
    </div>
</div><div class="row row-inner overlay-dida az-padding-top-0 az-padding-bottom-0 az-gutter-0 no-animate-content"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-1 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p><i class="fa fa-eyedropper" style="margin-right: 5px; font-size: 14px; position: relative;"></i></p>

</div></div></div></div></div></div></div></div></div></div></div><div id="magic-2" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-90 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div data-animation-type="ani-in" data-animation-in="fadeInLeft" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-4 code-detail az-main-col-content az-module az-col-pos-bottom az-v-space-clm animate-content az-module-bg-image"><div class="az-col az-clm-padding-0 az-clm-force-height" >
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/code-magic-detail.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
            
            </div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-lightbox fake-lightbox az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape az-hover-fx-wrapper az-hover-fx-fade-in"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-code-magic.jpg" class="az-ilightbox az-ilightbox-image" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-title="Particle Code Detail “Magic Powder”" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-code-magic-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><img fetchpriority="high" decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder.png" srcset="https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder-480x270.png 480w, https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder-960x540.png 960w, https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder.png 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="2560" height="1440" alt="00" /></a>
</div>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-magic-2 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p><i class="fa fa-code" style="margin-right: 5px; font-size: 13px; position: relative;"></i><em>Particle</em> Code Detail “Magic Powder”</p>

</div></div></div></div><div class="single-clms col-md-8 col-lg-5 col-lg-push-0 flex-padding-5 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: left;">To achieve this, we customized one of the fabulous <em>particle</em> scripts found on the web. However, some significant changes were required because we wanted the powder to expand itself as the user scrolled down the story. For each section, it should “magically” align with the chapter headings and disappear after a short time so as not to disrupt the reading experience. In addition, the powder should change color (5) smoothly depending on the color accents in the background photography (6).</p>

</div></div></div></div></div></div><a href="#layout" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div id="layout" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default"><div data-animation-type="ani-in" data-animation-in="fadeInLeft" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-8 flex-padding-2 az-main-col-content az-module az-col-pos-middle az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-60" ><div class="az-shift-layer az-no-shift-y" style="margin-top: 60px; "><div class="az-col-cont">
<div class="az-content-element-wrapper az-single-image margin-bottom-neg az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape"><img decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2022/10/magic-numbers-1.png" srcset="https://www.elementi-design.com/wp-content/uploads/2022/10/magic-numbers-1-480x308.png 480w, https://www.elementi-design.com/wp-content/uploads/2022/10/magic-numbers-1-960x616.png 960w, https://www.elementi-design.com/wp-content/uploads/2022/10/magic-numbers-1.png 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="2715" height="1742" alt="00" />
</div>
</div><div class="row row-inner overlay-dida az-padding-top-0 az-padding-bottom-0 az-gutter-0 no-animate-content"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-1 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-xs" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p><i class="az-icon az-icon-ruler" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>38.2vw (100vw – 100vw/1.618)</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-1 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-lg hidden-md hidden-sm" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p><i class="az-icon az-icon-ruler" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>38.2vw</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-2 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p>1/8</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-3 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p>1/4</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-4 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p>1/4</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block num-5 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p>1/2</p>

</div></div></div></div></div>
<div data-animation-type="ani-in-out" data-animation-in="fadeIn" data-animation-out="fadeOut" data-animation-speed="default" data-animation-delay="0" data-offset-down="15" data-offset-up="15" class="az-content-element-wrapper az-single-image fade-image az-margin-top-0 az-margin-bottom-0 align-center animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape"><img decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2022/09/magic-numbers-2-4.png" srcset="https://www.elementi-design.com/wp-content/uploads/2022/09/magic-numbers-2-4-480x308.png 480w, https://www.elementi-design.com/wp-content/uploads/2022/09/magic-numbers-2-4-960x616.png 960w, https://www.elementi-design.com/wp-content/uploads/2022/09/magic-numbers-2-4.png 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="2715" height="1742" alt="00" />
</div>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-layout-1 az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: right;"><i class="az-icon az-icon-layout" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Grid System Based on the Golden Ratio</p>

</div></div></div></div></div><div class="single-clms col-md-4 flex-padding az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-shift-layer az-no-shift-y" style="margin-top: -30px; "><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 60px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 9vw;"></div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5 style="text-align: left;"><span style="color: #bdbdbd;">03.</span> Some Magic Numbers.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: right;">But what captivated us most about this project was the layout aspect. We’ve experimented a lot with CSS variables, and this time we wanted to go all the way. So we decided to use a single base value, which is 38.2vw (where 100vw is the total width of the screen), and thus the smaller divisor according to the ratio of the golden section <em>1/1.618</em>. This sets the height of the foreground <em>sections </em>(4). All other measurements within the sections and the distances between elements are defined as fractions of this one number.</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-15 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: right; margin-top: -13px;"><i class="fa fa-code" style="margin-right: 5px; font-size: 13px; position: relative;"></i>CSS Rules With <em>&#8211;section-height</em> as Unique Root Measure</p>

</div>
<div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="az-content-element-wrapper az-lightbox az-margin-top-0 az-margin-bottom-0 align-center animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape az-hover-fx-wrapper az-hover-fx-fade-in"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail.jpg" class="az-ilightbox az-ilightbox-image" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="false" data-thumbs="false" data-social="true" data-title="CSS Rules With “--section-height” as Unique Root Measure" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><img loading="lazy" decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail-480x307.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail-960x614.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-css-detail.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="2478" height="1586" alt="Trifolio CSS Detail" /></a>
</div>
</div></div></div></div></div></div></div></div><div id="layout-2" class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-90 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1000" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-2 col-lg-2 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-layout az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: right;"><i class="az-icon az-icon-stack" style="margin-right: 5px; font-size: 13px; top: 1px; position: relative;"></i>Background Image Overlapping</p>

</div></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInLeft" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-4 col-lg-3 responsive-detail az-main-col-content az-module animate-content az-module-bg-image"><div class="az-col az-clm-padding-0" >
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/responsive-detail.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
            
            </div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-lightbox fake-lightbox az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape az-hover-fx-wrapper az-hover-fx-fade-in"><a href="https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-responsive.jpg" class="az-ilightbox az-ilightbox-image" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-title="Background Layers — Matching Colors at Image Edges (1, 2, 3)" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/09/mockup-responsive-60x60.jpg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><img fetchpriority="high" decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder.png" srcset="https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder-480x270.png 480w, https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder-960x540.png 960w, https://www.elementi-design.com/wp-content/uploads/2020/07/lightbox-placeholder.png 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="2560" height="1440" alt="00" /></a>
</div>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-layout az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content hidden-lg" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: left;"><i class="az-icon az-icon-stack" style="margin-right: 5px; font-size: 13px; top: 1px; position: relative;"></i>Background Image Overlapping</p>

</div></div></div></div><div class="multi-clms col-md-8 col-lg-6 flex-padding-6 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: left;">So when it came to the responsiveness of the website, we only had to manipulate a single value. All elements fit together perfectly, regardless of the width of the device. We also have a simple tool to “open” the gaps between the sections in the vertical for narrow devices to get enough room for the magic of the powder particles. The background images, which shift slightly against each other as the page scrolls, have been carefully retouched to invisibly close the gaps with an underlying common background color. (1–3)</p>

</div></div></div></div></div></div><a href="#typography-1" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div id="typography-1" class="az-main-section-content az-module az-padding-top-60 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-12 col-lg-8 flex-padding-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90 az-clm-force-height" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5 style="text-align: right;"><span style="color: #bdbdbd;">04.</span> Typography.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: left;">Another very interesting aspect of this particular storytelling website was the typographic design. Since we’re talking about and for book lovers, we felt it was necessary to focus on typography that would be both elegant and functional on all devices and in all situations. In part, work we had already done on the Trifolio parent website: the Trifolio web fonts. These customized fonts radiate their subtle elegance in large headlines with sublime line contrast and remain legible at small sizes. In total, we have created 13 font versions for one typeface.</p>

</div></div></div></div></div></div></div><div id="typography-2" class="az-main-section-content az-module dark-detect az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-12 flex-padding-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-media-gallery-wrapper az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="media-0442589" class="az-media-gallery az-module-container az-isotope-container az-isotope-metro" data-animation-fx="yes" data-animation-in="fadeInUp" data-animation-speed="default" data-animation-delay="300" data-offset-down="85">
            
            <div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="fonts-1"><a href="https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-1-1.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-1-1-60x60.png'" data-title="Letter Stem Weight and Contrast"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-1-1-2000x2000.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3000" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Letter Stem Weight and Contrast</p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="fonts-2"><a href="https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-2-1.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-2-1-60x60.png'" data-title="Letter Width"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-2-1-2000x2000.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3300" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Letter Width</p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="fonts-3"><a href="https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-3-1.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-3-1-60x60.png'" data-title="Letter Spacing"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/10/OptimaTrifolio-type-details-3-1-2000x2000.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3600" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Letter Spacing</p>
				</div></div>
        </div>
    </div>
</div></div></div></div></div></div></div><div id="typography-3" class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-4 col-lg-6 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont"></div></div></div><div class="multi-clms col-md-8 col-lg-6 flex-padding az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="color: #bdbdbd;">
    <p style="text-align: right;">These fonts differ mainly in terms of contrast and thickness of lines. The larger ones tend to have progressively finer lines and more subtle details as their rhythm tightens, while their smaller cousins do the opposite. Via CSS, the font variants also change smoothly as the browser window resizes. In addition, all families include different language versions with special features such as longer hyphens in American. This has ensured that the heavy database of Trifolios&#8217; large portfolio does not need to be touched, yet typographic details have been corrected retroactively.</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 90px;"></div></div></div></div></div></div></div><div id="website" class="az-main-section-content az-module dark-detect az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-bg-image"><div class="az-col az-clm-padding-90" >
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2022/09/website-trifolio.jpg); background-position: left bottom; background-repeat: no-repeat; background-size: cover;">
            
            </div>
            
        </div><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 32vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg" style="height: 3vw;"></div>
<div data-font-min="24" data-font-max="34" data-font-buffer="13" class="az-content-element-wrapper az-text-block super-thin az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-md hidden-sm hidden-xs" style="font-weight: 100; letter-spacing: 3px; line-height: 140%; color: #ffffff; font-family:Lato;">
    <h2 style="text-align: left;">The Magic Trifolio Website.</h2>

</div>
<div data-font-min="24" data-font-max="34" data-font-buffer="13" class="az-content-element-wrapper az-text-block super-thin az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-lg hidden-xs" style="font-weight: 100; letter-spacing: 3px; line-height: 140%; color: #ffffff; font-family:Lato;">
    <h2 style="text-align: left;">The Website.</h2>

</div>
<div class="az-content-element-wrapper az-social-profiles-wrapper az-margin-top-30 az-margin-bottom-0 no-animate-content">
    <ul class="az-social-profiles-list align-left">
        <li><a href="https://www.behance.net/gallery/151004899/Trifolio-Magic" target="_blank"><i class="fa fa-behance" style="color: #ffffff;"></i></a></li>
    </ul>
</div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 3vw;"></div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-70 az-padding-bottom-70 az-section-default az-section-divider no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #ffffff;"></div>
            
        </div><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <h3>Related Articles</h3>

</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-90 az-section-default no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #ffffff;"></div>
            
        </div><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-isotope-filter="false" class="az-content-element-wrapper az-module-grid-wrapper az-related-post-shortcode az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="related-post-044c042" class="az-module-grid az-module-container az-isotope-container az-isotope-general" data-animation-fx="yes" data-animation-in="fadeInRight" data-animation-speed="default" data-animation-delay="300" data-offset-down="85" data-cols="3" data-def-col="3" data-lg-col="3" data-md-col="3" data-sm-col="2" data-xs-col="1">
            <div class="grid-sizer"></div>
            <div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/capability-versus-subtlety/" title="Capability Versus Subtlety"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2026/03/stefan-seifert-ceo-elementi-1500x999.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2026/03/stefan-seifert-ceo-elementi-1500x999-480x320.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2026/03/stefan-seifert-ceo-elementi-1500x999-960x639.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2026/03/stefan-seifert-ceo-elementi-1500x999.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="999" alt="Capability Versus Subtlety" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/capability-versus-subtlety/" title="Capability Versus Subtlety">Capability Versus Subtlety</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/culture/" title="Culture">Culture</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/web-layout-from-1950-to-2020/" title="(Web) Layout From 1950 to 2020"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268.png" srcset="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268-480x406.png 480w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268-960x812.png 960w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268.png 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="1268" alt="(Web) Layout From 1950 to 2020" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/web-layout-from-1950-to-2020/" title="(Web) Layout From 1950 to 2020">(Web) Layout From 1950 to 2020</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/" title="The Passion of Being a Typeface Designer"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848.png" srcset="https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848-480x432.png 480w, https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848-960x863.png 960w, https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848.png 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="848" alt="The Passion of Being a Typeface Designer" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/" title="The Passion of Being a Typeface Designer">The Passion of Being a Typeface Designer</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/design/" title="Design">Design</a>, <a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a>, <a href="https://www.elementi-design.com/category/typo-arts/" title="Typo Arts">Typo Arts</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/italians-do-it-better/" title="Why Italians Do It Better"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250-480x720.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250-960x1440.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="2250" alt="Why Italians Do It Better" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/italians-do-it-better/" title="Why Italians Do It Better">Why Italians Do It Better</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/culture/" title="Culture">Culture</a>, <a href="https://www.elementi-design.com/category/design/" title="Design">Design</a></span></div></div></div>
        </div>
    </div>
</div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://www.elementi-design.com/trifolio-magic-the-making-of/">Trifolio Magic — The Making Of</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.elementi-design.com/trifolio-magic-the-making-of/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		<enclosure url="https://www.elementi-design.com/wp-content/uploads/video/magic-powder-sm.mp4" length="1486167" type="video/mp4" />
<enclosure url="https://www.elementi-design.com/wp-content/uploads/video/magic-powder-sm.webm" length="0" type="video/webm" />

			</item>
		<item>
		<title>(Web) Layout From 1950 to 2020</title>
		<link>https://www.elementi-design.com/web-layout-from-1950-to-2020/</link>
					<comments>https://www.elementi-design.com/web-layout-from-1950-to-2020/#respond</comments>
		
		<dc:creator><![CDATA[Stefan Seifert]]></dc:creator>
		<pubDate>Thu, 17 Jun 2021 06:54:22 +0000</pubDate>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Layout]]></category>
		<guid isPermaLink="false">https://www.elementi-design.com/?p=9656</guid>

					<description><![CDATA[<p>One of the certainly most challenging design tasks in the creation of digital applications is that of always thinking “fluid” in terms of layout. I often wonder what the glorious magazine layouters of the past as Brodowitch or Liberman would have felt about nowadays. I believe they would have dedicated exactly the same passion to it as they laid into their beautiful and stunning magazine double pages of the past.</p>
<p>Der Beitrag <a href="https://www.elementi-design.com/web-layout-from-1950-to-2020/">(Web) Layout From 1950 to 2020</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="demo-header" class="az-main-section-content az-module full-height no-neg-margin frame-section demo-bg-ani az-padding-top-0 az-padding-bottom-0 az-section-full-screen az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="single-clms col-md-12 az-main-col-content az-module az-col-pos-bottom az-v-space-clm clm-border-active no-animate-content az-module-default" style="border-right: 30px solid #ffffff; border-bottom: 30px solid #ffffff; border-left: 30px solid #ffffff;"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont">
<div class="az-content-element-wrapper wpb_raw_html demo-container az-margin-top-0 az-margin-bottom-0">
    <div class="wpb_wrapper">
        <div id="demo">
    <div id="below">
    	<img decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2021/06/layout-demo-1-b.png" alt="Demo Website Construction"/>
    </div> 
    <div id="above">
        <img decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2021/06/layout-demo-1-a.jpg" alt="Demo Website Visible"/>
    </div>    
</div>
    </div>
</div><div class="row row-inner pos-absolute no-pointer az-padding-top-0 az-padding-bottom-15 az-gutter-0 az-equal no-animate-content"><div class="single-clms col-md-6 col-md-pull-3 col-sm-2 mobile-col-fix flex-pull az-main-col-content az-module az-col-pos-bottom az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-button-wrapper layer-trigger az-margin-top-0 az-margin-bottom-0 no-animate-content">
	<a class="az-btn az-btn-icon az-btn-normal az-btn-circle az-btn-outlined az-btn-custom-colors" title="Click to change the  layer mode" data-btn-bg="#141618" data-btn-hover-bg="#141618" data-btn-text="#141618" data-btn-hover-text="#ffffff" style="background: transparent; border-color: #141618; color: #141618;"><i class="az-icon az-icon-layers2"></i></a>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block didascalia az-font-custom az-font-size-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: left;">Website Layout: <br class="flex-break" /><em>uwe-reicherter.de</em> <br class="flex-break" />by Elementi</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 45px;"></div></div></div></div></div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
(function($) {

$(document).ready(function () {
    $('.layer-trigger').click(
     function () {
         $(this).closest('.demo-bg-ani').toggleClass('hover-state');
     });

 });

})( jQuery );
</script>
    </div>
</div></div></div></div></div></div><a href="#intro" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="intro" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-5 col-lg-6 col-lg-pull-0 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-60 az-clm-force-height" ><div class="az-col-cont">
<div data-font-min="35" data-font-max="54" data-font-buffer="15" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 100; line-height: 140%; color: #000000; font-family:Playfair Display;">
    <h1 style="text-align: left;">(Web) <em>Layout</em> From 1950 to 2020.</h1>

</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 90px;"></div></div></div></div><div class="multi-clms col-md-7 col-lg-5 az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: left;">Fluidness.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">One of the certainly most challenging design tasks in the creation of digital applications is that of always thinking “fluid” in terms of layout. I often wonder what the glorious magazine layouters of the past as Brodowitch or Liberman would have felt about nowadays. I believe they would have dedicated exactly the same passion to it as they laid into their beautiful and stunning magazine double pages of the past.</p>

</div><div class="az-content-element-wrapper az-divider-wrapper"><span class="az-divider neg-margin az-d-solid az-d-center az-margin-top-90 az-margin-bottom-0 az-divider-simple no-animate-content hidden-lg hidden-md" style="width: 70%; border-top-width: 1px;"></span></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div></div></div></div></div></div></div><div id="scalability" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="single-clms col-md-6 col-lg-5 col-lg-pull-0 special-padding-left az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-9 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">Scalable Layouts.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>For our website creations, more and more consequently, we search to abolish absolute values as are pixels and generally not rely on values that reference to single elements rather than the page as a whole as is often the case with percentage measures.</p>

</div></div></div></div><div class="multi-clms col-md-3 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-3 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-9 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">This is because single elements tend to react on layout area resizing differently. In order to arrange them among each other in a horizontally and vertically scalable structure, composition values need to be in straight relation to device window size.</p>

</div></div></div></div></div></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-6 col-lg-7 mobile-frame az-main-col-content az-module az-col-pos-middle az-v-space-clm align-right animate-content az-module-bg-color"><div class="az-col az-clm-padding-90" data-col-min-height-sm="500" data-col-min-height-xs="400">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #f9f9f9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-button-wrapper above az-margin-top-0 az-margin-bottom-0 align-right no-animate-content hidden-sm hidden-xs">
	<a class="az-btn az-btn-icon az-btn-mini az-btn-circle az-btn-custom-colors" href="https://www.elementi-design.com/diagrams-web-layout/" title="Open in an extra browser tab" target="_blank" data-btn-bg="#ffffff" data-btn-text="#141618" style="background: #ffffff; color: #141618;"><i class="az-icon az-icon-stack"></i></a>
</div>
<div class="az-content-element-wrapper az-slider-wrapper margin-neg-top az-margin-top-0 az-margin-bottom-0 no-animate-content">
	
    <div class="az-slider-page-builder flexslider no-direction-nav slide-light-type az-slider-fixed-height" data-text-pos="az-h-v-bottom" data-text-align="az-h-t-left" data-skin-mode="static" data-control-nav="true" data-control-nav-design="dots" data-direction-nav="false" data-slide-type="fade" data-slide-css="true" data-slide-easing="linear" data-slide-speed="600" data-slide-loop="true" data-slideshow="true" data-slideshow-speed="7000" style="height: 300px;">
        <ul class="slides">
        <li id="" class="slide az-imagesLoadedBg " data-skin-slide="slide-light-type" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2021/06/demo-vertical-rhythm-vw.png);"><div><div class="hatching horizontal"></div>
<div class="hatching vertical"></div></div>
            <div class="az-slider-container">
                <div class="az-slider-content az-h-v-bottom az-h-t-left">
                    <div class="az-slider-box az-slider-box-full">
            <h2 class="az-slider-title" data-font-min="11" data-font-max="11" data-font-buffer="50" style="line-height: 96%; letter-spacing: 0px; font-weight: 300;">Vertically Scalable Layout (<em>vw</em> Based)</h2>
                    </div>
                </div>
            </div>
        </li>
        <li id="" class="slide az-imagesLoadedBg " data-skin-slide="slide-light-type" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2021/06/demo-vertical-rhythm-px.png);">
            <div class="az-slider-container">
                <div class="az-slider-content az-h-v-bottom az-h-t-left">
                    <div class="az-slider-box az-slider-box-full">
            <h2 class="az-slider-title" data-font-min="11" data-font-max="11" data-font-buffer="50" style="line-height: 96%; letter-spacing: 0px; font-weight: 300;">Non-Vertically Scalable Layout (Pixel Based)</h2>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</div><div class="az-content-element-wrapper az-empty-divider" style="height: 15px;"></div></div></div></div></div></div></div><div id="rhythm" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-0 az-equal"><div data-animation-type="ani-in" data-animation-in="fadeInUp" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-5 flex-height az-main-col-content az-module az-col-pos-middle animate-content az-module-bg-color"><div class="az-col az-clm-padding-0 az-clm-force-height" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #1e1e22;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-lightbox svg-padding az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape az-hover-fx-wrapper az-hover-fx-fade-in"><a href="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg" class="az-ilightbox az-ilightbox-image" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="false" data-thumbs="false" data-social="false" data-title="Negative Layout Spaces" data-azlbox="ilightbox[lightbox-04563a8]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg'"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><img loading="lazy" decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg" srcset="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg 480w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg 960w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-1.svg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1705" height="1442" alt="Negative Layout Spaces" /></a>
</div>
</div>
<div class="az-content-element-wrapper az-single-svg-image dotted-line az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="2400" data-delay="600" data-easing="easeInOutSine" data-reverse="false">
            <svg version="1.1" id="Ebene_2" viewBox="0 0 1705 1442"
	 style="enable-background:new 0 0 1705 1442;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;}
</style>
<path class="st0" d="M452.4-0.5c-13.6,27.8-29,71.5-13.6,120c106.9,335.9,860.9,163,827.9,589c-26.4,341.4-646.4,327.8-605.7,629
	c6.2,45.9,35.7,83.4,68,104.1"/>
</svg>
        </div>
</div>
</div></div></div></div><div class="single-clms col-md-6 no-side-pad-mobile special-padding-right az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30px;"></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">Rhythm.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: left;">One of the oldest secrets in the art of layouting is that of taking control over the negative or white spaces. For the human brain blank areas have the same if not even more importance than the elements that they surround.</p>

</div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">To create rhythm in length, width and in diagonal to make the eye travel*, it is more comfortable and intuitive to design the empty spaces straight forward. Not long ago you needed complex Javascript calculations to do so.</p>

</div></div></div></div></div>
<div data-font-min="9" data-font-max="9" data-font-buffer="60" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 400; letter-spacing: .03em; line-height: 135%;">
    <p style="text-align: left;">*An allusion to Diana Vreeland’s famous saying “<em>The Eye Has to Travel</em>”</p>

</div><div class="az-content-element-wrapper az-divider-wrapper"><span class="az-divider neg-margin az-d-solid az-d-center az-margin-top-90 az-margin-bottom-0 az-divider-simple no-animate-content hidden-lg hidden-md" style="width: 70%; border-top-width: 1px;"></span></div></div></div></div></div></div></div><div id="flexibility" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="single-clms col-md-7 col-lg-6 col-lg-pull-0 az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-9 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">Calculations.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Text font sizes (unlike headlines) should not change in a responsive desktop situation as they become unreadable when scaled down. As a result on smaller devices they will take more space in the layout relatively.</p>

</div></div></div></div><div class="multi-clms col-md-3 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-3 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-9 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">Using device width dependent measures helps us when it comes to combining white space around text with grid inherit distances consistently. That’s because we are able to draw them into calculation easily, even in more complex nested situations.</p>

</div></div></div></div></div></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-5 col-lg-4 demo-bg-ani mobile-frame az-main-col-content az-module az-col-pos-middle az-v-space-clm align-right animate-content az-module-bg-color"><div class="az-col az-clm-padding-90" data-col-min-height-sm="500" data-col-min-height-xs="400">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #f9f9f9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-button-wrapper layer-trigger above az-margin-top-0 az-margin-bottom-15 align-right no-animate-content">
	<a class="az-btn az-btn-icon az-btn-mini az-btn-circle az-btn-custom-colors" title="Show/Hide Grid" data-btn-bg="#ffffff" data-btn-text="#141618" style="background: #ffffff; color: #141618;"><i class="az-icon az-icon-grid-2"></i></a>
</div>
<div class="az-content-element-wrapper az-button-wrapper ani-btn az-margin-top-0 az-margin-bottom-0 align-right no-animate-content">
	<a class="az-btn az-btn-icon az-btn-mini az-btn-circle az-btn-outlined az-btn-custom-colors" data-btn-bg="#ffffff" data-btn-text="#141618" style="background: transparent; border-color: #ffffff; color: #141618;"><i class="az-icon az-icon-maximize"></i></a>
</div>
<div class="az-content-element-wrapper az-slider-wrapper padding-demo animated-slides margin-neg-top az-margin-top-0 az-margin-bottom-0 no-animate-content">
	
    <div class="az-slider-page-builder flexslider no-direction-nav slide-light-type az-slider-fixed-height" data-text-pos="az-h-v-bottom" data-text-align="az-h-t-left" data-skin-mode="static" data-control-nav="true" data-control-nav-design="dots" data-direction-nav="false" data-slide-type="fade" data-slide-css="true" data-slide-easing="linear" data-slide-speed="600" data-slide-loop="true" data-slideshow="true" data-slideshow-speed="14000" style="height: 300px;">
        <ul class="slides">
        <li id="padding-slide-1" class="slide " data-skin-slide="slide-light-type" style="background: rgba(0,0,0,0);"><div><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="694.884 740.834 900 900" enable-background="new 694.884 740.834 900 900" xml:space="preserve" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 36px 0; overflow: visible;">

    <g class="grid-view below">
     
        <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="951.622" y1="740.834" x2="951.622" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1465.985" y1="844.926" x2="1465.985" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="695.056" y1="740.834" x2="695.056" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="823.339" y1="740.834" x2="823.339" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1337.087" y1="740.834" x2="1337.087" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1080.521" y1="740.834" x2="1080.521" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1208.804" y1="740.834" x2="1208.804" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="844.926" x2="1594.884" y2="1536.742"/>

			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1588.884" y1="1363.083" x2="697.884" y2="1363.083"/>	

<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1495.44" x2="694.884" y2="1495.44"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1098.367" x2="694.884" y2="1098.367"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1230.725" x2="694.884" y2="1230.725"/>
<g>
		
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1600.871" y1="1230.676" x2="1600.871" y2="1230.676"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1604.973" y1="1234.812" x2="1664.446" y2="1294.787"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1666.497" y1="1296.855" x2="1666.497" y2="1296.855"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1662.396" y1="1300.991" x2="1602.922" y2="1360.966"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1600.871" y1="1363.034" x2="1600.871" y2="1363.034"/>
</g>

<text transform="matrix(1 0 0 1 1680 1300.3701)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">8.333&#8201;<tspan fill="#BAA877">vw</tspan></text>

         <g class="dida-text-shift">
<text transform="matrix(1 0 0 1 1372.6445 915.8779)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">8.333&#8201;<tspan fill="#BAA877">%</tspan></text>
<text transform="matrix(1 0 0 1 1499.7344 915.8779)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">8.333&#8201;<tspan fill="#BAA877">%</tspan></text>


        </g> 
    </g>  

<filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="10" dy="15" stdDeviation="15" flood-color="#000" flood-opacity="0.19" />
</filter>
<g class="el-shadow" filter="url(#shadow)">
    <path id="space" fill="#f3f3f3" d="M694.684,1230.634h642.345v88.637H694.684V1230.634z"/>
    <path id="im" fill="#f3f3f3" d="M694.884,740.834h641.467v489.8H694.884V740.834z"/>
</g>
<g>
    <path id="space" fill="#7A7158" d="M694.684,1230.634h642.345v88.637H694.684V1230.634z"/>
    <path id="im" fill="#545457" d="M694.884,740.834h641.467v489.8H694.884V740.834z"/>
</g>

<g class="grid-view">
<g class="arrow-bottom style="transform:translateY(-9px);">
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1594.884" y1="1641.037" x2="1594.884" y2="1641.037"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1590.522" y1="1645.361" x2="1575.258" y2="1660.496"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1573.077" y1="1662.658" x2="1573.077" y2="1662.658"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1568.676" y1="1658.293" x2="1553.271" y2="1643.017"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1551.07" y1="1640.834" x2="1551.07" y2="1640.834"/>
<text transform="matrix(1 0 0 1 1538.9834 1697)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">2.777&#8201;<tspan fill="#BAA877">vw</tspan></text>
</g>

<g class="arrow-left" style="display:none">	
<text transform="matrix(1 0 0 1 530 1279.4531)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">5.555&#8201;<tspan fill="#BAA877"">vw</tspan></text>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="688.917" y1="1230.553" x2="688.917" y2="1230.553"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6.2141" x1="684.542" y1="1234.965" x2="647.351" y2="1272.473"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="645.163" y1="1274.679" x2="645.163" y2="1274.679"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6.2559" x1="649.568" y1="1279.121" x2="687.011" y2="1316.878"/>
			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="689.214" y1="1319.099" x2="689.214" y2="1319.099"/>
</g>
</g>
    
    <g id="sit-1" class="sit">

        <g id="hatch-1" opacity="0.5">
    
            <polygon fill="#545454" points="1080.406,1574.117 1080.406,1584.879 1123.975,1541.311 1123.975,1530.549"/>
            <polygon fill="#545454" points="1346.014,1319.271 1335.253,1319.271 1291.501,1363.022 1302.262,1363.022"/>
            <polygon fill="#545454" points="1080.406,1526.102 1080.406,1536.861 1123.975,1493.293 1123.975,1482.533"/>
            <polygon fill="#545454" points="1297.998,1319.271 1287.237,1319.271 1243.485,1363.022 1254.246,1363.022"/>
            <polygon fill="#545454" points="1080.406,1598.124 1080.406,1608.886 1123.975,1565.317 1123.975,1554.556"/>
            <polygon fill="#545454" points="1370.022,1319.271 1359.259,1319.271 1315.507,1363.022 1326.271,1363.022"/>
            <polygon fill="#545454" points="1322.005,1319.271 1311.244,1319.271 1267.492,1363.022 1278.253,1363.022"/>
            <polygon fill="#545454" points="1080.406,1550.108 1080.406,1560.87 1123.975,1517.302 1123.975,1506.54"/>
            <polygon fill="#545454" points="1418.037,1319.271 1407.276,1319.271 1363.524,1363.022 1374.285,1363.022"/>
            <polygon fill="#545454" points="1112.303,1614.244 1123.064,1614.244 1167.36,1569.948 1156.599,1569.948"/>
            <polygon fill="#545454" points="1466.053,1319.271 1455.293,1319.271 1411.541,1363.022 1422.301,1363.022"/>
            <polygon fill="#545454" points="1160.318,1614.244 1171.08,1614.244 1215.376,1569.948 1204.614,1569.948"/>
            <polygon fill="#545454" points="1490.062,1319.271 1479.299,1319.271 1435.547,1363.022 1446.31,1363.022"/>
            <polygon fill="#545454" points="1184.326,1614.244 1195.087,1614.244 1239.383,1569.948 1228.622,1569.948"/>
            <polygon fill="#545454" points="1088.295,1614.244 1099.056,1614.244 1143.352,1569.948 1132.591,1569.948"/>
            <polygon fill="#545454" points="1394.03,1319.271 1383.27,1319.271 1339.518,1363.022 1350.278,1363.022"/>
            <polygon fill="#545454" points="1136.312,1614.244 1147.072,1614.244 1191.368,1569.948 1180.607,1569.948"/>
            <polygon fill="#545454" points="1442.045,1319.271 1431.285,1319.271 1387.533,1363.022 1398.293,1363.022"/>
            <polygon fill="#545454" points="1080.406,1319.271 1080.406,1320.792 1081.928,1319.271"/>
            <polygon fill="#545454" points="1143.189,1319.271 1080.406,1382.054 1080.406,1392.815 1153.951,1319.271"/>
            <polygon fill="#545454" points="1119.182,1319.271 1080.406,1358.046 1080.406,1368.806 1129.941,1319.271"/>
            <polygon fill="#545454" points="1095.174,1319.271 1080.406,1334.038 1080.406,1344.8 1105.936,1319.271"/>
            <polygon fill="#545454" points="1201.965,1319.271 1191.205,1319.271 1147.453,1363.022 1158.213,1363.022"/>
            <polygon fill="#545454" points="1080.406,1430.07 1080.406,1440.829 1123.975,1397.261 1123.975,1386.502"/>
            <polygon fill="#545454" points="1225.973,1319.271 1215.213,1319.271 1171.461,1363.022 1182.221,1363.022"/>
            <polygon fill="#545454" points="1080.406,1454.077 1080.406,1464.837 1123.975,1421.269 1123.975,1410.509"/>
            <polygon fill="#545454" points="1134.207,1363.022 1177.959,1319.271 1167.198,1319.271 1080.406,1406.062 1080.406,1416.824 1123.975,1373.256 1123.975,1363.022"/>
            <polygon fill="#545454" points="1249.982,1319.271 1239.222,1319.271 1195.47,1363.022 1206.23,1363.022"/>
            <polygon fill="#545454" points="1080.406,1478.086 1080.406,1488.847 1123.975,1445.278 1123.975,1434.518"/>
            <polygon fill="#545454" points="1273.989,1319.271 1263.229,1319.271 1219.477,1363.022 1230.237,1363.022"/>
            <polygon fill="#545454" points="1080.406,1502.093 1080.406,1512.854 1123.975,1469.285 1123.975,1458.524"/>
            <polygon fill="#545454" points="1540.725,1569.948 1496.428,1614.244 1507.189,1614.244 1594.884,1526.551 1594.884,1515.789 1551.372,1559.301 1551.372,1569.948"/>
            <polygon fill="#545454" points="1472.42,1614.244 1483.182,1614.244 1527.478,1569.948 1516.716,1569.948"/>
            <polygon fill="#545454" points="1594.884,1502.541 1594.884,1491.78 1551.372,1535.292 1551.372,1546.053"/>
            <polygon fill="#545454" points="1594.884,1454.525 1594.884,1443.765 1551.372,1487.276 1551.372,1498.037"/>
            <polygon fill="#545454" points="1424.404,1614.244 1435.165,1614.244 1479.461,1569.948 1468.7,1569.948"/>
            <polygon fill="#545454" points="1531.195,1614.244 1594.884,1550.557 1594.884,1539.796 1520.436,1614.244"/>
            <polygon fill="#545454" points="1594.884,1478.535 1594.884,1467.773 1551.372,1511.285 1551.372,1522.047"/>
            <polygon fill="#545454" points="1448.412,1614.244 1459.174,1614.244 1503.47,1569.948 1492.708,1569.948"/>
            <polygon fill="#545454" points="1594.884,1614.244 1594.884,1611.819 1592.459,1614.244"/>
            <polygon fill="#545454" points="1579.212,1614.244 1594.884,1598.572 1594.884,1587.812 1568.451,1614.244"/>
            <polygon fill="#545454" points="1555.203,1614.244 1594.884,1574.564 1594.884,1563.804 1544.443,1614.244"/>
            <polygon fill="#545454" points="1594.884,1406.511 1594.884,1395.749 1551.372,1439.261 1551.372,1450.022"/>
            <polygon fill="#545454" points="1376.389,1614.244 1387.15,1614.244 1431.446,1569.948 1420.685,1569.948"/>
            <polygon fill="#545454" points="1256.35,1614.244 1267.109,1614.244 1311.405,1569.948 1300.646,1569.948"/>
            <polygon fill="#545454" points="1562.082,1319.271 1551.322,1319.271 1507.57,1363.022 1518.33,1363.022"/>
            <polygon fill="#545454" points="1586.093,1319.271 1575.331,1319.271 1531.579,1363.022 1542.341,1363.022"/>
            <polygon fill="#545454" points="1280.357,1614.244 1291.118,1614.244 1335.414,1569.948 1324.653,1569.948"/>
            <polygon fill="#545454" points="1538.077,1319.271 1527.316,1319.271 1483.564,1363.022 1494.325,1363.022"/>
            <polygon fill="#545454" points="1232.343,1614.244 1243.103,1614.244 1287.398,1569.948 1276.639,1569.948"/>
            <polygon fill="#545454" points="1594.884,1334.488 1594.884,1323.726 1551.372,1367.237 1551.372,1378"/>
            <polygon fill="#545454" points="1304.364,1614.244 1315.126,1614.244 1359.422,1569.948 1348.66,1569.948"/>
            <polygon fill="#545454" points="1594.884,1358.495 1594.884,1347.733 1551.372,1391.245 1551.372,1402.007"/>
            <polygon fill="#545454" points="1328.373,1614.244 1339.134,1614.244 1383.43,1569.948 1372.669,1569.948"/>
            <polygon fill="#545454" points="1594.884,1430.52 1594.884,1419.758 1551.372,1463.27 1551.372,1474.031"/>
            <polygon fill="#545454" points="1400.396,1614.244 1411.16,1614.244 1455.456,1569.948 1444.692,1569.948"/>
            <polygon fill="#545454" points="1208.335,1614.244 1219.095,1614.244 1263.391,1569.948 1252.631,1569.948"/>
            <polygon fill="#545454" points="1514.067,1319.271 1503.308,1319.271 1459.556,1363.022 1470.315,1363.022"/>
            <polygon fill="#545454" points="1594.884,1382.504 1594.884,1371.742 1551.372,1415.254 1551.372,1426.016"/>
            <polygon fill="#545454" points="1352.381,1614.244 1363.143,1614.244 1407.438,1569.948 1396.677,1569.948"/>
    
        </g>

        <g id="hatch-overlap-1">
    
            <polygon fill="#7A7158" points="1153.951,1319.271 1143.189,1319.271 1099.438,1363.022 1110.199,1363.022"/>
            <polygon fill="#7A7158" points="1201.965,1319.271 1191.205,1319.271 1147.453,1363.022 1158.213,1363.022"/>
            <polygon fill="#7A7158" points="1177.959,1319.271 1167.198,1319.271 1123.446,1363.022 1134.207,1363.022"/>
            <polygon fill="#7A7158" points="1105.936,1319.271 1095.174,1319.271 1080.878,1333.566 1080.878,1344.328"/>
            <polygon fill="#7A7158" points="1119.182,1319.271 1080.878,1357.574 1080.878,1363.022 1086.189,1363.022 1129.941,1319.271"/>
            <polygon fill="#7A7158" points="1080.878,1320.32 1081.928,1319.271 1080.878,1319.271"/>
            <polygon fill="#7A7158" points="1273.989,1319.271 1263.229,1319.271 1219.477,1363.022 1230.237,1363.022"/>
            <polygon fill="#7A7158" points="1337.881,1327.403 1337.881,1319.271 1335.253,1319.271 1291.501,1363.022 1302.262,1363.022 "/>
            <polygon fill="#7A7158" points="1322.005,1319.271 1311.244,1319.271 1267.492,1363.022 1278.253,1363.022"/>
            <polygon fill="#7A7158" points="1337.881,1351.412 1337.881,1340.648 1315.507,1363.022 1326.271,1363.022"/>
            <polygon fill="#7A7158" points="1297.998,1319.271 1287.237,1319.271 1243.485,1363.022 1254.246,1363.022"/>
            <polygon fill="#7A7158" points="1249.982,1319.271 1239.222,1319.271 1195.47,1363.022 1206.23,1363.022"/>
            <polygon fill="#7A7158" points="1225.973,1319.271 1215.213,1319.271 1171.461,1363.022 1182.221,1363.022"/>
    
        </g>
        
        <rect id="text-rectangle-1" x="1123.975" y="1363.022" display="inline" fill="#FFFFFF" width="427.397" height="206.926"/>
        <g opacity="0.3">
	        <rect x="1208.335" y="1431.919" fill="#BCBEC0" width="336.108" height="11.333"/>
	        <rect x="1267.492" y="1403.573" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1267.492" y="1488.611" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1267.492" y="1546.41" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1297.998" y="1516.957" fill="#BCBEC0" width="246.612" height="11.333"/>
	        <rect x="1232.343" y="1375.228" fill="#BCBEC0" width="312.101" height="11.333"/>
	        <rect x="1181.343" y="1460.266" fill="#BCBEC0" width="363.101" height="11.333"/>
        </g>
    
    </g>

    <g id="sit-2" class="sit second">
    
        <g id="hatch-2" opacity="0.5">
    
            <polygon fill="#545454" points="1177.959,1319.271 1167.198,1319.271 1123.446,1363.022 1134.207,1363.022"/>
            <polygon fill="#545454" points="872.225,1614.244 882.986,1614.244 927.282,1569.948 916.521,1569.948"/>
            <polygon fill="#545454" points="1225.973,1319.271 1215.213,1319.271 1171.461,1363.022 1182.221,1363.022"/>
            <polygon fill="#545454" points="920.238,1614.244 930.999,1614.244 975.295,1569.948 964.534,1569.948"/>
            <polygon fill="#545454" points="1105.936,1319.271 1095.174,1319.271 1051.422,1363.022 1062.184,1363.022"/>
            <polygon fill="#545454" points="822.932,1591.513 822.932,1602.274 866.029,1559.177 866.029,1548.415"/>
            <polygon fill="#545454" points="1064.286,1614.244 1075.048,1614.244 1119.344,1569.948 1108.582,1569.948"/>
            <polygon fill="#545454" points="1370.022,1319.271 1359.259,1319.271 1315.507,1363.022 1326.271,1363.022"/>
            <polygon fill="#545454" points="1129.941,1319.271 1119.182,1319.271 1075.43,1363.022 1086.189,1363.022"/>
            <polygon fill="#545454" points="824.208,1614.244 834.968,1614.244 879.264,1569.948 868.504,1569.948"/>
            <polygon fill="#545454" points="1322.005,1319.271 1311.244,1319.271 1267.492,1363.022 1278.253,1363.022"/>
            <polygon fill="#545454" points="1016.271,1614.244 1027.033,1614.244 1071.329,1569.948 1060.567,1569.948"/>
            <polygon fill="#545454" points="1249.982,1319.271 1239.222,1319.271 1195.47,1363.022 1206.23,1363.022"/>
            <polygon fill="#545454" points="944.247,1614.244 955.008,1614.244 999.304,1569.948 988.543,1569.948"/>
            <polygon fill="#545454" points="1346.014,1319.271 1335.253,1319.271 1291.501,1363.022 1302.262,1363.022"/>
            <polygon fill="#545454" points="1040.279,1614.244 1051.041,1614.244 1095.337,1569.948 1084.575,1569.948"/>
            <polygon fill="#545454" points="968.255,1614.244 979.016,1614.244 1023.312,1569.948 1012.551,1569.948"/>
            <polygon fill="#545454" points="1273.989,1319.271 1263.229,1319.271 1219.477,1363.022 1230.237,1363.022"/>
            <polygon fill="#545454" points="992.264,1614.244 1003.023,1614.244 1047.319,1569.948 1036.56,1569.948"/>
            <polygon fill="#545454" points="1297.998,1319.271 1287.237,1319.271 1243.485,1363.022 1254.246,1363.022"/>
            <polygon fill="#545454" points="1153.951,1319.271 1143.189,1319.271 1099.438,1363.022 1110.199,1363.022"/>
            <polygon fill="#545454" points="848.216,1614.244 858.978,1614.244 903.273,1569.948 892.512,1569.948"/>
            <polygon fill="#545454" points="822.932,1423.458 822.932,1434.219 866.029,1391.121 866.029,1380.36"/>
            <polygon fill="#545454" points="937.88,1319.271 927.119,1319.271 883.367,1363.022 894.128,1363.022"/>
            <polygon fill="#545454" points="879.104,1319.271 822.932,1375.442 822.932,1386.203 889.864,1319.271"/>
            <polygon fill="#545454" points="870.12,1363.022 913.872,1319.271 903.112,1319.271 822.932,1399.451 822.932,1410.211 866.029,1367.113 866.029,1363.022"/>
            <polygon fill="#545454" points="855.097,1319.271 822.932,1351.436 822.932,1362.195 865.856,1319.271"/>
            <polygon fill="#545454" points="831.087,1319.271 822.932,1327.427 822.932,1338.188 841.849,1319.271"/>
            <polygon fill="#545454" points="1033.912,1319.271 1023.15,1319.271 979.398,1363.022 990.16,1363.022"/>
            <polygon fill="#545454" points="822.932,1519.489 822.932,1530.251 866.029,1487.153 866.029,1476.392"/>
            <polygon fill="#545454" points="822.932,1567.505 822.932,1578.267 866.029,1535.169 866.029,1524.407"/>
            <polygon fill="#545454" points="1081.928,1319.271 1071.166,1319.271 1027.414,1363.022 1038.176,1363.022"/>
            <polygon fill="#545454" points="822.932,1543.497 822.932,1554.258 866.029,1511.16 866.029,1500.399"/>
            <polygon fill="#545454" points="1057.919,1319.271 1047.158,1319.271 1003.406,1363.022 1014.167,1363.022"/>
            <polygon fill="#545454" points="985.896,1319.271 975.135,1319.271 931.383,1363.022 942.144,1363.022"/>
            <polygon fill="#545454" points="822.932,1471.474 822.932,1482.234 866.029,1439.137 866.029,1428.376"/>
            <polygon fill="#545454" points="822.932,1447.466 822.932,1458.227 866.029,1415.129 866.029,1404.368"/>
            <polygon fill="#545454" points="961.888,1319.271 951.127,1319.271 907.375,1363.022 918.136,1363.022"/>
            <polygon fill="#545454" points="822.932,1495.481 822.932,1506.242 866.029,1463.145 866.029,1452.384"/>
            <polygon fill="#545454" points="1009.903,1319.271 999.142,1319.271 955.39,1363.022 966.151,1363.022"/>
            <polygon fill="#545454" points="1201.965,1319.271 1191.205,1319.271 1147.453,1363.022 1158.213,1363.022"/>
            <polygon fill="#545454" points="896.232,1614.244 906.991,1614.244 951.287,1569.948 940.528,1569.948"/>
            <polygon fill="#545454" points="1594.884,1454.525 1594.884,1443.765 1551.372,1487.276 1551.372,1498.037"/>
            <polygon fill="#545454" points="1424.404,1614.244 1435.165,1614.244 1479.461,1569.948 1468.7,1569.948"/>
            <polygon fill="#545454" points="1594.884,1478.535 1594.884,1467.773 1551.372,1511.285 1551.372,1522.047"/>
            <polygon fill="#545454" points="1448.412,1614.244 1459.174,1614.244 1503.47,1569.948 1492.708,1569.948"/>
            <polygon fill="#545454" points="1376.389,1614.244 1387.15,1614.244 1431.446,1569.948 1420.685,1569.948"/>
            <polygon fill="#545454" points="1594.884,1406.511 1594.884,1395.749 1551.372,1439.261 1551.372,1450.022"/>
            <polygon fill="#545454" points="1394.03,1319.271 1383.27,1319.271 1339.518,1363.022 1350.278,1363.022"/>
            <polygon fill="#545454" points="1088.295,1614.244 1099.056,1614.244 1143.352,1569.948 1132.591,1569.948"/>
            <polygon fill="#545454" points="1594.884,1382.504 1594.884,1371.742 1551.372,1415.254 1551.372,1426.016"/>
            <polygon fill="#545454" points="1352.381,1614.244 1363.143,1614.244 1407.438,1569.948 1396.677,1569.948"/>
            <polygon fill="#545454" points="1472.42,1614.244 1483.182,1614.244 1527.478,1569.948 1516.716,1569.948"/>
            <polygon fill="#545454" points="1594.884,1502.541 1594.884,1491.78 1551.372,1535.292 1551.372,1546.053"/>
            <polygon fill="#545454" points="1594.884,1614.244 1594.884,1611.819 1592.459,1614.244"/>
            <polygon fill="#545454" points="1579.212,1614.244 1594.884,1598.572 1594.884,1587.812 1568.451,1614.244"/>
            <polygon fill="#545454" points="1555.203,1614.244 1594.884,1574.564 1594.884,1563.804 1544.443,1614.244"/>
            <polygon fill="#545454" points="1531.195,1614.244 1594.884,1550.557 1594.884,1539.796 1520.436,1614.244"/>
            <polygon fill="#545454" points="1540.725,1569.948 1496.428,1614.244 1507.189,1614.244 1594.884,1526.551 1594.884,1515.789 1551.372,1559.301 1551.372,1569.948"/>
            <polygon fill="#545454" points="1594.884,1430.52 1594.884,1419.758 1551.372,1463.27 1551.372,1474.031"/>
            <polygon fill="#545454" points="1400.396,1614.244 1411.16,1614.244 1455.456,1569.948 1444.692,1569.948"/>
            <polygon fill="#545454" points="1160.318,1614.244 1171.08,1614.244 1215.376,1569.948 1204.614,1569.948"/>
            <polygon fill="#545454" points="1466.053,1319.271 1455.293,1319.271 1411.541,1363.022 1422.301,1363.022"/>
            <polygon fill="#545454" points="1490.062,1319.271 1479.299,1319.271 1435.547,1363.022 1446.31,1363.022"/>
            <polygon fill="#545454" points="1184.326,1614.244 1195.087,1614.244 1239.383,1569.948 1228.622,1569.948"/>
            <polygon fill="#545454" points="1208.335,1614.244 1219.095,1614.244 1263.391,1569.948 1252.631,1569.948"/>
            <polygon fill="#545454" points="1514.067,1319.271 1503.308,1319.271 1459.556,1363.022 1470.315,1363.022"/>
            <polygon fill="#545454" points="1594.884,1358.495 1594.884,1347.733 1551.372,1391.245 1551.372,1402.007"/>
            <polygon fill="#545454" points="1328.373,1614.244 1339.134,1614.244 1383.43,1569.948 1372.669,1569.948"/>
            <polygon fill="#545454" points="1442.045,1319.271 1431.285,1319.271 1387.533,1363.022 1398.293,1363.022"/>
            <polygon fill="#545454" points="1136.312,1614.244 1147.072,1614.244 1191.368,1569.948 1180.607,1569.948"/>
            <polygon fill="#545454" points="1418.037,1319.271 1407.276,1319.271 1363.524,1363.022 1374.285,1363.022"/>
            <polygon fill="#545454" points="1112.303,1614.244 1123.064,1614.244 1167.36,1569.948 1156.599,1569.948"/>
            <polygon fill="#545454" points="1280.357,1614.244 1291.118,1614.244 1335.414,1569.948 1324.653,1569.948"/>
            <polygon fill="#545454" points="1586.093,1319.271 1575.331,1319.271 1531.579,1363.022 1542.341,1363.022"/>
            <polygon fill="#545454" points="1232.343,1614.244 1243.103,1614.244 1287.398,1569.948 1276.639,1569.948"/>
            <polygon fill="#545454" points="1538.077,1319.271 1527.316,1319.271 1483.564,1363.022 1494.325,1363.022"/>
            <polygon fill="#545454" points="1304.364,1614.244 1315.126,1614.244 1359.422,1569.948 1348.66,1569.948"/>
            <polygon fill="#545454" points="1594.884,1334.488 1594.884,1323.726 1551.372,1367.237 1551.372,1378"/>
            <polygon fill="#545454" points="1256.35,1614.244 1267.109,1614.244 1311.405,1569.948 1300.646,1569.948"/>
            <polygon fill="#545454" points="1562.082,1319.271 1551.322,1319.271 1507.57,1363.022 1518.33,1363.022"/>
    
        </g>
    
        <g id="hatch-overlap-2">
    
            <polygon fill="#7A7158" points="1033.912,1319.271 1023.15,1319.271 979.398,1363.022 990.16,1363.022"/>
            <polygon fill="#7A7158" points="1009.903,1319.271 999.142,1319.271 955.39,1363.022 966.151,1363.022"/>
            <polygon fill="#7A7158" points="841.849,1319.271 831.087,1319.271 822.932,1327.427 822.932,1338.188"/>
            <polygon fill="#7A7158" points="1081.928,1319.271 1071.166,1319.271 1027.414,1363.022 1038.176,1363.022"/>
            <polygon fill="#7A7158" points="1105.936,1319.271 1095.174,1319.271 1051.422,1363.022 1062.184,1363.022"/>
            <polygon fill="#7A7158" points="985.896,1319.271 975.135,1319.271 931.383,1363.022 942.144,1363.022"/>
            <polygon fill="#7A7158" points="865.856,1319.271 855.097,1319.271 822.932,1351.436 822.932,1362.195"/>
            <polygon fill="#7A7158" points="961.888,1319.271 951.127,1319.271 907.375,1363.022 918.136,1363.022"/>
            <polygon fill="#7A7158" points="889.864,1319.271 879.104,1319.271 835.352,1363.022 846.112,1363.022"/>
            <polygon fill="#7A7158" points="913.872,1319.271 903.112,1319.271 859.36,1363.022 870.12,1363.022"/>
            <polygon fill="#7A7158" points="937.88,1319.271 927.119,1319.271 883.367,1363.022 894.128,1363.022"/>
            <polygon fill="#7A7158" points="1057.919,1319.271 1047.158,1319.271 1003.406,1363.022 1014.167,1363.022"/>
            <polygon fill="#7A7158" points="1297.998,1319.271 1287.237,1319.271 1243.485,1363.022 1254.246,1363.022"/>
            <polygon fill="#7A7158" points="1322.005,1319.271 1311.244,1319.271 1267.492,1363.022 1278.253,1363.022"/>
            <polygon fill="#7A7158" points="1337.881,1351.412 1337.881,1340.648 1315.507,1363.022 1326.271,1363.022"/>
            <polygon fill="#7A7158" points="1273.989,1319.271 1263.229,1319.271 1219.477,1363.022 1230.237,1363.022"/>
            <polygon fill="#7A7158" points="1337.881,1327.403 1337.881,1319.271 1335.253,1319.271 1291.501,1363.022 1302.262,1363.022"/>
            <polygon fill="#7A7158" points="1129.941,1319.271 1119.182,1319.271 1075.43,1363.022 1086.189,1363.022"/>
            <polygon fill="#7A7158" points="1249.982,1319.271 1239.222,1319.271 1195.47,1363.022 1206.23,1363.022"/>
            <polygon fill="#7A7158" points="1153.951,1319.271 1143.189,1319.271 1099.438,1363.022 1110.199,1363.022"/>
            <polygon fill="#7A7158" points="1177.959,1319.271 1167.198,1319.271 1123.446,1363.022 1134.207,1363.022"/>
            <polygon fill="#7A7158" points="1201.965,1319.271 1191.205,1319.271 1147.453,1363.022 1158.213,1363.022"/>
            <polygon fill="#7A7158" points="1225.973,1319.271 1215.213,1319.271 1171.461,1363.022 1182.221,1363.022"/>
    
        </g>
        
        <rect id="text-rectangle-2" x="866.029" y="1363.022" fill="#FFFFFF" width="685.343" height="206.926"/>
        <g opacity="0.3">
	        <rect x="927.746" y="1495.97" fill="#BCBEC0" width="613.768" height="14.734"/>
	        <rect x="880.533" y="1459.115" fill="#BCBEC0" width="660.98" height="14.735"/>
	        <rect x="996.87" y="1422.262" fill="#BCBEC0" width="544.644" height="14.735"/>
	        <rect x="996.87" y="1532.824" fill="#BCBEC0" width="544.644" height="14.734"/>
	        <rect x="927.746" y="1385.408" fill="#BCBEC0" width="613.768" height="14.735"/>
        </g>
    
    </g>

</svg></div>
            <div class="az-slider-container">
                <div class="az-slider-content az-h-v-bottom az-h-t-left">
                    <div class="az-slider-box az-slider-box-full">
            <h2 class="az-slider-title" data-font-min="11" data-font-max="11" data-font-buffer="50" style="line-height: 96%; letter-spacing: 0px; font-weight: 300;">Calculable Text Padding (<em>vw</em> Based)</h2>
                    </div>
                </div>
            </div>
        </li>
        <li id="padding-slide-2" class="slide " data-skin-slide="slide-light-type" style="background: rgba(0,0,0,0);"><div><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="694.884 740.834 900 900" enable-background="new 694.884 740.834 900 900" xml:space="preserve" style="position: absolute; width: 100%; height: 100%;  top: 0; left: 0; padding: 36px 0; overflow: visible;">

     <g class="grid-view below">
     
        <line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="951.622" y1="740.834" x2="951.622" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1465.985" y1="844.926" x2="1465.985" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="695.056" y1="740.834" x2="695.056" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="823.339" y1="740.834" x2="823.339" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1337.087" y1="740.834" x2="1337.087" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1080.521" y1="740.834" x2="1080.521" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1208.804" y1="740.834" x2="1208.804" y2="1625.815"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="844.926" x2="1594.884" y2="1536.742"/>

			<line fill="none" stroke="#656667" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6" x1="1588.884" y1="1363.083" x2="697.884" y2="1363.083"/>

<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1495.44" x2="694.884" y2="1495.44"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1098.367" x2="694.884" y2="1098.367"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="1594.884" y1="1230.725" x2="694.884" y2="1230.725"/>

		
			

         <g class="dida-text-shift">
<text transform="matrix(1 0 0 1 1372.6445 915.8779)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">8.333&#8201;<tspan fill="#BAA877">%</tspan></text>
<text transform="matrix(1 0 0 1 1499.7344 915.8779)" x="0" y="0" fill="#28282E" font-family="'Poppins'" font-size="18">8.333&#8201;<tspan fill="#BAA877">%</tspan></text>
        </g> 

</g>

<filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="10" dy="15" stdDeviation="15" flood-color="#000" flood-opacity="0.19" />
</filter>
<g class="el-shadow" filter="url(#shadow)">
    <path id="space" fill="#f3f3f3" d="M694.684,1230.634h642.345v88.637H694.684V1230.634z"/>
    <path id="im" fill="#f3f3f3" d="M694.884,740.834h641.467v489.8H694.884V740.834z"/>
</g>
<g>
    <path id="space" fill="#7A7158" d="M694.684,1230.634h642.345v88.637H694.684V1230.634z"/>
    <path id="im" fill="#545457" d="M694.884,740.834h641.467v489.8H694.884V740.834z"/>
</g>


    
    <g id="sit-3" class="sit">

        <g id="hatch-3" opacity="0.5">
    
            <polygon fill="#545454" points="1080.406,1574.117 1080.406,1584.879 1123.975,1541.311 1123.975,1530.549"/>
            <polygon fill="#545454" points="1346.014,1319.271 1335.253,1319.271 1291.501,1363.022 1302.262,1363.022"/>
            <polygon fill="#545454" points="1080.406,1526.102 1080.406,1536.861 1123.975,1493.293 1123.975,1482.533"/>
            <polygon fill="#545454" points="1297.998,1319.271 1287.237,1319.271 1243.485,1363.022 1254.246,1363.022"/>
            <polygon fill="#545454" points="1080.406,1598.124 1080.406,1608.886 1123.975,1565.317 1123.975,1554.556"/>
            <polygon fill="#545454" points="1370.022,1319.271 1359.259,1319.271 1315.507,1363.022 1326.271,1363.022"/>
            <polygon fill="#545454" points="1322.005,1319.271 1311.244,1319.271 1267.492,1363.022 1278.253,1363.022"/>
            <polygon fill="#545454" points="1080.406,1550.108 1080.406,1560.87 1123.975,1517.302 1123.975,1506.54"/>
            <polygon fill="#545454" points="1418.037,1319.271 1407.276,1319.271 1363.524,1363.022 1374.285,1363.022"/>
            <polygon fill="#545454" points="1112.303,1614.244 1123.064,1614.244 1167.36,1569.948 1156.599,1569.948"/>
            <polygon fill="#545454" points="1466.053,1319.271 1455.293,1319.271 1411.541,1363.022 1422.301,1363.022"/>
            <polygon fill="#545454" points="1160.318,1614.244 1171.08,1614.244 1215.376,1569.948 1204.614,1569.948"/>
            <polygon fill="#545454" points="1490.062,1319.271 1479.299,1319.271 1435.547,1363.022 1446.31,1363.022"/>
            <polygon fill="#545454" points="1184.326,1614.244 1195.087,1614.244 1239.383,1569.948 1228.622,1569.948"/>
            <polygon fill="#545454" points="1088.295,1614.244 1099.056,1614.244 1143.352,1569.948 1132.591,1569.948"/>
            <polygon fill="#545454" points="1394.03,1319.271 1383.27,1319.271 1339.518,1363.022 1350.278,1363.022"/>
            <polygon fill="#545454" points="1136.312,1614.244 1147.072,1614.244 1191.368,1569.948 1180.607,1569.948"/>
            <polygon fill="#545454" points="1442.045,1319.271 1431.285,1319.271 1387.533,1363.022 1398.293,1363.022"/>
            <polygon fill="#545454" points="1080.406,1319.271 1080.406,1320.792 1081.928,1319.271"/>
            <polygon fill="#545454" points="1143.189,1319.271 1080.406,1382.054 1080.406,1392.815 1153.951,1319.271"/>
            <polygon fill="#545454" points="1119.182,1319.271 1080.406,1358.046 1080.406,1368.806 1129.941,1319.271"/>
            <polygon fill="#545454" points="1095.174,1319.271 1080.406,1334.038 1080.406,1344.8 1105.936,1319.271"/>
            <polygon fill="#545454" points="1201.965,1319.271 1191.205,1319.271 1147.453,1363.022 1158.213,1363.022"/>
            <polygon fill="#545454" points="1080.406,1430.07 1080.406,1440.829 1123.975,1397.261 1123.975,1386.502"/>
            <polygon fill="#545454" points="1225.973,1319.271 1215.213,1319.271 1171.461,1363.022 1182.221,1363.022"/>
            <polygon fill="#545454" points="1080.406,1454.077 1080.406,1464.837 1123.975,1421.269 1123.975,1410.509"/>
            <polygon fill="#545454" points="1134.207,1363.022 1177.959,1319.271 1167.198,1319.271 1080.406,1406.062 1080.406,1416.824 1123.975,1373.256 1123.975,1363.022"/>
            <polygon fill="#545454" points="1249.982,1319.271 1239.222,1319.271 1195.47,1363.022 1206.23,1363.022"/>
            <polygon fill="#545454" points="1080.406,1478.086 1080.406,1488.847 1123.975,1445.278 1123.975,1434.518"/>
            <polygon fill="#545454" points="1273.989,1319.271 1263.229,1319.271 1219.477,1363.022 1230.237,1363.022"/>
            <polygon fill="#545454" points="1080.406,1502.093 1080.406,1512.854 1123.975,1469.285 1123.975,1458.524"/>
            <polygon fill="#545454" points="1540.725,1569.948 1496.428,1614.244 1507.189,1614.244 1594.884,1526.551 1594.884,1515.789 1551.372,1559.301 1551.372,1569.948"/>
            <polygon fill="#545454" points="1472.42,1614.244 1483.182,1614.244 1527.478,1569.948 1516.716,1569.948"/>
            <polygon fill="#545454" points="1594.884,1502.541 1594.884,1491.78 1551.372,1535.292 1551.372,1546.053"/>
            <polygon fill="#545454" points="1594.884,1454.525 1594.884,1443.765 1551.372,1487.276 1551.372,1498.037"/>
            <polygon fill="#545454" points="1424.404,1614.244 1435.165,1614.244 1479.461,1569.948 1468.7,1569.948"/>
            <polygon fill="#545454" points="1531.195,1614.244 1594.884,1550.557 1594.884,1539.796 1520.436,1614.244"/>
            <polygon fill="#545454" points="1594.884,1478.535 1594.884,1467.773 1551.372,1511.285 1551.372,1522.047"/>
            <polygon fill="#545454" points="1448.412,1614.244 1459.174,1614.244 1503.47,1569.948 1492.708,1569.948"/>
            <polygon fill="#545454" points="1594.884,1614.244 1594.884,1611.819 1592.459,1614.244"/>
            <polygon fill="#545454" points="1579.212,1614.244 1594.884,1598.572 1594.884,1587.812 1568.451,1614.244"/>
            <polygon fill="#545454" points="1555.203,1614.244 1594.884,1574.564 1594.884,1563.804 1544.443,1614.244"/>
            <polygon fill="#545454" points="1594.884,1406.511 1594.884,1395.749 1551.372,1439.261 1551.372,1450.022"/>
            <polygon fill="#545454" points="1376.389,1614.244 1387.15,1614.244 1431.446,1569.948 1420.685,1569.948"/>
            <polygon fill="#545454" points="1256.35,1614.244 1267.109,1614.244 1311.405,1569.948 1300.646,1569.948"/>
            <polygon fill="#545454" points="1562.082,1319.271 1551.322,1319.271 1507.57,1363.022 1518.33,1363.022"/>
            <polygon fill="#545454" points="1586.093,1319.271 1575.331,1319.271 1531.579,1363.022 1542.341,1363.022"/>
            <polygon fill="#545454" points="1280.357,1614.244 1291.118,1614.244 1335.414,1569.948 1324.653,1569.948"/>
            <polygon fill="#545454" points="1538.077,1319.271 1527.316,1319.271 1483.564,1363.022 1494.325,1363.022"/>
            <polygon fill="#545454" points="1232.343,1614.244 1243.103,1614.244 1287.398,1569.948 1276.639,1569.948"/>
            <polygon fill="#545454" points="1594.884,1334.488 1594.884,1323.726 1551.372,1367.237 1551.372,1378"/>
            <polygon fill="#545454" points="1304.364,1614.244 1315.126,1614.244 1359.422,1569.948 1348.66,1569.948"/>
            <polygon fill="#545454" points="1594.884,1358.495 1594.884,1347.733 1551.372,1391.245 1551.372,1402.007"/>
            <polygon fill="#545454" points="1328.373,1614.244 1339.134,1614.244 1383.43,1569.948 1372.669,1569.948"/>
            <polygon fill="#545454" points="1594.884,1430.52 1594.884,1419.758 1551.372,1463.27 1551.372,1474.031"/>
            <polygon fill="#545454" points="1400.396,1614.244 1411.16,1614.244 1455.456,1569.948 1444.692,1569.948"/>
            <polygon fill="#545454" points="1208.335,1614.244 1219.095,1614.244 1263.391,1569.948 1252.631,1569.948"/>
            <polygon fill="#545454" points="1514.067,1319.271 1503.308,1319.271 1459.556,1363.022 1470.315,1363.022"/>
            <polygon fill="#545454" points="1594.884,1382.504 1594.884,1371.742 1551.372,1415.254 1551.372,1426.016"/>
            <polygon fill="#545454" points="1352.381,1614.244 1363.143,1614.244 1407.438,1569.948 1396.677,1569.948"/>
    
        </g>

        <rect id="text-rectangle-3" x="1123.975" y="1363.022" display="inline" fill="#FFFFFF" width="427.397" height="206.926"/>
        <g opacity="0.3">
	        <rect x="1208.335" y="1431.919" fill="#BCBEC0" width="336.108" height="11.333"/>
	        <rect x="1267.492" y="1403.573" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1267.492" y="1488.611" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1267.492" y="1546.41" fill="#BCBEC0" width="276.951" height="11.333"/>
	        <rect x="1297.998" y="1516.957" fill="#BCBEC0" width="246.612" height="11.333"/>
	        <rect x="1232.343" y="1375.228" fill="#BCBEC0" width="312.101" height="11.333"/>
	        <rect x="1181.343" y="1460.266" fill="#BCBEC0" width="363.101" height="11.333"/>
        </g>
    
    </g>
    
    <g id="sit-4" class="sit second">
    
        <g id="hatch-4" opacity="0.5">

            <polygon fill="#545454" points="1201.965,1319.271 1191.205,1319.271 1125.559,1384.917 1136.318,1384.917"/>
            <polygon fill="#545454" points="869.643,1640.834 880.401,1640.834 945.734,1575.501 934.976,1575.501"/>
            <polygon fill="#545454" points="1225.973,1319.271 1215.213,1319.271 1149.566,1384.917 1160.326,1384.917"/>
            <polygon fill="#545454" points="893.648,1640.834 904.409,1640.834 969.742,1575.501 958.981,1575.501"/>
            <polygon fill="#545454" points="845.635,1640.834 856.396,1640.834 921.729,1575.501 910.968,1575.501"/>
            <polygon fill="#545454" points="1177.959,1319.271 1167.198,1319.271 1101.552,1384.917 1112.312,1384.917"/>
            <polygon fill="#545454" points="822.932,1591.513 822.932,1602.274 887.417,1537.789 887.417,1527.027"/>
            <polygon fill="#545454" points="1105.936,1319.271 1095.174,1319.271 1029.527,1384.917 1040.289,1384.917"/>
            <polygon fill="#545454" points="822.932,1615.521 822.932,1626.28 887.417,1561.795 887.417,1551.035"/>
            <polygon fill="#545454" points="1129.941,1319.271 1119.182,1319.271 1053.535,1384.917 1064.295,1384.917"/>
            <polygon fill="#545454" points="1249.982,1319.271 1239.222,1319.271 1173.575,1384.917 1184.336,1384.917"/>
            <polygon fill="#545454" points="917.657,1640.834 928.418,1640.834 993.751,1575.501 982.99,1575.501"/>
            <polygon fill="#545454" points="1013.689,1640.834 1024.451,1640.834 1089.784,1575.501 1079.022,1575.501"/>
            <polygon fill="#545454" points="1346.014,1319.271 1335.253,1319.271 1269.606,1384.917 1280.367,1384.917"/>
            <polygon fill="#545454" points="1322.005,1319.271 1311.244,1319.271 1245.598,1384.917 1256.359,1384.917"/>
            <polygon fill="#545454" points="989.682,1640.834 1000.443,1640.834 1065.775,1575.501 1055.015,1575.501"/>
            <polygon fill="#545454" points="822.932,1567.505 822.932,1578.267 887.417,1513.781 887.417,1503.02"/>
            <polygon fill="#545454" points="1081.928,1319.271 1071.166,1319.271 1005.52,1384.917 1016.281,1384.917"/>
            <polygon fill="#545454" points="941.665,1640.834 952.426,1640.834 1017.759,1575.501 1006.998,1575.501"/>
            <polygon fill="#545454" points="1273.989,1319.271 1263.229,1319.271 1197.582,1384.917 1208.343,1384.917"/>
            <polygon fill="#545454" points="1297.998,1319.271 1287.237,1319.271 1221.591,1384.917 1232.352,1384.917"/>
            <polygon fill="#545454" points="965.674,1640.834 976.434,1640.834 1041.767,1575.501 1031.007,1575.501"/>
            <polygon fill="#545454" points="903.112,1319.271 822.932,1399.451 822.932,1410.211 913.872,1319.271"/>
            <polygon fill="#545454" points="1037.697,1640.834 1048.458,1640.834 1113.791,1575.501 1103.029,1575.501"/>
            <polygon fill="#545454" points="1370.022,1319.271 1359.259,1319.271 1293.613,1384.917 1304.376,1384.917"/>
            <polygon fill="#545454" points="879.104,1319.271 822.932,1375.442 822.932,1386.203 889.864,1319.271"/>
            <polygon fill="#545454" points="855.097,1319.271 822.932,1351.436 822.932,1362.195 865.856,1319.271"/>
            <polygon fill="#545454" points="1153.951,1319.271 1143.189,1319.271 1077.543,1384.917 1088.305,1384.917"/>
            <polygon fill="#545454" points="887.417,1575.043 822.932,1639.528 822.932,1640.834 832.388,1640.834 897.721,1575.501 887.417,1575.501"/>
            <polygon fill="#545454" points="831.087,1319.271 822.932,1327.427 822.932,1338.188 841.849,1319.271"/>
            <polygon fill="#545454" points="1057.919,1319.271 1047.158,1319.271 981.512,1384.917 992.272,1384.917"/>
            <polygon fill="#545454" points="822.932,1543.497 822.932,1554.258 887.417,1489.772 887.417,1479.012"/>
            <polygon fill="#545454" points="1033.912,1319.271 1023.15,1319.271 957.504,1384.917 968.266,1384.917"/>
            <polygon fill="#545454" points="822.932,1519.489 822.932,1530.251 887.417,1465.766 887.417,1455.004"/>
            <polygon fill="#545454" points="927.119,1319.271 822.932,1423.458 822.932,1434.219 937.88,1319.271"/>
            <polygon fill="#545454" points="822.932,1495.481 822.932,1506.242 887.417,1441.757 887.417,1430.996"/>
            <polygon fill="#545454" points="1009.903,1319.271 999.142,1319.271 933.495,1384.917 944.257,1384.917"/>
            <polygon fill="#545454" points="896.241,1384.917 961.888,1319.271 951.127,1319.271 822.932,1447.466 822.932,1458.227 887.417,1393.741 887.417,1384.917"/>
            <polygon fill="#545454" points="822.932,1471.474 822.932,1482.234 887.417,1417.749 887.417,1406.988"/>
            <polygon fill="#545454" points="985.896,1319.271 975.135,1319.271 909.488,1384.917 920.249,1384.917"/>
            <polygon fill="#545454" points="1421.822,1640.834 1432.584,1640.834 1497.917,1575.501 1487.155,1575.501"/>
            <polygon fill="#545454" points="1594.884,1478.535 1594.884,1467.773 1529.667,1532.99 1529.667,1543.752"/>
            <polygon fill="#545454" points="1445.83,1640.834 1456.592,1640.834 1521.924,1575.501 1511.163,1575.501"/>
            <polygon fill="#545454" points="1594.884,1502.541 1594.884,1491.78 1529.667,1556.997 1529.667,1567.758"/>
            <polygon fill="#545454" points="1397.814,1640.834 1408.575,1640.834 1473.908,1575.501 1463.147,1575.501"/>
            <polygon fill="#545454" points="1594.884,1454.525 1594.884,1443.765 1529.667,1508.981 1529.667,1519.742"/>
            <polygon fill="#545454" points="1594.884,1430.52 1594.884,1419.758 1529.667,1484.975 1529.667,1495.736"/>
            <polygon fill="#545454" points="1373.807,1640.834 1384.57,1640.834 1449.903,1575.501 1439.14,1575.501"/>
            <polygon fill="#545454" points="1349.799,1640.834 1360.561,1640.834 1425.894,1575.501 1415.132,1575.501"/>
            <polygon fill="#545454" points="1594.884,1406.511 1594.884,1395.749 1529.667,1460.966 1529.667,1471.728"/>
            <polygon fill="#545454" points="1480.6,1640.834 1594.884,1526.551 1594.884,1515.789 1469.838,1640.834"/>
            <polygon fill="#545454" points="1528.613,1640.834 1594.884,1574.564 1594.884,1563.804 1517.854,1640.834"/>
            <polygon fill="#545454" points="1576.63,1640.834 1594.884,1622.58 1594.884,1611.819 1565.869,1640.834"/>
            <polygon fill="#545454" points="1061.705,1640.834 1072.466,1640.834 1137.799,1575.501 1127.038,1575.501"/>
            <polygon fill="#545454" points="1394.03,1319.271 1383.27,1319.271 1317.623,1384.917 1328.384,1384.917"/>
            <polygon fill="#545454" points="1552.622,1640.834 1594.884,1598.572 1594.884,1587.812 1541.861,1640.834"/>
            <polygon fill="#545454" points="1504.605,1640.834 1594.884,1550.557 1594.884,1539.796 1493.846,1640.834"/>
            <polygon fill="#545454" points="1325.791,1640.834 1336.553,1640.834 1401.886,1575.501 1391.124,1575.501"/>
            <polygon fill="#545454" points="1594.884,1382.504 1594.884,1371.742 1529.667,1436.959 1529.667,1447.721"/>
            <polygon fill="#545454" points="1594.884,1640.834 1594.884,1635.828 1589.879,1640.834"/>
            <polygon fill="#545454" points="1181.745,1640.834 1192.505,1640.834 1257.838,1575.501 1247.078,1575.501"/>
            <polygon fill="#545454" points="1514.067,1319.271 1503.308,1319.271 1437.661,1384.917 1448.421,1384.917"/>
            <polygon fill="#545454" points="1466.053,1319.271 1455.293,1319.271 1389.646,1384.917 1400.406,1384.917"/>
            <polygon fill="#545454" points="1133.729,1640.834 1144.49,1640.834 1209.823,1575.501 1199.062,1575.501"/>
            <polygon fill="#545454" points="1157.736,1640.834 1168.497,1640.834 1233.83,1575.501 1223.069,1575.501"/>
            <polygon fill="#545454" points="1490.062,1319.271 1479.299,1319.271 1413.652,1384.917 1424.415,1384.917"/>
            <polygon fill="#545454" points="1418.037,1319.271 1407.276,1319.271 1341.63,1384.917 1352.391,1384.917"/>
            <polygon fill="#545454" points="1085.713,1640.834 1096.475,1640.834 1161.808,1575.501 1151.046,1575.501"/>
            <polygon fill="#545454" points="1301.782,1640.834 1312.544,1640.834 1377.877,1575.501 1367.115,1575.501"/>
            <polygon fill="#545454" points="1594.884,1358.495 1594.884,1347.733 1529.667,1412.95 1529.667,1423.712"/>
            <polygon fill="#545454" points="1442.045,1319.271 1431.285,1319.271 1365.639,1384.917 1376.398,1384.917"/>
            <polygon fill="#545454" points="1109.722,1640.834 1120.482,1640.834 1185.815,1575.501 1175.055,1575.501"/>
            <polygon fill="#545454" points="1277.774,1640.834 1288.536,1640.834 1353.869,1575.501 1343.107,1575.501"/>
            <polygon fill="#545454" points="1594.884,1334.488 1594.884,1323.726 1529.667,1388.942 1529.667,1399.705"/>
            <polygon fill="#545454" points="1586.093,1319.271 1575.331,1319.271 1509.685,1384.917 1520.446,1384.917"/>
            <polygon fill="#545454" points="1253.768,1640.834 1264.528,1640.834 1329.861,1575.501 1319.101,1575.501"/>
            <polygon fill="#545454" points="1229.76,1640.834 1240.52,1640.834 1305.853,1575.501 1295.093,1575.501"/>
            <polygon fill="#545454" points="1562.082,1319.271 1551.322,1319.271 1485.676,1384.917 1496.436,1384.917"/>
            <polygon fill="#545454" points="1205.753,1640.834 1216.513,1640.834 1281.846,1575.501 1271.086,1575.501"/>
            <polygon fill="#545454" points="1538.077,1319.271 1527.316,1319.271 1461.67,1384.917 1472.431,1384.917"/>
            <polygon fill="#FFFFFF" points="1529.667,1575.501 1529.667,1567.758 1521.924,1575.501"/>
            <polygon fill="#FFFFFF" points="887.417,1384.917 887.417,1393.741 896.241,1384.917"/>
        
        </g>

	<rect id="text-rectangle-4" x="887.417" y="1384.917" fill="#FFFFFF" width="641.07" height="190.584"/>
        <g opacity="0.3">
	        <rect x="946.379" y="1509.692" fill="#BCBEC0" width="569.927" height="14.734"/>
	        <rect x="902.538" y="1472.838" fill="#BCBEC0" width="613.768" height="14.735"/>
	        <rect x="1010.565" y="1435.984" fill="#BCBEC0" width="505.74" height="14.735"/>
	        <rect x="1010.565" y="1546.547" fill="#BCBEC0" width="505.74" height="14.734"/>
	        <rect x="946.379" y="1399.131" fill="#BCBEC0" width="569.927" height="14.735"/>
        </g>
    
    </g>

</svg></div>
            <div class="az-slider-container">
                <div class="az-slider-content az-h-v-bottom az-h-t-left">
                    <div class="az-slider-box az-slider-box-full">
            <h2 class="az-slider-title" data-font-min="11" data-font-max="11" data-font-buffer="50" style="line-height: 96%; letter-spacing: 0px; font-weight: 300;">Non-Calculable Text Padding (Percentage Based)</h2>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</div><div class="az-content-element-wrapper az-empty-divider" style="height: 15px;"></div></div></div></div></div></div></div><div id="nested-text" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-3 hidden-sm hidden-xs mobile-frame three-five-col az-main-col-content az-module az-col-pos-middle az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-0" data-col-min-height-sm="500" data-col-min-height-xs="400"><div class="az-col-cont"></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInUp" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-4 mobile-frame neg-margin-mobile three-five-col az-main-col-content az-module az-v-space-clm animate-content az-module-bg-color"><div class="az-col az-clm-padding-0" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #f9f9f9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-lightbox inner-padding az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper normal-responsive no-img-shape az-hover-fx-wrapper az-hover-fx-fade-in"><a href="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block-2.svg" class="az-ilightbox az-ilightbox-image" data-skin="light" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="false" data-thumbs="false" data-social="false" data-title="Nested Text Block" data-azlbox="ilightbox[lightbox-045cb5c]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block-2.svg'"><span class="az-hover-fx-overlay-bg az-light-type"><i class="az-icon az-icon-plus2"></i></span><img decoding="async" class="az-img normal-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block.svg" srcset="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block.svg 480w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block.svg 960w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-nested-text-block.svg 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="848.5" height="910" alt="Nested Text Block" /></a>
</div>
</div></div></div></div><div class="single-clms col-md-5 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-90 az-gutter-default no-animate-content hidden-sm hidden-xs"><div class="az-shift-layer" style="margin-left: 45px; margin-top: -30px; "><div class="single-clms col-md-6 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block didascalia az-font-custom az-font-size-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 150%; font-family:Poppins;">
    <p style="text-align: left;"><i class="az-icon az-icon-layout" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Nested Responsive Text Block</p>

</div></div></div></div><div class="single-clms col-md-6 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block didascalia az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-60 no-animate-content hidden-lg hidden-md" style="font-weight: 300; line-height: 150%; font-family:Poppins;">
    <p style="text-align: center;"><i class="az-icon az-icon-layout" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Nested Responsive Text Block</p>

</div></div></div></div></div></div></div><div id="responsiveness" class="az-main-section-content az-module light-detect az-padding-top-0 az-padding-bottom-0 az-section-full-screen no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #f9f9f9;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default"><div data-animation-type="ani-in" data-animation-in="fadeInUp" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-8 special-frame-width mobile az-main-col-content az-module az-col-pos-middle az-v-space-clm align-center animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont">
<div class="az-content-element-wrapper wpb_raw_html az-margin-top-0 az-margin-bottom-0">
    <div class="wpb_wrapper">
        <iframe id="responsive-demo" src="https://www.elementi-design.com/diagrams-web-layout/" frameBorder="0"></iframe>

    </div>
</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script type="text/javascript">
    (function($) {
        $("#responsive-demo").on("load", function() {
	        $(this).contents().find('#az-main').addClass('complete-layout spaces-visible mock-up');
                $("#responsive-demo").height( $("#responsive-demo").contents().find("#small-demo-container").height() / 1.5 );
	    });
     
        $(window)
	    .on('resize orientationchange', function() {
                $("#responsive-demo").height( $("#responsive-demo").contents().find("#small-demo-container").height() / 1.5 );
	    })
    })( jQuery );
	
</script>
    </div>
</div><div class="row row-inner absolute-vert az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-button-wrapper open-tab above az-margin-top-0 az-margin-bottom-30 align-left no-animate-content hidden-sm hidden-xs">
	<a class="az-btn az-btn-icon az-btn-mini az-btn-circle az-btn-custom-colors" href="https://www.elementi-design.com/diagrams-web-layout/?display=complete-layout&#038;view=spaces-visible&#038;controls=controls-true" title="Open in an extra browser tab" target="_blank" data-btn-bg="#ffffff" data-btn-text="#141618" style="background: #ffffff; color: #141618;"><i class="az-icon az-icon-stack"></i></a>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block didascalia az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: left;">Mobile 1 Column Layout</p>

</div></div></div></div></div><div class="az-content-element-wrapper az-divider-wrapper"><span class="az-divider az-d-solid az-d-center az-margin-top-60 az-margin-bottom-30 az-divider-simple no-animate-content hidden-lg hidden-md" style="width: 70%; border-top-width: 1px;"></span></div></div></div></div><div class="single-clms col-md-4 col-md-pull-1 az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-60" ><div class="az-col-cont">
<div data-font-min="18.5" data-font-max="18.5" data-font-buffer="77" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; letter-spacing: 0.5px; line-height: 159%; font-family:Playfair Display;">
    <p style="text-align: center;"><em>At the end of the day “mobile first” is only half of the truth. If you want to build big webpages that deal with image material you need to calculate in that someone may want to enjoy them on an extra large desktop device. Today, image-oriented websites create story layouts with incredible scroll length. They put their prestigious photographic material on webpages that vertically grow in eternity while keeping creative picture arrangements. Build your websites for mobile, but if it comes to desktop: Think big or maybe better, think long!</em></p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30px;"></div></div></div></div></div></div></div><div id="result" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-divider no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-50 az-gutter-0 no-animate-content hidden-sm hidden-xs"><div class="single-clms col-md-12 col-md-push-8 az-main-col-content az-module az-v-space-clm align-right no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 3vw;"></div></div></div></div></div><div class="row row-inner az-padding-top-60 az-padding-bottom-60 az-gutter-0 no-animate-content"><div class="single-clms col-md-2 col-md-push-8 az-main-col-content az-module az-v-space-clm align-right no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30px;"></div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">Conclusion.</h5>

</div></div></div></div><div class="single-clms col-md-8 flex-padding az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-50" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: center;">CSS3 has great ways to finally build layouts in which images, text parts and most of all white space communicate with each other as they did in the great magazine layouts of the masters of the métier in the past. In order to create pages that expand fluidly in both width and length through a reliably tied layout and break down to mobile design in a simple straight forward way.</p>

</div></div></div></div></div><div class="az-content-element-wrapper az-empty-divider" style="height: 3vw;"></div><div class="az-content-element-wrapper az-divider-wrapper"><span class="az-divider light-border az-d-solid az-d-center az-margin-top-0 az-margin-bottom-80 az-divider-simple no-animate-content" style="width: 70%; border-top-width: 1px;"></span></div><div class="row row-inner az-padding-top-75 az-padding-bottom-75 az-gutter-default no-animate-content hidden-lg"><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="600" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-air"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Fluid</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="750" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-content-right"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Vertically Scalable</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-grid-2"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Calculable</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1050" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-document"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Easily Responsive</h3></div></div>
</div>
</div></div></div></div><div class="row row-inner az-padding-top-75 az-padding-bottom-75 az-gutter-default no-animate-content hidden-md hidden-sm hidden-xs"><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="600" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-air"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Fluid</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="750" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-content-right"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Vertically Scalable</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-grid-2"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Calculable</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1050" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-document"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Easily Responsive</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-70 az-padding-bottom-70 az-section-default az-section-divider no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <h3>Related Articles</h3>

</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-90 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-isotope-filter="false" class="az-content-element-wrapper az-module-grid-wrapper az-related-post-shortcode az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="related-post-04679e2" class="az-module-grid az-module-container az-isotope-container az-isotope-general" data-animation-fx="yes" data-animation-in="fadeInRight" data-animation-speed="default" data-animation-delay="300" data-offset-down="85" data-cols="3" data-def-col="3" data-lg-col="3" data-md-col="3" data-sm-col="2" data-xs-col="1">
            <div class="grid-sizer"></div>
            <div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/trifolio-magic-the-making-of/" title="Trifolio Magic — The Making Of"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136-480x361.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136-960x722.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="1136" alt="Trifolio Magic — The Making Of" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/trifolio-magic-the-making-of/" title="Trifolio Magic — The Making Of">Trifolio Magic — The Making Of</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/culture/" title="Culture">Culture</a>, <a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/" title="The Passion of Being a Typeface Designer"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848.png" srcset="https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848-480x432.png 480w, https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848-960x863.png 960w, https://www.elementi-design.com/wp-content/uploads/2020/02/title-passion-typeface-designer-1500x848.png 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="848" alt="The Passion of Being a Typeface Designer" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/" title="The Passion of Being a Typeface Designer">The Passion of Being a Typeface Designer</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/design/" title="Design">Design</a>, <a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a>, <a href="https://www.elementi-design.com/category/typo-arts/" title="Typo Arts">Typo Arts</a></span></div></div></div>
        </div>
    </div>
</div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://www.elementi-design.com/web-layout-from-1950-to-2020/">(Web) Layout From 1950 to 2020</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.elementi-design.com/web-layout-from-1950-to-2020/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>The Passion of Being a Typeface Designer</title>
		<link>https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/</link>
					<comments>https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/#comments</comments>
		
		<dc:creator><![CDATA[Stefan Seifert]]></dc:creator>
		<pubDate>Mon, 24 Feb 2020 15:09:28 +0000</pubDate>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Typo Arts]]></category>
		<category><![CDATA[Personal]]></category>
		<guid isPermaLink="false">https://www.elementi-design.com/?p=8617</guid>

					<description><![CDATA[<p>In the early beginnings of the art of printing with movable letters around 1500 the figure of the creator of a typeface and the one of the printer is identical. Meaning, that before starting to print a book and thus doing some kind of graphic design or layout work he had to produce a typeface on his own. The very first one who did this (speaking always of Roman typefaces, the ones we are used to read in Western hemisphere) was a frenchman called Nicolas Jenson.</p>
<p>Der Beitrag <a href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/">The Passion of Being a Typeface Designer</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="flag" class="az-main-section-content az-module az-padding-top-75 az-padding-bottom-15 az-section-default az-section-with-equal no-animate-content hidden-sm hidden-xs az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div data-animation-type="ani-in" data-animation-in="fadeInUp" data-animation-out="none" data-animation-speed="default" data-animation-delay="1500" data-offset-down="85" data-offset-up="none" class="single-clms col-md-6 az-main-col-content az-module az-col-pos-middle az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont"></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1500" data-animation-delay="900" data-offset-down="85" data-offset-up="none" class="single-clms col-md-6 col-lg-pull-0 az-main-col-content az-module az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1500" data-offset-down="85" data-offset-up="none" class="az-content-element-wrapper az-text-block dida-photos photo-note az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 animate-content" style="font-weight: 300; line-height: 175%; color: #556270; font-family:Poppins;">
    <p style="text-align: left;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><em>Urbino</em> Typeface on <a href="https://www.stefanseifert.com/urbino-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a> (detail)</p>

</div></div></div></div></div></div></div><div id="intro" class="az-main-section-content az-module az-padding-top-75 az-padding-bottom-75 az-section-full-screen az-section-with-equal no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-default az-equal"><div data-animation-type="ani-in" data-animation-in="fadeInUpBig" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="85" data-offset-up="none" class="multi-clms col-md-5 col-lg-6 az-main-col-content az-module az-col-pos-middle az-v-space-clm animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30vw;"></div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top-0 az-margin-bottom-0">
    <div class="wpb_wrapper">
        <div id="givenchy-urbino">
    <img decoding="async" class="small-res"   src="https://www.elementi-design.com/wp-content/uploads/2020/02/w-givenchy-urbino.png" alt="Givenchy in Urbino Typeface"/>
    <img decoding="async" class="medium-res"  src="https://www.elementi-design.com/wp-content/uploads/2020/02/w-givenchy-urbino-medium-res.png" alt="Givenchy in Urbino Typeface"/>
    <img decoding="async" class="high-res"    src="https://www.elementi-design.com/wp-content/uploads/2020/02/w-givenchy-urbino-high-res.png" alt="Givenchy in Urbino Typeface"/>
</div>
    </div>
</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 50vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 1.5vw;"></div></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1500" data-animation-delay="600" data-offset-down="85" data-offset-up="none" class="single-clms col-md-7 col-lg-5 col-lg-pull-0 az-main-col-content az-module az-col-pos-middle animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15px;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-photos photo-note az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-lg hidden-md" style="font-weight: 300; line-height: 175%; color: #556270; font-family:Poppins;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Urbino Typeface on <a href="https://www.stefanseifert.com/urbino-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a> (detail)</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md hidden-xs" style="height: 6vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md hidden-sm" style="height: 70px;"></div>
<div data-font-min="35" data-font-max="54" data-font-buffer="15" data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="85" data-offset-up="none" class="az-content-element-wrapper az-text-block indent-right text-shadow-neg js-margin az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 animate-content" style="font-weight: 100; line-height: 140%; color: #000000; font-family:Playfair Display;">
    <h1 style="text-align: right;">The Passion of Being <br class="flex-break-2" />a <em>Typeface Designer</em>.</h1>

</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
(function($) {

$(document).ready( function() {	

var $jsMargin = $( '.js-margin' );

calcTopMargin = function() {
    var heightCont = $jsMargin.height();

    if ( $(window).width() > 991 ) {
        var marginDif = 150 - heightCont;
    } else {
        var marginDif = 0;
    }
    $jsMargin.css('margin-top', + marginDif );
};

calcTopMargin();
$(window).on( 'resize', function() {   // use debouncedresize if you wish
    calcTopMargin();
} );



} );

})( jQuery );
</script>
    </div>
</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 4.5vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 9vh;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15px;"></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content hidden-sm hidden-xs"><div class="single-clms col-md-7 col-lg-push-5 col-md-push-4 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="14" data-font-max="18" data-font-buffer="90" data-animation-type="ani-in" data-animation-in="fadeInLeft" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="85" data-offset-up="none" class="az-content-element-wrapper az-text-block text-shadow az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 animate-content" style="font-weight: 300; letter-spacing: 0.5px; line-height: 157%; color: rgba(255,255,255,0.75); font-family:Playfair Display;">
    <p style="text-align: left;"><em>Graphic design &amp; typeface design – two Métiers closely linked and inspiring each other. <br class="flex-break" />A (not so) personal story.</em></p>

</div></div></div></div></div>
<div data-font-min="16" data-font-max="16" data-font-buffer="50" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content hidden-lg hidden-md" style="font-weight: 300; letter-spacing: 0.5px; line-height: 160%; font-family:Playfair Display;">
    <p style="text-align: left;"><em>Graphic design &amp; typeface design – two Métiers closely linked and inspiring each other. A (not so) personal story.</em></p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 2px;"></div></div></div></div></div></div><a href="#history" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 30px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 45px;"></div></div></div></div></div></div></div><div id="history" class="az-main-section-content az-module medium-padding az-padding-top-125 az-padding-bottom-125 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-col-pos-bottom az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"></div></div></div><div class="multi-clms col-md-6 col-lg-5 no-mobile-top az-main-col-content az-module az-col-pos-top no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 no-animate-content">
    <h5 style="text-align: left;">A LITTLE BIT OF HISTORY.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: right;">In the early beginnings of the art of printing with movable letters around 1500 the figure of the creator of a typeface and the one of the printer is identical. Meaning, that before starting to print a book and thus doing some kind of graphic design or layout work he had to produce a typeface on his own. The very first one who did this (speaking always of Roman typefaces, the ones we are used to read in Western hemisphere) was a frenchman called Nicolas Jenson.</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 52px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 26px;"></div></div></div></div><div class="multi-clms col-md-6 col-lg-5 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 26px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 52px;"></div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: left;">By the way, it may sound curious, but typefaces of today haven’t moved so far away from what we see in his books. However, to open a discussion here of what oncoming generations did to replicate his mother version of a Roman typeface and how the story continued would by far go beyond the intention of this post. Let’s just state: yes, this early printer and hence kind of a “layouter” and therefor forefather of graphic design’s chief domain, was a type designer. Not only, he was one of the greatest.</p>

</div></div></div></div><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div><a href="#fashion-typeface-creations" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div class="az-main-section-content az-module neg-margin az-padding-top-0 az-padding-bottom-0 az-section-default az-section-divider no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 31px;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-photos photo-note az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content hidden-sm hidden-xs" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: left;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Fashion Typeface Creations by Stefan Seifert</p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-photos photo-note az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content hidden-lg hidden-md" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Fashion Typeface Creations by Stefan Seifert</p>

</div></div></div></div></div></div></div><div id="fashion-typeface-creations" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-divider no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-media-gallery-wrapper az-margin-top-0 az-margin-bottom-0 hidden-md hidden-sm hidden-xs">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="media-04704ab" class="az-media-gallery az-module-container az-isotope-container az-isotope-metro" data-animation-fx="yes" data-animation-in="flipInY" data-animation-speed="default" data-animation-delay="300" data-offset-down="85">
            
            <div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w7 az-grid-metro-h5" data-referance-name="sauvage-reflection"><a href="https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[gallery_9073]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-60x60.png'" data-title="Sauvage Reflection Lettering"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-4380x3300.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3000" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/reflection-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w5 az-grid-metro-h5" data-referance-name="memoir-cartier"><a href="https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[gallery_9073]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-60x60.png'" data-title="Cartier in Memoir Typeface" data-caption=""><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-2880x2880.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-light-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3300" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/memoir-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div>
        </div>
    </div>
</div>
<div class="az-content-element-wrapper az-media-gallery-wrapper az-margin-top-0 az-margin-bottom-0 hidden-lg hidden-sm">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="media-047195d" class="az-media-gallery az-module-container az-isotope-container az-isotope-metro" data-animation-fx="yes" data-animation-in="fadeInUp" data-animation-speed="default" data-animation-delay="300" data-offset-down="85">
            
            <div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="miss-dior"><a href="https://www.elementi-design.com/wp-content/uploads/2020/03/Miss-Dior-quadr.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/03/Miss-Dior-quadr-60x60.png'" data-title="Miss Dior Reflection Typeface" data-caption=""><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/03/Miss-Dior-quadr-5500x5500.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-light-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3000" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/#dior-typefaces-1" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="sauvage-reflection"><a href="https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-60x60.png'" data-title="Sauvage Reflection Lettering"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-4380x3300.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3300" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/reflection-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="memoir-cartier"><a href="https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-60x60.png'" data-title="Cartier in Memoir Typeface" data-caption=""><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-2880x2880.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-light-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3600" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/memoir-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div>
        </div>
    </div>
</div>
<div class="az-content-element-wrapper az-media-gallery-wrapper az-margin-top-0 az-margin-bottom-0 hidden-lg hidden-md hidden-xs">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="media-0472bc8" class="az-media-gallery az-module-container az-isotope-container az-isotope-metro" data-animation-fx="yes" data-animation-in="fadeInUp" data-animation-speed="default" data-animation-delay="300" data-offset-down="85">
            
            <div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="sauvage-reflection"><a href="https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-60x60.png'" data-title="Sauvage Reflection Lettering"><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/03/Sauvage-2-4380x3300.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-dark-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3000" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/reflection-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h8" data-referance-name="supremextra-3"><a href="https://www.elementi-design.com/wp-content/uploads/2020/02/supremextra-3.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/02/supremextra-3-60x60.png'" data-title="Supremextra Number 3" data-caption=""><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/supremextra-3-2400x1560.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-light-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3300" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/supremextra-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div><div class="az-media-gallery-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-zoom-in az-grid-metro-w4 az-grid-metro-h4" data-referance-name="memoir-cartier"><a href="https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8.png" class="az-ilightbox" data-skin="dark" data-overlay="0.94" data-direction="horizontal" data-mwheel="true" data-arrows="true" data-thumbs="false" data-social="true" data-azlbox="ilightbox[]" data-options="thumbnail: 'https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-60x60.png'" data-title="Cartier in Memoir Typeface" data-caption=""><span class="az-hover-fx-overlay-bg az-dark-type"><i class="az-icon az-icon-plus2"></i></span><div class="metro-bg-imge az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/memoir-cartier-8-2880x2880.png);"></div></a><div class="gallery-dida az-font-custom az-font-color-custom animate-content fadeIn" data-skin-item="item-light-type" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="1000" data-animation-delay="3600" data-offset-down="85" data-offset-up="none" style="font-weight: 300; line-height: 175%; font-family: Poppins; font-size: 11px;">
					<p><i class="az-icon az-icon-link" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><span class="large-didascalia">More on: </span><a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/memoir-typeface/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>
				</div></div>
        </div>
    </div>
</div></div></div></div></div></div></div></div></div></div><a href="#graphic-design" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div id="graphic-design" class="az-main-section-content az-module az-padding-top-120 az-padding-bottom-85 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-1 hidden-sm hidden-xs pad-right-0 az-main-col-content az-module az-col-pos-bottom align-right no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"></div></div></div><div class="multi-clms col-md-4 col-lg-3 mobile-column-pad az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 19px;"></div>
<div class="az-content-element-wrapper az-single-svg-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
            <svg role="img" aria-labelledby="YSL in “Inspiration” Typeface Initials | “Inspiration” Typeface is an artistic typeface research for Yves Saint Laurent brand." viewBox="0 0 980 1630">
  <title>YSL in “Inspiration” Typeface Initials</title>
  <desc>“Inspiration” Typeface is an artistic typeface research for Yves Saint Laurent brand.</desc>
<path d="M974.8 1629.3v-19.9H697.5c-78.2 6.5-201.8 13.4-281.7 19.9H974.8zM974.8 1609.1v-327.5h-7.3L974.8 1609.1zM0 0v5.3l130.1-5.3C130.1 0 24.3 0 0 0L0 0zM281.7 1429.1c-98.1-29.6-154.4-111.5-159.3-221.3l-20.3-32.8c-2 10.5-3.2 23.9-3.2 33.2 0 129.7 79 199.4 182.4 223.3 22.3 5.3 52.3 10.1 82.7 10.1 19.5 0 45.4-1.6 65.3-4.9l-40.9 166.6v25.9h27.2l43.4-198.2c175.1-37.3 239.1-177.5 239.1-293 0-119.6-57.6-186.4-125.2-237.1l62.8-299.5H627v26.8l-64 265.5C490 837.4 423.5 813 351.4 753.9c-21.1-17.4-45.4-44.2-58.4-81.5l135.8-257.4c27.2-8.9 55.9-15.8 89.2-15.8 141.5 0 192.5 99.7 195 191.3l16.2 20.7c2-3.6 2.4-13.8 2.4-17.4 0-126.9-88-195.8-216.4-195.8 -28.8 0-57.1 4.1-84.3 13L644.8 0h-23.9L429.6 411.4c-86.3 28.8-146.3 101.7-146.3 210.8 0 8.1 1.2 26.3 6.1 47.8l-37.7 64.9 -73.8-554.1c0 0-31.6-127.7-47.8-180.8L232.2 755.1l-53.1 250.9v21.5h21.1l64.9-300.3 25.5-51.1c2.8 13.4 6.5 26.3 10.5 36.1 16.6 39.3 38.9 67.7 86.3 100.9 31.6 23.1 61.2 40.9 87.1 56.3l4.5 2.8c26.8 16.6 54.7 35.3 76.6 52.3L429.2 1435.6C411.4 1438 341.3 1446.9 281.7 1429.1L281.7 1429.1zM670.8 1158.4c0 124-83.1 231.8-211.6 270.3L565.8 933.4C629.8 987.3 670.8 1052.6 670.8 1158.4L670.8 1158.4zM285.3 615.3c0-88.8 55.1-165.4 142.3-200.2L291 666.7C287 649.3 285.3 632.3 285.3 615.3z" fill="#9B9B9A"/></svg>

<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-inline dida-photos photo-note az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: rgb(85, 98, 112); font-family: Poppins; font-size: 11px; bottom: 24px;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="top: 1px; font-size: 13px; position: relative;"></i><a class="az-no-preload az-disable-smooth-scroll" style="display: inline-block; margin-left: 5px; padding-bottom: 4px;" href="http://www.stefanseifert.com/#inspiration-brand-1" target="_blank" rel="noopener noreferrer"><em>YSL</em>&nbsp;Lettering</a></p>

</div>
        </div>
</div>
</div></div></div></div><div class="multi-clms col-md-7 col-lg-6 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-shift-layer az-no-shift-x" style="margin-left: 4.166vw; "><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 no-animate-content">
    <h5 style="text-align: center;">THE SPLIT OFF OF GRAPHIC DESIGN.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: center;">Certainly, to skip the gap between an incunabula book and the outcome of modern graphic design would be worth a Kubrick like film cut between the ape throwing the bone and the resulting spaceships. Since, as often in history what caused the two crafts to separate from each other was the growing complexity of needs in both of them. On the one hand the demand for a production of typefaces on a vaster scale and on the other the more and more differentiating tasks a visual designer has to deal with.</p>

</div></div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 col-lg-push-1 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: center;">Yet, something of this early heritage has remained in the DNA of graphic designers up till today. As we saw David Carson experimenting with melting font families. Time before magazine artists as Alexey Brodovitch invented new typefaces for fashion graphic design. In short, most of my designer colleagues in one way or another have that great respect for the creators of typefaces and more than one of them had felt the appeal of crossing the threshold to this fascinating industry.</p>

</div></div></div></div></div></div></div></div></div></div><a href="#the-heritage" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="the-heritage" class="az-main-section-content az-module overflow-visible az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-0"><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="multi-clms col-md-4 col-lg-3 flex-side-pad az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-20" ><div class="az-shift-layer az-no-shift-y" style="margin-top: 8.333vw; "><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 no-animate-content">
    <h5 style="text-align: left;">THE HERITAGE.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: right;">In my case this was the creation of typefaces that were either re-interpretations of classic characters or the invention of new letter forms that could fit the style of a fashion griffe or be suited for perfume design. In my youth I redrew by hand elegant Caslons or Garamonds, mostly a beautiful italic version which was named <em>Amsterdam</em>. I learned about the generous spacing that those ancient characters had and what gives their letters air to breathe. It was extremely exciting.</p>

</div></div></div></div></div><div class="multi-clms col-md-8 col-lg-7 col-sm-12 col-xs-12 flex-shift az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-shift-layer az-no-shift-x" style="margin-left: 5vw; "><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 60px;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block dida-photos photo-note neg-margin az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="font-weight: 300; line-height: 100%; color: #556270; font-family:Poppins;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><em>Girl</em> Typeface from <a class="az-disable-smooth-scroll" href="https://www.stefanseifert.com/#girl-typeface" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>

</div>
<div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="az-content-element-wrapper az-slider-wrapper black-bg az-margin-top-0 az-margin-bottom-0 animate-content">
	
    <div class="az-slider-page-builder flexslider yes-direction-nav slide-dark-type az-slider-full-width" data-text-pos="az-h-v-center" data-text-align="az-h-t-left" data-skin-mode="static" data-control-nav="false" data-control-nav-design="dots" data-direction-nav="true" data-slide-type="fade" data-slide-css="true" data-slide-easing="linear" data-slide-speed="600" data-slide-loop="true" data-slideshow="true" data-slideshow-speed="7000" data-min-height="240">
        <ul class="slides">
        <li id="" class="slide az-imagesLoadedBg " data-skin-slide="slide-dark-type" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/Bulgari-Girl-typeface-1.png);">
        </li>
        <li id="" class="slide az-imagesLoadedBg black-bg" data-skin-slide="slide-dark-type" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/03/Bulgari-detail.svg);">
        </li>
        </ul>
    </div>
</div></div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 75px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 20px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 50px;"></div></div></div></div></div></div><a href="#precious-raw-material" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="precious-raw-material" class="az-main-section-content az-module medium-padding az-padding-top-55 az-padding-bottom-125 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-col-pos-bottom az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-6 col-lg-5 col-lg-push-5 col-md-push-6 no-mobile-top az-main-col-content az-module az-col-pos-top no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 no-animate-content">
    <h5 style="text-align: left;">TYPEFACES. A PRECIOUS RAW MATERIAL.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: right;">Just as a side note it may be mentioned here that during my university years we went through the painful switch of two typeface production or better pre-printing generations. The first one a well grown and optimized photo typesetting technology with in our hands a vast library of excellent drawn typefaces. The latter digital desktop revolution with a huge potential on the horizon but at that time still very limited in the choice of good fonts ready to use.</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 52px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 26px;"></div></div></div></div><div class="single-clms col-md-6 col-lg-5 col-lg-pull-5 col-md-pull-6 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-sm hidden-xs" style="height: 26px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 52px;"></div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: left;">Such an experience may lead us to dedicate more attention to the precious curves of which consists a beautiful typeface and which makes it differ from a <em>blunt</em> one. As often happens when it comes to beauty it depends on subtle details, slight irregularities and the instinct of a designer. And perhaps here the circle to graphic design closes. As letters can teach us important lessons about proportion, rhythm, harmony and, last but not least, a certain meticulousness.</p>

</div></div></div></div><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div><a href="#girlish-typeface" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="girlish-typeface" class="az-main-section-content az-module less-height az-padding-top-75 az-padding-bottom-75 az-section-full-screen az-section-divider az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-12 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 14px;"></div><div class="az-content-element-wrapper az-empty-divider resp-height-spacer" style="height: 12.7vh;"></div>
<div class="az-content-element-wrapper az-single-svg-image max-height-120 az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
            <svg role="img" aria-labelledby="Lagerfeld Lettering with “Girlish” Typeface | “Girlish” Typeface is an experimental minimalistic Sans Serif typeface research for Karl Lagerfeld brand." viewBox="0 580 2628 512">
  <title>Lagerfeld Lettering with “Girlish” Typeface</title>
  <desc>“Girlish” Typeface is an experimental minimalistic Sans Serif typeface research for Karl Lagerfeld brand.</desc>
<path d="M233.4 916.5H298.1v5.4h-70.4V659.3h5.8V916.5z"/><path d="M580.1 830.6v5.4h-83.6c-22.3 0-40.3 17.9-40.3 40.3s17.9 40.3 40.3 40.3h85V813c0-34.2-27.8-61.9-61.9-61.9s-61.9 27.8-61.9 62h-5.8c0-37.2 30.5-67.7 67.7-67.7 37.2 0 67.7 30.5 67.7 67.7V922h-90.7c-25.4 0-45.7-20.3-45.7-45.7 0-25.4 20.3-45.7 45.7-45.7H580.1z"/><path d="M806.4 916.5h66.3v5.4h-66.3c-25.4 0-45.7-20.3-45.7-45.7v-77.2c0-25.4 20.3-45.7 45.7-45.7h73.5v186.2c0 37.2-30.5 67.7-67.7 67.7 -37.2 0-67.7-30.5-67.7-67.7h5.8c0 34.2 27.8 62 61.9 62 34.2 0 61.9-27.8 61.9-62V758.8h-67.7c-22.3 0-40.3 17.9-40.3 40.3v77.2C766.1 898.6 784 916.5 806.4 916.5z"/><path d="M1165.2 813.3c0-34.2-27.8-62.3-61.9-62.3s-61.9 27.8-61.9 62v49.4c0 34.2 27.8 62 61.9 62s61.9-27.8 61.9-61.9h5.8c0 37.2-30.5 67.7-67.7 67.7 -37.2 0-67.7-30.5-67.7-67.7v-49.4c0-37.2 30.5-67.7 67.7-67.7 37.2 0 67.7 30.8 67.7 68v14.6h-128.3v-5.4h122.5V813.3z"/><path d="M1394.3 751c-34.2 0-61.9 27.8-61.9 62V922h-5.8V813c0-37.2 30.5-67.7 67.7-67.7V751z"/><path d="M1555.8 922h-5.8V718.5c0-25.4 20.3-45.7 45.7-45.7h53.1v5.4h-52.8c-22.3 0-40.3 17.9-40.3 40.3V922zM1557.1 753.4h67.4v5.4h-67.4V753.4z"/><path d="M1897.6 813.3c0-34.2-27.8-62.3-61.9-62.3 -34.2 0-61.9 27.8-61.9 62v49.4c0 34.2 27.8 62 61.9 62 34.2 0 61.9-27.8 61.9-61.9h5.8c0 37.2-30.5 67.7-67.7 67.7 -37.2 0-67.7-30.5-67.7-67.7v-49.4c0-37.2 30.5-67.7 67.7-67.7 37.2 0 67.7 30.8 67.7 68v14.6h-128.3v-5.4h122.5V813.3z"/><path d="M2064.8 916.5h64.7v5.4h-70.4V659.3h5.8V916.5z"/><path d="M2396.1 922h-81.9c-25.4 0-45.7-20.3-45.7-45.7v-77.2c0-25.4 20.3-45.7 45.7-45.7h74.8v5.4h-74.8c-22.3 0-40.3 17.9-40.3 40.3v77.2c0 22.3 17.9 40.3 40.3 40.3h76.2v-257.3h5.8V922z"/></svg>
        </div>
</div>
</div><div class="az-content-element-wrapper az-empty-divider resp-height-spacer" style="height: 12.7vh;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md hidden-sm" style="height: 5vh;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-text-block dida-photos photo-note side-padding az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 animate-content hidden-sm hidden-xs" style="font-weight: 300; line-height: 100%; color: #556270; font-family:Poppins;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><em>Girlish</em> Typeface on <a href="https://www.stefanseifert.com/fendi-experience/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>

</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-text-block dida-photos photo-note side-padding az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 animate-content hidden-lg hidden-md" style="font-weight: 300; line-height: 100%; color: #556270; font-family:Poppins;">
    <p style="text-align: center;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><em>Girlish</em> Typeface on <a href="https://www.stefanseifert.com/fendi-experience/" target="_blank" rel="noopener noreferrer">www.stefanseifert.com</a></p>

</div></div></div></div></div></div><a href="#marc-lagrange-ravish" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="marc-lagrange-ravish" data-parallax-scroll="true" data-parallax-speed="4" data-parallax-freeze="" class="az-main-section-content az-module dark-detect az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal az-parallax-fx no-animate-content az-module-bg-image">
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg" style="background-image: url(https://www.elementi-design.com/wp-content/uploads/2020/02/character-hommage-marc-lagrange.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
            
            </div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="single-clms col-md-12 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0 az-clm-force-height" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15vh;"></div><div class="az-content-element-wrapper az-empty-divider" style="height: 42vw;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15vh;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-text-block dida-photos photo-note side-padding az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 animate-content hidden-xs" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: left;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><a class="az-no-preload az-disable-smooth-scroll" href="https://www.stefanseifert.com/frames-une-femme-marc-lagrange-inspiration/" target="_blank" rel="noopener noreferrer"><em>Ravish</em></a> Typeface for Marc Lagrange</p>

</div></div></div></div></div></div><a href="#typeface-designer-eye" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #ffffff"></i></a></div><div class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 30px;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" data-animation-type="ani-in" data-animation-in="fadeIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-text-block dida-photos photo-note az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 animate-content hidden-lg hidden-md hidden-sm" style="font-weight: 300; line-height: 100%; color: #556270; font-family:Poppins;">
    <p style="text-align: right;"><i class="glyphicon glyphicon-font" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i><a class="az-no-preload az-disable-smooth-scroll" href="http://www.stefanseifert.com/frames-une-femme-marc-lagrange-inspiration/" target="_blank" rel="noopener noreferrer"><em>Ravish</em></a> Typeface for Marc Lagrange</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-md hidden-xs" style="height: 13px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-md" style="height: 32px;"></div></div></div></div></div></div></div><div id="typeface-designer-eye" class="az-main-section-content az-module medium-padding az-padding-top-125 az-padding-bottom-125 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default az-equal"><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-col-pos-bottom az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont"></div></div></div><div class="multi-clms col-md-6 col-lg-5 no-mobile-top az-main-col-content az-module az-col-pos-top no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 no-animate-content">
    <h5 style="text-align: left;">THE EYE OF THE TYPEFACE DESIGNER.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: right;">In the late nineties when I was introduced to Condé Nast’s (Italy) Franca Sozzani and her provocative art director <a style="color: #28282e;" href="http://www.stefanseifert.com/luca-typeface/" target="_blank" rel="noopener">Luca Stoppini</a> I started to experiment with letter forms and to transform their shapes into a more personal means of expression (of whose results you can see some on this page). But like a pianist who studied classical music and ended up feeling at ease with jazz, I never lost touch with the classical forms canons with which everything began.</p>

</div></div></div></div><div class="multi-clms col-md-6 col-lg-5 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-30" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="color: #556270;">
    <p style="text-align: left;">After all, even if I am doing marketing communication design for a living the fascination of getting to the heart of Roman alphabet never left me. And quite often when my clients ask me what it is what adds this special touch to our results in print and web design I keep my mouth shut. But I could also start a discussion saying something like: “Have you noticed the wonderful little curve that that ‘a’ makes at the bottom of its belly?…”</p>

</div></div></div></div><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-75 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15px;"></div>
	<div data-opened="false" class="az-content-element-wrapper az-accordion-wrapper az-margin-top-0 az-margin-bottom-0 no-animate-content accordion">
	    <div class="section-tab" data-title=spacing><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Spacing</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>One of the crucial and most experience based challenges while designing a typeface is finding the right spaces for each single letter. It is a game of give and take between singular forms that have to be united in a continuous flow without interruptions or excessive narrowing. It trains the designer’s feeling for rhythm and teaches him about the importance of blank space.</p>

</div></div></div> <div class="section-tab" data-title=rhythm><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Rhythm</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Spaces are the backbone of a character’s rhythm. But it’s deeply linked to the rhythm between forms within the letters themselves. Only if a typeface has the correct rhythm within its single parts it may catenate in a perfect line. And even between those lines vertical rhythm of its single parts grants the success of keeping them together to create a harmonious surface. A type designer which has undergone such a training is highly doted to work with text in general. He is able to connect parameters as a text block&#8217;s width with its lines’ length, font weight and font size to determine the success of a page.</p>

</div></div></div> <div class="section-tab" data-title=weight><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Weight</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Such rhythm gives him insights which weight or “color” a text needs to adapt to not irritate the eye in sizes too small or too big. As he knows about the needs bigger typefaces have to get thinner in color and narrower in line contrast to keep elegance. As well as he is trained enough to know that smaller typeface sizes need more weight to not shimmer before the eye or get unreadable.</p>

</div></div></div> <div class="section-tab" data-title=alignment><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Alignment</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Alignment of a typeface means to be aware of the fact that round forms have to grow more below or above an imaginary line that horizontal forms more clearly determine. As a round form looses blackness and in an optical illusions seems to be higher or lower relative to a straight line when looked upon with an eye “out of focus” while slightly closed. A typeface designer painfully learns about these optical effects and automatically will be able to use it more generally in any type of graphic composition.</p>

</div></div></div> <div class="section-tab" data-title=combining><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Combining</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>A typeface designer knows about history. He has to. So with time passing he learns about similarities that letter forms have even skipping between historical periods. He is trained to recognize subtle familiarities between a 1930 newspaper typeface and a classicism style as in french Didot. In most cases a typeface designer will develop an exceptional, yet unconscious feeling which letter forms may match each other in the combination of fonts.</p>

</div></div></div> <div class="section-tab" data-title=taste><h5 class="section-title"><i class="az-icon az-icon-eye"></i>Taste</h5><div class="content">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Last but not least, each undertaking in art that needs to be based on a wide spread historical knowledge likewise an excellent piano player, will develop a certain “taste” which comes from years of experience and respect towards what others did before him. It is mostly accompanied by something that we even might call <em>humility</em>. If a designer succeeds to not succumb such experiences while keeping alive his very own personal spirit then such taste may lead him to greater results in general.</p>

</div></div></div> 
	</div><div class="az-content-element-wrapper az-empty-divider" style="height: 17px;"></div></div></div></div></div></div></div><div id="portrait" class="az-main-section-content az-module dark-detect az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #000000;"></div>
            
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div data-parallax-scroll="true" data-parallax-speed="4" data-parallax-freeze="" class="single-clms col-md-4 az-main-col-content az-module az-col-pos-middle az-v-space-clm align-center az-parallax-fx no-animate-content az-module-bg-image"><div class="az-col az-clm-padding-0 az-clm-force-height" data-col-min-height-default="900" style="min-height: 900px;">
        <div class="az-module-wrap-bg">
            <div  class="az-module-wrapper-bg  az-imagesLoadedBg">
            
            </div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-single-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-img-wrapper full-responsive no-img-shape"><img loading="lazy" decoding="async" class="az-img full-img-responsive" src="https://www.elementi-design.com/wp-content/uploads/2020/02/stefan-seifert-1700.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2020/02/stefan-seifert-1700-480x720.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2020/02/stefan-seifert-1700-960x1441.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2020/02/stefan-seifert-1700.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1700" height="2551" alt="Stefan Seifert · Typeface Designer" />
</div>
</div>
<div data-font-min="10" data-font-max="10" data-font-buffer="50" class="az-content-element-wrapper az-text-block photo-note az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-15 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; color: #ffffff; font-family:Poppins;">
    <p style="text-align: left;">Stefan Seifert by: <a href="http://thomaspritschet.blogspot.de" target="_blank" rel="noopener noreferrer">Thomas Pritschet</a></p>

</div></div></div></div><div class="single-clms col-md-8 az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-bg-color"><div class="az-col az-clm-padding-90" data-col-min-height-default="1000" style="min-height: 1000px;">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #000000;"></div>
            
        </div><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 60px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 56px;"></div>
<div data-font-min="24" data-font-max="34" data-font-buffer="13" class="az-content-element-wrapper az-text-block mobile-center-text super-thin invisible-link az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-0 no-animate-content" style="font-weight: 100; letter-spacing: 3px; line-height: 140%; color: #ffffff; font-family:Lato;">
    <h2><a href="https://www.stefanseifert.com/stefan-seifert-portrait/" target="_blank" rel="noopener noreferrer">Stefan Seifert</a> works as a type designer in parallel to his profession as a marketing communication designer and consultant. His free artistic typeface researches were published in <a href="https://www.elementi-design.com/biotech-automotive-fashion/#fashion-beauty">Vogue Italia</a>.</h2>

</div>
<div class="az-content-element-wrapper az-social-profiles-wrapper az-margin-top-30 az-margin-bottom-0 no-animate-content">
    <ul class="az-social-profiles-list align-right">
        <li><a href="https://www.instagram.com/stefanseiferttypefaces/" target="_blank"><i class="fa fa-instagram" style="color: #ffffff;"></i></a></li><li><a href="https://www.facebook.com/stefan.seifert.1466" target="_blank"><i class="fa fa-facebook-f" style="color: #ffffff;"></i></a></li><li><a href="https://twitter.com/stefanseifert33" target="_blank"><i class="fa fa-twitter" style="color: #ffffff;"></i></a></li><li><a href="https://www.pinterest.de/contact4260/" target="_blank"><i class="fa fa-pinterest-p" style="color: #ffffff;"></i></a></li><li><a href="http://frammenti.stefanseifert.com" target="_blank"><i class="fa fa-glass" style="color: #ffffff;"></i></a></li>
    </ul>
</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-70 az-padding-bottom-70 az-section-default az-section-divider no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <h3>Related Articles</h3>

</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-90 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-isotope-filter="false" class="az-content-element-wrapper az-module-grid-wrapper az-related-post-shortcode az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="related-post-04855e0" class="az-module-grid az-module-container az-isotope-container az-isotope-general" data-animation-fx="yes" data-animation-in="fadeInRight" data-animation-speed="default" data-animation-delay="300" data-offset-down="85" data-cols="3" data-def-col="3" data-lg-col="3" data-md-col="3" data-sm-col="2" data-xs-col="1">
            <div class="grid-sizer"></div>
            <div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/trifolio-magic-the-making-of/" title="Trifolio Magic — The Making Of"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136-480x361.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136-960x722.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2022/09/trifolio-making-of-layers-main-1500x1136.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="1136" alt="Trifolio Magic — The Making Of" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/trifolio-magic-the-making-of/" title="Trifolio Magic — The Making Of">Trifolio Magic — The Making Of</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/culture/" title="Culture">Culture</a>, <a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/web-layout-from-1950-to-2020/" title="(Web) Layout From 1950 to 2020"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268.png" srcset="https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268-480x406.png 480w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268-960x812.png 960w, https://www.elementi-design.com/wp-content/uploads/2021/06/demo-empty-spaces-full-1500x1268.png 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="1268" alt="(Web) Layout From 1950 to 2020" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/web-layout-from-1950-to-2020/" title="(Web) Layout From 1950 to 2020">(Web) Layout From 1950 to 2020</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/graphic-design/" title="Graphic Design">Graphic Design</a></span></div></div></div><div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/italians-do-it-better/" title="Why Italians Do It Better"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img loading="lazy" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250.jpg" srcset="https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250-480x720.jpg 480w, https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250-960x1440.jpg 960w, https://www.elementi-design.com/wp-content/uploads/2019/05/ad-dante-verona-1500x2250.jpg 1280w" sizes="auto, (min-width: 320px) 100vw, 100vw" width="1500" height="2250" alt="Why Italians Do It Better" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/italians-do-it-better/" title="Why Italians Do It Better">Why Italians Do It Better</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/culture/" title="Culture">Culture</a>, <a href="https://www.elementi-design.com/category/design/" title="Design">Design</a></span></div></div></div>
        </div>
    </div>
</div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/">The Passion of Being a Typeface Designer</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.elementi-design.com/the-passion-of-being-a-typeface-designer/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
