CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Alex Chavot — graphic & type design studio</title> <meta name="author" content="Alex Chavot"/> <meta name="description" content="Alex Chavot’s personal page"/> <meta name="keywords" content="graphic,design,paris,typography,fonts,graphisme,designer,graphique,typographie"/> <meta name="Resource-type" content="Document" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @font-face { font-family: "Practical Grotesk"; src: url("./fonts/PracticalGroteskVariable.woff2") format("woff2"), url("./fonts/PracticalGroteskVariable.woff") format("woff"), url("./fonts/PracticalGroteskVariable.ttf") format("truetype-variations"); } @font-face { font-family: "Nicephore Heavy"; src: url("./fonts/Nicephore-VF.woff2") format("woff2-variations"), url("./fonts/Nicephore-VF.woff") format("woff-variations"), url("./fonts/Nicephore-VF.ttf") format("truetype-variations"); } </style> <link rel="stylesheet" type="text/css" href="./css/style.css"/> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slider').slick({ dots: false, infinite: true, speed: 500, fade:false, cssEase: 'linear', autoplay:false, arrows:true }); }); </script>  <link rel="icon" href="favicon.png" type="image/png"> <link rel="shortcut icon" href="favicon.png" type="image/png">  <link rel="apple-touch-icon" sizes="180x180" href="favicon.png"> </head> <body>  <div id="logo-mobile"><div class="AC"><a href="#top">AC</a></div></div> <div id="logo"><a href="#top" class="button">Alex Chavot</a></div> <div id="typefaces"><a href="https://apextypefoundry.com" class="button" target="_blank"><span class="label"></span></a></div> <div id="infos"><a href="#informations" class="button">Infos</a></div> <div id="instagram"><a href="https://www.instagram.com/alexchavot/" class="button" target="_blank">Instagram</a></div> <div id="BackToTop"><a href="#top" class="button">Back to top</a></div>  <div id="menu-button" class="close"></div> <nav id="menu"> <ul> <li><a href="https://apextypefoundry.com" target="_blank"><span class="label"></span></a></li> <li><a href="#informations">Infos</a></li> <li><a href="https://www.instagram.com/alexchavot/" target="_blank">Instagram</a></li> </ul> </nav> <div id="wrapper">  <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#rifugio" target="_blank"><img src="images/Typefaces/Rifugio.png" loading="lazy"> <div class="overlay">Discover Rifugio on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Petit-Bain/Delight/PB-Delight-0.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Delight/PB-Delight-1.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/Delight/PB-Delight-2.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Delight/PB-Delight-3.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Delight/PB-Delight-4.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Delight/PB-Delight-5.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Petit Bain – Delight</div> <div id="PBdelight-name"><input onclick="PBdelightButton()" type="button" value="+" id="PBdelightButton" class="PBdelightButton"></input></div> <div id="PBdelight-txt"><hr class="top"> <h3>Client: <a href="https://petitbain.org/" target="blank">Petit Bain</a>&ensp;<span class="grey">|</span>&ensp;Year: 2023&ensp;<span class="grey">|</span>&ensp;identity, poster, social medias</h3><hr class="bottom"> <div class="columns"><h2>Global visual identity designed for the first edition of Festival Delight in Petit Bain, Paris. The concept of Delight was to merge Petit Bain’s two passions: music and gastronomy. This hybrid venue, which combines a concert hall and a restaurant programmed a series of daring and radical live performances and invited Hello Ernest for the cuisine. The visual identity revolves around an ever-changing gradient background, which sets the mood and tone of each evenings, and a crystal tableware-like typographic compisiton.</h2></div> </div> <script>$('#PBdelight-name').click(function(){$('#PBdelight-txt').toggle('1500');});</script> <script>function PBdelightButton(){var elem = document.getElementById("PBdelightButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #PBdelight-name {float:right;} #PBdelight-txt {display:none; clear:both;} .PBdelightButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .PBdelightButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div> </div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#nicephore" target="_blank"><span class="nicephore-animation vf-animation" data-is-observed="true" style="animation-play-state: running;">View from the window at Le Gras, France (1825)</span> <div class="overlay">Discover Nicéphore on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-1.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-2.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-3.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-4.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-5.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-6.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-7.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-8.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-9.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-10.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-11.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-12.png" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-13.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/Anniversaire/PB-Anniversaire-14.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Petit Bain – 10 Piges</div> <div id="PBanniversaire-name"><input onclick="PBanniversaireButton()" type="button" value="+" id="PBanniversaireButton" class="PBanniversaireButton"></input></div> <div id="PBanniversaire-txt"> <hr class="top"><h3>Client: <a href="https://petitbain.org/" target="blank">Petit Bain</a>&ensp;<span class="grey">|</span>&ensp;Year: 2021-2022&ensp;<span class="grey">|</span>&ensp;identity, poster, social medias</h3><hr class="bottom"> <div class="columns"><h2>Global visual identity designed for the 10th anniversary of the concert venue Petit Bain in Paris. The identity is built around a key visual from which the 10 concert events – taking place all year round – are declined.</h2></div></div> <script>$('#PBanniversaire-name').click(function(){$('#PBanniversaire-txt').toggle('1500');});</script> <script>function PBanniversaireButton(){var elem = document.getElementById("PBanniversaireButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #PBanniversaire-name {float:right;} #PBanniversaire-txt {display:none; clear:both;} .PBanniversaireButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .PBanniversaireButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#practical" target="_blank"> <div id="practicalDiv">Gestaltungsprobleme<br>des Grafikers</div> <div class="overlay">Discover Practical on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Nathalie-Olivier/Nathalie-Olivier-Site-1.jpg" loading="lazy"></div> <div><img src="images/Nathalie-Olivier/Nathalie-Olivier-Site-2.jpg" loading="lazy"></div> <div><img src="images/Nathalie-Olivier/Nathalie-Olivier-Site-3.jpg" loading="lazy"></div> <div><img src="images/Nathalie-Olivier/Nathalie-Olivier-Papeterie.jpg" loading="lazy"></div> <div><img src="images/Nathalie-Olivier/Nathalie-Olivier-Cartes.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Nathalie Olivier – Avocat</div> <div id="Nathalie-name"><input onclick="NathalieButton()" type="button" value="+" id="NathalieButton" class="NathalieButton"></input></div> <div id="Nathalie-txt"> <hr class="top"><h3>Client: <a href="http://www.nathalieolivier-avocat.fr/" target="blank">Nathalie Olivier</a>&ensp;<span class="grey">|</span>&ensp;Year: <span class="caps">2022</span>&ensp;<span class="grey">|</span>&ensp;visual identity, website, signage</h3><hr class="bottom"> <div class="columns"><h2>Visual identity and <a href="http://nathalieolivier-avocat.fr/" target="blank">website</a> design for a lawyer in Chambéry, France.</h2></div></div> <script>$('#Nathalie-name').click(function(){$('#Nathalie-txt').toggle('1500');});</script> <script>function NathalieButton(){var elem = document.getElementById("NathalieButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Nathalie-name {float:right;} #Nathalie-txt {display:none; clear:both;} .NathalieButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .NathalieButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#granit" target="_blank"><img src="images/Typefaces/Granit.svg" loading="lazy"> <div class="overlay">Discover Granit on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><video autoplay loop muted playsinline src="images/DOD/DOD-0.mp4" type=video/mp4 poster="images/DOD/DOD-thumbnail.jpg"></video></div> <div><img src="images/DOD/DOD-1.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-2.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-3.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-4.svg" loading="lazy"></div> <div><img src="images/DOD/DOD-5.svg" loading="lazy"></div> <div><img src="images/DOD/DOD-6.svg" loading="lazy"></div> <div><img src="images/DOD/DOD-7.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-8.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-9.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-10.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-11.jpg" loading="lazy"></div> <div><img src="images/DOD/DOD-12.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">DOD Objets</div> <div id="DOD-name"><input onclick="DODButton()" type="button" value="+" id="DODButton" class="DODButton"></input></div> <div id="DOD-txt"> <hr class="top"><h3>Client: <a href="https://dod-objets.com/" target="blank">DOD Objets</a>&ensp;<span class="grey">|</span>&ensp;Year: 2018-2021&ensp;<span class="grey">|</span>&ensp;identity, typeface, catalogue, social medias</h3><hr class="bottom"> <div class="columns"><h2>DOD is a french design company focused on eco-conceived, recycled wooden objects. Their very first issued product – a ground-breaking, modular, dodecahedron-shaped light – informed the original shape from which we derived the logotype ans all letters of their own custom font. Both monumental and playful, the DOD typeface brings a unique voice to DOD’s identity, encapsulating their spirit and values.</h2></div></div> <script>$('#DOD-name').click(function(){$('#DOD-txt').toggle('1500');});</script> <script>function DODButton(){var elem = document.getElementById("DODButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #DOD-name {float:right;} #DOD-txt {display:none; clear:both;} .DODButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .DODButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#kellar" target="_blank"><img src="images/Typefaces/Kellar.svg" loading="lazy"> <div class="overlay">Discover Kellar on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/La-Commune/LaCommune-Affiches-doubles-5.jpg" loading="lazy"></div> <div><img src="images/La-Commune/LaCommune-Affiches-doubles-4.jpg" loading="lazy"></div> <div><img src="images/La-Commune/LaCommune-Affiches-doubles-3.jpg" loading="lazy"></div> <div><img src="images/La-Commune/LaCommune-Affiches-doubles-2.jpg" loading="lazy"></div> <div><img src="images/La-Commune/LaCommune-Affiches-doubles-1.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">La Commune – Posters</div> <div id="LaCommune-name"><input onclick="LaCommuneButton()" type="button" value="+" id="LaCommuneButton" class="LaCommuneButton"></input></div> <div id="LaCommune-txt"> <hr class="top"><h3>Client: <a href="https://www.lacommune-aubervilliers.fr/" target="blank">La Commune</a>&ensp;<span class="grey">|</span>&ensp;Years: 2015-2022&ensp;<span class="grey">|</span>&ensp;posters&ensp;<span class="grey">|</span>&ensp;In collaboration with studio <a href="https://devalence.net" target="blank">deValence</a></h3><hr class="bottom"> <div class="columns"><h2>Posters for La Commune, national art center for theatre in Aubervilliers. Since 2014, studio deValence has been in charge of the theatre’s visual communication. I had the pleasure and opportunity to work with them on several posters over the years.</h2></div></div> <script>$('#LaCommune-name').click(function(){$('#LaCommune-txt').toggle('1500');});</script> <script>function LaCommuneButton(){var elem = document.getElementById("LaCommuneButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #LaCommune-name {float:right;} #LaCommune-txt {display:none; clear:both;} .LaCommuneButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .LaCommuneButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/MAD/MAD-1.gif" loading="lazy"></div> <div><img src="images/MAD/MAD-2.jpg" loading="lazy"></div> <div><img src="images/MAD/MAD-3.jpg" loading="lazy"></div> <div><img src="images/MAD/MAD-4.jpg" loading="lazy"></div> <div><img src="images/MAD/MAD-5.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">MAD Paris – Un Printemps Incertain</div> <div id="MAD-name"><input onclick="MADButton()" type="button" value="+" id="MADButton" class="MADButton"></input></div> <div id="MAD-txt"> <hr class="top"><h3>Client: <a href="https://madparis.fr/Un-printemps-incertain" target="blank">MAD Paris</a>&ensp;<span class="grey">|</span>&ensp;Year: 2021&ensp;<span class="grey">|</span>&ensp;leaflet, minisite, pass, poster & communication&ensp;<span class="grey">|</span>&ensp;In collaboration with <a href="http://www.sandrinenugue.com/" target="blank">Sandrine Nugue</a></h3><hr class="bottom"> <div class="columns"><h2>In 2021, Sandrine Nugue worked on the visual identity and signage system of <i>Un Printemps Incertain</i>, an exhibition offering a sensitive glimpse into the intimacy that marked the confined spring and autumn of 2020. She invited me to collaborate on the communication aspect of the exhibition, handling all the assets for social networks, some posters and window stickers, admission pass and exhibition leaflet. I also designed and developed a <a href="https://madparis.fr/printempsincertain-leguide/" target="blank">minisite</a> devoted to showcase the exhibited artworks online.</h2></div></div> <script>$('#MAD-name').click(function(){$('#MAD-txt').toggle('1500');});</script> <script>function MADButton(){var elem = document.getElementById("MADButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #MAD-name {float:right;} #MAD-txt {display:none; clear:both;} .MADButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .MADButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#marsel" target="_blank"><img src="images/Typefaces/Marsel.svg" loading="lazy"> <div class="overlay">Discover Marsel on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Petit-Bain/SOS/SOS-2.gif" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-1.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-3.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-4.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-5.jpg" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-6.png" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-7.png" loading="lazy"></div> <div><img src="images/Petit-Bain/SOS/SOS-8.png" loading="lazy"></div> </div> <div class=text> <div class="project-name">Petit Bain – State Of Shock</div> <div id="PBSOS-name"><input onclick="PBSOSButton()" type="button" value="+" id="PBSOSButton" class="PBSOSButton"></input></div> <div id="PBSOS-txt"> <hr class="top"><h3>Client: <a href="https://petitbain.org/" target="blank">Petit Bain</a>&ensp;<span class="grey">|</span>&ensp;Year: 2018-2022&ensp;<span class="grey">|</span>&ensp;identity, poster, social medias</h3><hr class="bottom"> <div class="columns"><h2>Global identity for the “State Of Shock” events at Petit Bain, a concert venue in Paris.</h2></div></div> <script>$('#PBSOS-name').click(function(){$('#PBSOS-txt').toggle('1500');});</script> <script>function PBSOSButton(){var elem = document.getElementById("PBSOSButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #PBSOS-name {float:right;} #PBSOS-txt {display:none; clear:both;} .PBSOSButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .PBSOSButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/RMA/b42-87-ridingmodernart-1.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-2.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-3.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-4.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-5.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-6.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-7.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-8.jpg" loading="lazy"></div> <div><img src="images/RMA/b42-87-ridingmodernart-9.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Raphaël Zarka – Riding Modern Art</div> <div id="RMA-name"><input onclick="RMAButton()" type="button" value="+" id="RMAButton" class="RMAButton"></input></div> <div id="RMA-txt"> <hr class="top"><h3>Client: <a href="https://editions-b42.com/" target="blank">Éditions B42</a>&ensp;<span class="grey">|</span>&ensp;Year: 2017&ensp;<span class="grey">|</span>&ensp;book design&ensp;<span class="grey">|</span>&ensp;In collaboration with studio <a href="https://devalence.net" target="blank">deValence</a></h3><hr class="bottom"> <div class="columns"><h2>Riding Modern Art brings together a collection of 70 black and white photographs of people skateboarding on sculptures in public spaces. Through his study of the process of appropriation and reuse of works of art in public places, used by skateboarders as further challenges for their sport, Raphaël Zarka offers a way of approaching a work of art that underlines the dynamism of modern sculpture, casting a critical light on the idea of movement in these often abstract and geometric works, inspired by Cubist, Futurist or Constructivist art. The skateboarder’s approach to a sculpture, more mechanical than conceptual, brings out the variety of movement it seeks to suggest. While it is not possible to “freeze” or represent movement in a solid form (it cannot be sculpted) it is, nevertheless, a constituent element of the work, as also is space. Thus, the body of the skateboarder becomes a choreographic form on a sculptural form, and the presence of a human body on a work of art transforms it from something perched on a pedestal into a living sculpture. Some images are missing from this collection, as sculptors have refused to see their artwork reproduced. The spaces dedicated to those photographs remain purposely empty.</h2></div></div> <script>$('#RMA-name').click(function(){$('#RMA-txt').toggle('1500');});</script> <script>function RMAButton(){var elem = document.getElementById("RMAButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #RMA-name {float:right;} #RMA-txt {display:none; clear:both;} .RMAButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .RMAButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#pyros" target="_blank"><img src="images/Typefaces/Pyros.svg" loading="lazy"> <div class="overlay">Discover Pyros on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Joan-Ayrton/Joan-Ayrton-1.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-2.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-3.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-4.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-5.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-6.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-7.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-8.jpg" loading="lazy"></div> <div><img src="images/Joan-Ayrton/Joan-Ayrton-9.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Joan Ayrton – slow melody time old</div> <div id="JoanAyrton-name"><input onclick="JoanAyrtonButton()" type="button" value="+" id="JoanAyrtonButton" class="JoanAyrtonButton"></input></div> <div id="JoanAyrton-txt"> <hr class="top"><h3>Client: <a href="https://joanayrton.com/" target="blank">Joan Ayrton</a>&ensp;<span class="grey">|</span>&ensp;Year: 2017&ensp;<span class="grey">|</span>&ensp;book design</h3><hr class="bottom"> <div class="columns"><h2>This small photo book is a piece by British artist Joan Ayrton wandering around the sculptures and marble bases of the National Archaeological Museum of Athens. A journey into time, stones and violin-shaped figures…<br><br> Co-edited by <a href="https://www.facebook.com/THEOPHILES-PAPERS-147979068597826/" target="blank">Théophile’s Papers</a> & <a href="http://www.florenceloewy.com/" target="blank">Florence Loewy</a>. Distributed by <a href="https://www.lespressesdureel.com/ouvrage.php?id=5898" target="blank">les presses du réel</a>.</h2></div></div> <script>$('#JoanAyrton-name').click(function(){$('#JoanAyrton-txt').toggle('1500');});</script> <script>function JoanAyrtonButton(){var elem = document.getElementById("JoanAyrtonButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #JoanAyrton-name {float:right;} #JoanAyrton-txt {display:none; clear:both;} .JoanAyrtonButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .JoanAyrtonButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/Elixcimes/Elixcimes-1.jpg" loading="lazy"></div> <div><img src="images/Elixcimes/Elixcimes-2.jpg" loading="lazy"></div> <div><img src="images/Elixcimes/Elixcimes-3.jpg" loading="lazy"></div> <div><img src="images/Elixcimes/Elixcimes-4.jpg" loading="lazy"></div> <div><img src="images/Elixcimes/Elixcimes-5.jpg" loading="lazy"></div> <div><img src="images/Elixcimes/Elixcimes-6.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Élix’Cimes</div> <div id="Elixcimes-name"><input onclick="ElixcimesButton()" type="button" value="+" id="ElixcimesButton" class="ElixcimesButton"></input></div> <div id="Elixcimes-txt"> <hr class="top"><h3>Client: <a href="https://elixcimes.com//" target="blank">Élix’Cimes</a>&ensp;<span class="grey">|</span>&ensp;Year: 2017-2022&ensp;<span class="grey">|</span>&ensp;logotype, identity, poster, labels, website</h3><hr class="bottom"> <div class="columns"><h2>Élix’Cimes is a young French liquor producer from Savoie (France). Nestled in the heart of the Alps, François Buttin is dedicating his time to wander the mountains in search for the precious plants to be conscientiously hand-picked. His rare know-how is then dedicated to a responsible artisanal production method to sublimate the plants of his region and turn them into the most delicious nectars.</h2></div></div> <script>$('#Elixcimes-name').click(function(){$('#Elixcimes-txt').toggle('1500');});</script> <script>function ElixcimesButton(){var elem = document.getElementById("ElixcimesButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Elixcimes-name {float:right;} #Elixcimes-txt {display:none; clear:both;} .ElixcimesButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .ElixcimesButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#smithee" target="_blank"><img src="images/Typefaces/Smithee.svg" loading="lazy"> <div class="overlay">Discover Smithee on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/B42-Esthetique/B42-Esthetique-01.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-02.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-03.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-04.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-05.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-06.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-07.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-08.jpg" loading="lazy"></div> <div><img src="images/B42-Esthetique/B42-Esthetique-09.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Collection Esthétique des données</div> <div id="Esthetique-name"><input onclick="EsthetiqueButton()" type="button" value="+" id="EsthetiqueButton" class="EsthetiqueButton"></input></div> <div id="Esthetique-txt"> <hr class="top"><h3>Client: <a href="https://editions-b42.com//" target="blank">Éditions B42</a>&ensp;<span class="grey">|</span>&ensp;Year: 2017-2022&ensp;<span class="grey">|</span>&ensp;identity, books&ensp;<span class="grey">|</span>&ensp;In collaboration with studio <a href="https://www.devalence.net" target="blank">deValence</a></h3><hr class="bottom"> <div class="columns"><h2>Creation of the “Esthétique des données” collection’s graphic principles (directed by Nicolas Thély and published with the help of the Rennes 2 University) for the parisian publishing house B42. Realisation of the collection’s first five books.</h2></div></div> <script>$('#Esthetique-name').click(function(){$('#Esthetique-txt').toggle('1500');});</script> <script>function EsthetiqueButton(){var elem = document.getElementById("EsthetiqueButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Esthetique-name {float:right;} #Esthetique-txt {display:none; clear:both;} .EsthetiqueButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .EsthetiqueButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/Cite-Royale-Loches/CRL-1.jpg" loading="lazy"></div> <div><img src="images/Cite-Royale-Loches/CRL-2.jpg" loading="lazy"></div> <div><img src="images/Cite-Royale-Loches/CRL-3.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Cité Royale de Loches – Le Chevalier dans tous ses états</div> <div id="CRL-name"><input onclick="CRLButton()" type="button" value="+" id="CRLButton" class="CRLButton"></input></div> <div id="CRL-txt"> <hr class="top"><h3>Client: Cité Royale de Loches&ensp;<span class="grey">|</span>&ensp;Year: 2016&ensp;<span class="grey">|</span>&ensp;identity, programs, posters & signage&ensp;<span class="grey">|</span>&ensp;In collaboration with <a href="https://www.instagram.com/celestin_krier/?hl=fr" target="blank">Célestin Krier</a></h3><hr class="bottom"> <div class="columns"><h2>For an exhibition about knights at the Cité Royale of Loches (France), illustrator Célestin Krier and I joined forces to design the identity, signage and overall communication. Based on a simple but striking heraldic palette, the identity takes advantage of a strong typographic treatment (<a href="https://www.cnap.fr/sites/infini/" target="blank">Infini</a>, by <a href="http://www.sandrinenugue.com/" target="blank">Sandrine Nugue</a>) paired with Krier’s iconic style of illustrations. Bold and playful!<br> Exhibition design by Francisca Würz and Florent Blanchard.</h2></div></div> <script>$('#CRL-name').click(function(){$('#CRL-txt').toggle('1500');});</script> <script>function CRLButton(){var elem = document.getElementById("CRLButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #CRL-name {float:right;} #CRL-txt {display:none; clear:both;} .CRLButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .CRLButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#almeria" target="_blank"><img src="images/Typefaces/Almeria.svg" loading="lazy"> <div class="overlay">Discover Almeria on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Delme/Delme-1.jpg" loading="lazy"></div> <div><img src="images/Delme/Delme-2.jpg" loading="lazy"></div> <div><img src="images/Delme/Delme-3.jpg" loading="lazy"></div> <div><img src="images/Delme/Delme-4.jpg" loading="lazy"></div> <div><img src="images/Delme/Delme-5.jpg" loading="lazy"></div> <div><img src="images/Delme/Delme-6.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Synagogue de Delme – Invitations</div> <div id="Delme-name"><input onclick="DelmeButton()" type="button" value="+" id="DelmeButton" class="DelmeButton"></input></div> <div id="Delme-txt"> <hr class="top"><h3>Client: <a href="https://cac-synagoguedelme.org/" target="blank">Synagogue de Delme</a>&ensp;<span class="grey">|</span>&ensp;Years: 2015-2018&ensp;<span class="grey">|</span>&ensp;invitations, posters&ensp;<span class="grey">|</span>&ensp;In collaboration with studio <a href="https://devalence.net" target="blank">deValence</a></h3><hr class="bottom"> <div class="columns"><h2>For several years, studio deValence has been in charge of the Synagogue de Delme’s communication. Under their art direction, I designed a few invitation cards which came as folded A4 sheets: a completely free visual proposition for each exhibition on the front and a fixed layout with all the informations on the back.</h2></div></div> <script>$('#Delme-name').click(function(){$('#Delme-txt').toggle('1500');});</script> <script>function DelmeButton(){var elem = document.getElementById("DelmeButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Delme-name {float:right;} #Delme-txt {display:none; clear:both;} .DelmeButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .DelmeButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/Vasken/Vasken-Site-1.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-2.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-3.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-4.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-5.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-6.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-7.jpg" loading="lazy"></div> <div><img src="images/Vasken/Vasken-Site-8.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Vasken Yéghiayan</div> <div id="Vasken-name"><input onclick="VaskenButton()" type="button" value="+" id="VaskenButton" class="VaskenButton"></input></div> <div id="Vasken-txt"> <hr class="top"><h3>Client: <a href="http://www.vasken.fr/" target="blank">Vasken Yéghiayan</a>&ensp;<span class="grey">|</span>&ensp;Year: 2015&ensp;<span class="grey">|</span>&ensp;web design</h3><hr class="bottom"> <div class="columns"><h2>In 2015, set-designer Vasken Yéghiayan approached me to work on his personal website to showcase his practice. Since then, we’ve been closely working together to keep it up to date with his latest projects.</h2></div></div> <script>$('#Vasken-name').click(function(){$('#Vasken-txt').toggle('1500');});</script> <script>function VaskenButton(){var elem = document.getElementById("VaskenButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Vasken-name {float:right;} #Vasken-txt {display:none; clear:both;} .VaskenButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .VaskenButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#peckham" target="_blank"><img src="images/Typefaces/Peckham.svg" loading="lazy"> <div class="overlay">Discover Peckham on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Ensba/Ensba-1.jpg" loading="lazy"></div> <div><img src="images/Ensba/Ensba-2.jpg" loading="lazy"></div> <div><img src="images/Ensba/Ensba-3.jpg" loading="lazy"></div> <div><img src="images/Ensba/Ensba-4.jpg" loading="lazy"></div> <div><img src="images/Ensba/Ensba-5.jpg" loading="lazy"></div> <div><img src="images/Ensba/Ensba-6.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">École nationale supérieure des beaux-arts de Lyon</div> <div id="ENSBA-name"><input onclick="ENSBAButton()" type="button" value="+" id="ENSBAButton" class="ENSBAButton"></input></div> <div id="ENSBA-txt"> <hr class="top"><h3>Client: <a href="http://www.ensba-lyon.fr/" target="blank">Ensba Lyon</a>&ensp;<span class="grey">|</span>&ensp;Year: <span class="caps">2013–2015</span>&ensp;<span class="grey">|</span>&ensp;visual identity&ensp;<span class="grey">|</span>&ensp;In collaboration with <a href="https://www.radimpesko.com" target="blank">Radim Peško</a> and Fabrice Mabime</h3><hr class="bottom"> <div class="columns"><h2>The redesign of the visual identity of Lyon’s national fine arts school rests on two axes of exploration: time/color and space/typography. These two axes are guided by a concept of ductibility resulting in a series of subtle variations, the basic principle of this identity. The color red and its infinite variations are the backbone of the identity, evolving with time, printing or display techniques and the seasons. The Ensba and Ensba Mono fonts, which were designed specifically for the school’s identity, emphasize the architectural dimension of the page and are an immediate signature, even when used in the simplest and most direct way.</h2></div></div> <script>$('#ENSBA-name').click(function(){$('#ENSBA-txt').toggle('1500');});</script> <script>function ENSBAButton(){var elem = document.getElementById("ENSBAButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #ENSBA-name {float:right;} #ENSBA-txt {display:none; clear:both;} .ENSBAButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .ENSBAButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/Prix-de-Paris/Prix-de-Paris-1.jpg" loading="lazy"></div> <div><img src="images/Prix-de-Paris/Prix-de-Paris-2.jpg" loading="lazy"></div> <div><img src="images/Prix-de-Paris/Prix-de-Paris-3.gif" loading="lazy"></div> </div> <div class=text> <div class="project-name">Prix de Paris / Prix Jean Chevalier</div> <div id="PrixdeParis-name"><input onclick="PrixdeParisButton()" type="button" value="+" id="PrixdeParisButton" class="PrixdeParisButton"></input></div> <div id="PrixdeParis-txt"> <hr class="top"><h3>Client: <a href="http://www.ensba-lyon.fr/" target="blank">ENSBA Lyon</a>&ensp;<span class="grey">|</span>&ensp;Year: <span class="caps">2014</span>&ensp;<span class="grey">|</span>&ensp;invitation cards</h3><hr class="bottom"> <div class="columns"><h2>Invitation cards for two Art prices taking place at the National Superior School of Fine Arts in Lyon in 2014. There were four different visuals for each event playing with the idea of variation, tools and textures. The identity’s red color was different on every single card as we changed the color and its intensity during the printing process.</h2></div></div> <script>$('#PrixdeParis-name').click(function(){$('#PrixdeParis-txt').toggle('1500');});</script> <script>function PrixdeParisButton(){var elem = document.getElementById("PrixdeParisButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #PrixdeParis-name {float:right;} #PrixdeParis-txt {display:none; clear:both;} .PrixdeParisButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .PrixdeParisButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="section"> <div class="slider"> <div><img src="images/Delme-Vinyle/Delme-Vinyl-1.jpg" loading="lazy"></div> <div><img src="images/Delme-Vinyle/Delme-Vinyl-2.jpg" loading="lazy"></div> <div><img src="images/Delme-Vinyle/Delme-Vinyl-3.jpg" loading="lazy"></div> <div><img src="images/Delme-Vinyle/Delme-Vinyl-4.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Synagogue de Delme – Stones, Air, Axioms</div> <div id="DelmeVinyle-name"><input onclick="DelmeVinyleButton()" type="button" value="+" id="DelmeVinyleButton" class="DelmeVinyleButton"></input></div> <div id="DelmeVinyle-txt"> <hr class="top"><h3>Client: <a href="https://cac-synagoguedelme.org/editions/83-stones-air-axioms-delme" target="blank">Synagogue de Delme</a>&ensp;<span class="grey">|</span>&ensp;Year: 2018&ensp;<span class="grey">|</span>&ensp;vinyl sleeve&ensp;<span class="grey">|</span>&ensp;In collaboration with studio <a href="https://devalence.net" target="blank">deValence</a></h3><hr class="bottom"> <div class="columns"><h2>“Stones, Air, Axioms” is a research project by artists Jean-Luc Guionnet and Thomas Tilly, which addresses the complex relationship between sound and architecture. The art center La Synagogue de Delme was the third occurrence of this project, after Poitiers and Krakow. This edition follows the exhibition in Delme of Jean-Luc Guionnet and Thomas Tilly in 2015.<br>2× white vinyl LPs – 300 copies edited by Fragment Factory (Hamburg) and Synagogue de Delme.</h2></div></div> <script>$('#DelmeVinyle-name').click(function(){$('#DelmeVinyle-txt').toggle('1500');});</script> <script>function DelmeVinyleButton(){var elem = document.getElementById("DelmeVinyleButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #DelmeVinyle-name {float:right;} #DelmeVinyle-txt {display:none; clear:both;} .DelmeVinyleButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .DelmeVinyleButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#gortex" target="_blank"><img src="images/Typefaces/Gortex.svg" loading="lazy"> <div class="overlay">Discover Gortex on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/La-Perruque/La-Perruque-1.jpg" loading="lazy"></div> <div><img src="images/La-Perruque/La-Perruque-2.jpg" loading="lazy"></div> <div><img src="images/La-Perruque/La-Perruque-3.jpg" loading="lazy"></div> <div><img src="images/La-Perruque/La-Perruque-4.jpg" loading="lazy"></div> <div><img src="images/La-Perruque/La-Perruque-5.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">La Perruque – nº1</div> <div id="Perruque-name"><input onclick="PerruqueButton()" type="button" value="+" id="PerruqueButton" class="PerruqueButton"></input></div> <div id="Perruque-txt"> <hr class="top"><h3>Client: <a href="http://surfaces-utiles.org/" target="blank">Surfaces Utiles</a> / <a href="http://la-perruque.org/" target="blank">La Perruque</a>&ensp;<span class="grey">|</span>&ensp;Year: 2015&ensp;<span class="grey">|</span>&ensp;specimen design</h3><hr class="bottom"> <div class="columns"><h2>La Perruque publishes and distributes type specimens. Printed on the margins of offset prints, each issue of La Perruque presents a unique typeface. Altogether, the issues weave a thread between type designers and graphic designers’ contributions. Invited by Olivier Bertrand (Surfaces Utiles), I had the honour to kick it off by quoting the beginnings of Philip K. Dick’s short-novel “Pay for the printer” (the former name of La Perruque). Especially drawn for La Perruque, my Grotex Micro font is put to the test, from 4 to 30pt type-size. The text develops itself as the story unfolds, along strange marks and glitches extracted from pages scanned by Google Books.</h2></div></div> <script>$('#Perruque-name').click(function(){$('#Perruque-txt').toggle('1500');});</script> <script>function PerruqueButton(){var elem = document.getElementById("PerruqueButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #Perruque-name {float:right;} #Perruque-txt {display:none; clear:both;} .PerruqueButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .PerruqueButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>   <div class="hover-container"><a href="https://www.apextypefoundry.com/typefaces/#hazel" target="_blank"><img src="images/Typefaces/Hazel.svg" loading="lazy"> <div class="overlay">Discover Hazel on Apex Type Foundry ↗</div></a> </div> <hr class="typefaces">   <div class="section"> <div class="slider"> <div><img src="images/Mamie-Marie/Mamie-Marie-1.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-2.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-3.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-4.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-5.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-7.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-8.jpg" loading="lazy"></div> <div><img src="images/Mamie-Marie/Mamie-Marie-9.jpg" loading="lazy"></div> </div> <div class=text> <div class="project-name">Mamie Marie</div> <div id="MM-name"><input onclick="MMButton()" type="button" value="+" id="MMButton" class="MMButton"></input></div> <div id="MM-txt"> <hr class="top"><h3>Client: Mamie Marie&ensp;<span class="grey">|</span>&ensp;Year: 2016&ensp;<span class="grey">|</span>&ensp;identity, website, communication</h3><hr class="bottom"> <div class="columns"><h2>Mamie Marie is a small grocery store located in Lyon (France) dedicated to organic and seasonal food as well as natural household and daily care products.</h2></div></div> <script>$('#MM-name').click(function(){$('#MM-txt').toggle('1500');});</script> <script>function MMButton(){var elem = document.getElementById("MMButton");if (elem.value=="−") elem.value = "+";else elem.value = "−";}</script> <style> #MM-name {float:right;} #MM-txt {display:none; clear:both;} .MMButton {font-family: "Practical Grotesk"; font-variation-settings: 'wght' 400; background-color: #F0F0F0; color:#444; border: none; padding, margin:0; font-size: 1rem; cursor:pointer;} .MMButton:hover {opacity:.2; -o-transition, -ms-transition, -moz-transition, -webkit-transition, transition: opacity 0.3s ease-out;} </style> </div></div>  </div>   <div id="informations"> <div class="section"> <div class="text"> <h1>Alex Chavot is a Paris based freelance graphic & type designer, graduated from the master degree in graphic design at the National Superior School of Fine Arts of Lyon (France). His practice is focused on type design, printed matter (books, catalogues, magazines, visual identities, posters, signage…) and web (websites, social medias…), either for commercial or self-initiated projects. His work has a distinctive conceptual approach to design resulting in clear, minimalistic, systematic and contemporary solutions. Since 2014, he is also a regular collaborator of the french graphic design studio <a href="http://devalence.net" target="_blank">deValence</a>.<br><br> In 2020, he decides to start <a href="https://apextypefoundry.com" target="_blank">Apex Type Foundry</a>, a simple and straightforward platform dedicated to his type design work. <br><br><br> <div style="text-align:center"> <u>Jobs and internships :</u><br><br> We currently don’t have any position to offer.<br><br><br> </div> <div style="text-align:center"> <u>Contact :</u><br><br> <div class="adress"><a href="mailto:a.chavot@gmail.com">a.chavot@gmail.com</a></div> <br><br> Design & development : © Alex Chavot <span class="caps">2008 – 2024</span></h1> </div></div> </div>  <script type="text/javascript"> mybutton = document.getElementById("BackToTop"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } </script> <script> var $carousel = $('.slider'); $(document).on('keydown', function(e) { if(e.keyCode == 37) { $carousel.slick('slickPrev'); } if(e.keyCode == 39) { $carousel.slick('slickNext'); } }); </script> <script> var menuButton = document.querySelector('#menu-button'); var menu = document.querySelector('#menu'); // show or hide menuButton.addEventListener('click',function(){ menu.classList.toggle('show-menu'); menuButton.classList.toggle('close'); }); </script> <script> document.addEventListener('mousemove', (event) => { // Calculate the font weight and italic values based on mouse position const weight = Math.round((event.clientY / window.innerHeight) * 850) + 50; const italic = Math.round((event.clientX / window.innerWidth) * 11); // Apply the font styles to the div const div = document.getElementById('practicalDiv'); div.style.fontVariationSettings = `'wght' ${weight}, 'ital' ${italic}`; }); </script> </body> </html>