davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Bjørn Karmann › Occlusion Grotesque (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://bjoernkarmann.dk/occlusion-grotesque">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Bjørn Karmann › Occlusion Grotesque</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://bjoernkarmann.dk/occlusion-grotesque" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually. The project explores what it means to design with nature and on nature's terms.</p>
<p>Chapter two, Deep Occlusion, explores the typeface as a dataset for an AI to learn how a tree grows and designs shapes over time. </p>
<p>The project challenges how we humans are terraforming and controlling nature to their own desires, which has become problematic to an almost un-reversible state. Here the roles have been flipped, as nature is given agency to lead the process, and the designer is invited to let go of control and have nature take over.  </p>
<p>It all starts with the handover from the designer to the tree by tracing and carving an initial typeface. Conceptually this initial type design refers to the desire for control, a man-made almost mechanical sans-serif typeface in high contrast within the natural environment. The tree is now left untouched for a year, where the natural processes such as occlusion begin. A tree’s occlusion is the process whereby a wound - or in this case carvings - is progressively closed by the formation of new wood and bark.</p>
<p>Returning to the tree reveals an unsupervised transformation that is unique to each letter of the alphabet. The artist now takes on an observant role and meticulously documents the letters with a camera and measurement tools. This is repeated every year with the important detail that the camera settings, lens, distance, and measurements stay consistent at every observation. </p>
<p>The digitalization from the tree to a usable font invites the artist to become the design interpreter. For the most part, the letters can be traced, but occasionally due to unexpected bark behavior, edge cracking, and blurring of boundaries, the artist has to take decisions without diverting from the tree's intent. </p>
<p>One of the beautiful coincidences between the growth of a tree and type design is that growth happens sideways. This was new to me but seems obvious now. Already 3 years in, the letters were clearly showing expansion to the left and right, while the position from the ground had not changed. This is due to the misconception that trees do not grow from the ground up, but rather out from the tips. As new branches reach higher into the sky, the lower trunk grows radially from within. While this happens, the inner- and outer bark stays wrapped around the trunk performing an extraordinary expansion, thus deforming the surface. All while keeping the tree protected.</p>
<p>In typography, as we "grow" the typeface into bolder and heavier weights, we design each letter sideways too. Letters gain more graphical volume left and right while keeping the x-height more or less consistent. A coincidence that makes a tree the perfect candidate to design a typeface. </p>
<p>Nature is never perfect and will never produce two of the same. Another interesting attribute that aligns with an ever-growing need to create unique designs, free from norms and human-biased conventions.</p>
<p>Occlusion Grotesque does not follow the conventual weights, (eg. light, medium, bold) but rather each weight represents a year of growth. Year 0 for example is referred to both the ‘regular’ weight and the beginning of the project in 2015. Year 5 was captured in 2020. For the most dramatic annual changes a younger tree was desired, but since carving in the bark can be painful and potentially kill the tree a resistant sort and age was chosen. </p>
<p>The tree of choice was a Beech, native to the forest of my parents. It was planted by them in 1997 in Ågård, Denmark. At year 0 only a quarter side of the tree was used to carve the letters, maintaining the tree's ability to transport essential nutrients from the leaves to the roots. It is important to note that cutting through the bark of a tree trunk in a complete circle will kill the tree. No trees were harmed in this experiment.</p>
<p>One of the key documentation tools was a laser-cut frame that attaches to the camera. The frame served as the known absolute measurement that is used to reference scale over time. In the frame is a 60mm ruler engraved, indicating every 5mm with a line. Secondly, the tools help with camera distortions. If necessary the square frame at a 3:4 ratio can be aligned back into a pixel-perfect 3:4 square format, correcting any lens distortion made by a given lens. The steel poles ensure a consistent distance from the camera sensor to the tree, again helping with minimizing distortions. </p>
<p>The image above shows an overview of tools used for documenting the letters consistently across multiple years. </p>
<p>a: steel rods (for consistent distent)
b: plexiglass frame w/ ruler
c: waterproof data storage 
d: M4 bolts for assembly
e: canon 5D MkII full-frame camera 
f: tripod</p>
<p>The rigorous camera setup allowed for insight into the growth rate and direction of the tree, since each year was accurately framed a center axis could be triangulated. </p>
<p>The image above shows some of the letters that clearly reveal a sideways growth, and even a curious tendency to grow to the left of the centerline.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>