> For the complete documentation index, see [llms.txt](https://wadejin.gitbook.io/notes-on/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wadejin.gitbook.io/notes-on/world/variable-typography.md).

# On the Road to Variable: The Flexible Future of Typography

![](/files/-MchISPo4iJywfHZl2Nb)

本書的前言如此寫到（簡略翻譯）：Typography 本身就是一個高度變化的系統，由單字組成字、句、整個段落。而 Variable/Flexible Typography 不單單只是近年 Adobe 所引領的 Variable Font 的應用，更是如響應式網站（Responsive Website）一般，根據載體尺寸的不同，去改變 Typography 的樣態。

這本書介紹了 122 個案例，並分成 Position、Width、Height、Style 等層面去分類這些作品，也訪談了兩個厲害的工作室，Studio Fexien 和 Dia。從中，我們看見的基本上都是歐洲國家的工作室（尤其集中於荷蘭、德國、瑞士這一帶），這一方面可能是出版商的關係，另一方面也可能是這個地區設計風格使然。未來有機會會再針對這一部分做考察。

整體而言，可以看出：這些地區的設計師，不是藉由單純的圖像符號來建立識別性，而是建立一個容納圖像的排版系統；這有點類似於《物體系》所說的，「物」不再只是由本身的材質、裝飾來作爲象徵符號，而是由物與物之間所構成的「擺設體系」來作為符號。但其實這樣的空間關係性，在瑞士國際主義就已經被探索過，但藉由電腦技術的進步，透過動態與生成式的程式語言，可以讓這樣的版面空間流動變化，可以說是《液態現代性》在平面設計上的體現。

有點扯遠了。總之以下會介紹本書提到的幾個工作室，當然這本書介紹了上百個工作室是介紹不完的，所以請有興趣的人自己找這本書來看。不過我也會補充幾個，我有追蹤，但未被納入這本書的組織或設計工作室，尤其是幾個漢字圈的 Variable Typography 案例。

## DEMO festival（荷蘭）

{% embed url="<https://vimeo.com/374621956>" %}

網站：<https://demofestival.com/>\
「It’s time to give motion design a platform.」顧名思義，DEMO festival 是一個 motion design 展演與實驗的平台，由荷蘭工作室 [Studio Dumbar](https://studiodumbar.com/)（後面會介紹到）和  [Exterion Media Netherlands](https://exterion.com/) 共同舉辦。從網站上可以連結到該年的參與者，instagram 上也分享很多設計師的動態作品。

## Typomania Festival（俄羅斯）

![](/files/-MchWo56LPfgYqL0Id4d)

![](/files/-MchX6MkX4pF13cWM2Ig)

網站：<https://en.typomania.ru/>\
Youtube：<https://www.youtube.com/c/TYPOMANIAfest/videos>\
於 2012 年創立、每年舉辦於俄羅斯的設計活動，專注於字體、文字排版與視覺試驗。每年都會有書展、海報展、工作坊講座等各式活動，也有 Videocontest 和 2x2 Sticker 的競賽活動，Youtube 上都有把歷年得獎者的作品放出來，實驗性極高，非常推薦看。網站上也有搜集歷年參與者的作品，是一個認識非英文系設計師的好去處。

{% embed url="<https://youtu.be/pcSjNbQJjTw>" %}

## Typojanchi（韓國）

![](/files/-Mcnxf7UCtO39ARAS964)

![網站設計者：Yehwan Song](/files/-Mcnxk9Kjro9AXtIsY3Y)

舉辦於韓國的字體設計活動，每兩年舉辦一次。詳細介紹可以參考吳曼努所寫的這一篇介紹：

{% embed url="<https://medium.com/koom/event-001-typojanchi-11e5deabcc63>" %}

### Variable Typography 在韓國

韓國有許多設計工作室在設計案中大量使用動態設計，可以參考我寫過的這一篇：[〈近期所關注的韓國設計師—擅長 Typography〉](https://wadejin.gitbook.io/notes-on/notes-on-ge-guo-ping-mian-she-ji/korean-graphic-designers/typography)。舉其中幾個代表性的為例：[**Sulki and Min**](/notes-on/world/korean-graphic-designers/typography.md#sulki-and-min-wang-zhan-ig)**、**[**DDBBMM**](/notes-on/world/korean-graphic-designers/typography.md#ddbbmm-wang-zhan-ig)**、**[**Ordinary People**](/notes-on/world/korean-graphic-designers/typography.md#ordinary-people-wang-zhan-ig)**、**[**Chae Byung-Rok**](/notes-on/world/korean-graphic-designers/typography.md#chae-byung-rok-ig)**。**

## motionposters

![](/files/-MchQrHPbXxgK-jFq_J0)

IG：<https://www.instagram.com/motionposters/>\
就如名字一樣，這是一個專門搜集 motion poster 的 instagram 帳號。有很大一部分的比例是 Variable Typography 的案例。作品品質雖然比較不一定，但不失為一個關注的資訊節點。

### [kinetictype](https://www.instagram.com/kine.type/)、[HEAD Kinetic](https://www.instagram.com/head_kinetic/)、[#kinetictypography](https://www.instagram.com/explore/tags/kinetictypography/)

這三個也是 Instagram 有針對 Kinetic Typography 做作品轉貼的帳號或標籤，也可以一併追。其中 HEAD Kinetic 是本書介紹的 Dia 工作室所帶領的課程。&#x20;

## space type generator

![](/files/-MchS0TBpqaOkjkJBECc)

網站：<https://spacetypegenerator.com/>\
設計師 Kiel 所開發出來的 Variable Typography 工具，有預設好的好幾個模式，以及拉桿式的介面可以隨意操作，很適合沒有程式基礎的藝術設計者使用。大家可以玩玩看。我把作者的資訊擺在下面，也非常推薦大家一讀他[在 itsnicethat 上的訪談](https://www.itsnicethat.com/articles/kiel-mutschelknaus-space-type-generator-graphic-design-digital-160519)，很喜歡他說的「The future of design is in the creation of tools」，這一點和二棲知學上面，[顏伯駿訪談](https://motioner.tw/courses/JQ1MH04HD54BS5A)提到的觀點類似，是免費的，也推薦大家看。。

### Kiel D. Mutschelknaus（美國）

IG：<https://www.instagram.com/kiel.d.m/>

## Studio Fexien（瑞士）

網站：<https://www.studiofeixen.ch/>\
IG：<https://www.instagram.com/studiofeixen/>

本書重點訪談的工作室之一。訪談中提到，他們只會花四天在商業工作上，保留一天給自己，去做實驗性的創作。這不僅讓他們能享受地投入專案中，也讓他們的客戶看見，他們能做到的事情與未來想發展的方向。他們所做的，不僅是為客戶當下打造一個能動的視覺，更是一個 variable visual identity，可以延續發展成後續每期／每年的視覺；即便是[靜態的刊物設計（20 Minuten）](https://www.studiofeixen.ch/20-minuten/)，也導入了 flexible visual 的概念。除此以外，他們也開發出屬於自己的可變式字型，[Fexien Font](https://fonts.studiofeixen.ch/)。

{% tabs %}
{% tab title="Oto Nové Swiss" %}
{% embed url="<https://www.instagram.com/p/BfLsVNLnghL/>" %}

更多資訊：<https://www.studiofeixen.ch/oto-nove-swiss/>
{% endtab %}

{% tab title="Shorties" %}
{% embed url="<https://www.instagram.com/p/BalxP8tn_yf/>" %}

更多資訊：<https://www.studiofeixen.ch/shorties/>
{% endtab %}

{% tab title="Vlow!" %}
{% embed url="<https://www.instagram.com/p/BGULz2dOFp6/>" %}

更多資訊：<https://www.studiofeixen.ch/vlow/>
{% endtab %}
{% endtabs %}

## DIA（美國／瑞士）

網站：<https://dia.tv/>\
IG：<https://www.instagram.com/p/CLcuuMiD1m9/>

本書重點訪談的工作室之一。在 [HEAD – Genève](https://www.instagram.com/headgeneve/) 有帶領課程，作品可以在 [HEAD Kinetic](https://www.instagram.com/head_kinetic/)／[HEAD Media Design](https://www.instagram.com/headmediadesign/) 這兩個 IG 帳號上看。

{% tabs %}
{% tab title="Space10" %}
{% embed url="<https://www.instagram.com/p/CFxq8f9nmAl/>" %}

更多資訊：[https://dia.tv/project/space10/#slide-1](https://dia.tv/project/space10/#slide-4)
{% endtab %}

{% tab title="NIKE" %}
{% embed url="<https://www.instagram.com/p/BbLEoxJFrge/>" %}

更多資訊：<https://dia.tv/project/nike-statement-house/#slide-4>
{% endtab %}

{% tab title="Biennale internationale de design graphique" %}
{% embed url="<https://www.instagram.com/p/ByD6bKPHlWq/>" %}

{% embed url="<https://www.instagram.com/p/CLcuuMiD1m9/>" %}

更多資訊：<https://dia.tv/project/chaumont-biennale-post-medium/#slide-5>
{% endtab %}
{% endtabs %}

## TwoPoints.Net（德國）

網站：<https://new.twopoints.net/>\
IG：<https://www.instagram.com/twopointsnet/>\
本書的編輯與設計團隊。很有趣的團隊，不只做設計，還[策劃了多本書籍出版](https://new.twopoints.net/editorial/)最近還有一本[《Flexible Visual Systems》](https://new.twopoints.net/fvs/)要上市。他們在簡介中以「specializing in flexible systems for visual identities」自我定位，多數的作品也都以動態識別為出發點做規劃，我很喜歡[他們為 Holo 所做的識別](https://new.twopoints.net/holo/)[VGL 的識別專案](https://new.twopoints.net/vgl/)也很直得一看。

{% tabs %}
{% tab title="NIKE" %}
{% embed url="<https://www.instagram.com/p/B_gzf3mi9G_/>" %}

更多資訊：<https://new.twopoints.net/nike-cfc/>
{% endtab %}

{% tab title="The Inner Game of Design" %}
{% embed url="<https://www.instagram.com/p/Bp1XeXBhFA0/>" %}

{% endtab %}

{% tab title="Systemgestaltung" %}
{% embed url="<https://www.instagram.com/p/BuSvBHlgQez/>" %}
{% endtab %}
{% endtabs %}

## Studio Dumbar（荷蘭）

網站：<https://studiodumbar.com/>\
IG：<https://www.instagram.com/studiodumbar/>\
超爆強，書裡似乎沒介紹到很可惜。成立於 1977 年，有 Wikipedia 頁面。創辦前面介紹的 DEMO Festival。[設計了荷蘭整個國家的官方識別](https://studiodumbar.com/work/nl-branding)，如果平面設計有奧運，那荷蘭的國家隊陣容絕對有他們。

{% tabs %}
{% tab title="Cumulus Park" %}
{% embed url="<https://studiodumbar.com/media/pages/work/cumulus-park/3192625726-1586263692/words-combo-yellow.mp4>" %}

{% embed url="<https://studiodumbar.com/media/pages/work/cumulus-park/965666306-1586263691/cumulus-park-code-interface-02.mp4>" %}

更多資訊：<https://studiodumbar.com/work/cumulus-park>
{% endtab %}

{% tab title="DEMO Festival" %}
{% embed url="<https://studiodumbar.com/media/pages/work/demo/3239271720-1586263693/aftermovie.mp4>" %}

{% embed url="<https://studiodumbar.com/media/pages/work/demo/4010592598-1586263693/webcase-1200x1080-insta.mp4>" %}

更多資訊：<https://studiodumbar.com/work/demo>
{% endtab %}

{% tab title="Amsterdam Sinfonietta" %}
![](/files/-McrkWGS5VRZMFkomPHc)

![](/files/-Mcrkg5Jf_sU-30oEkqr)

{% embed url="<https://www.instagram.com/p/CGkdLlwpWj8/>" %}

更多資訊：<https://studiodumbar.com/work/amsterdam-sinfonietta-identity>
{% endtab %}

{% tab title="Experimental Coding" %}
{% embed url="<https://www.instagram.com/p/CM2RS0_FWqW/>" %}

{% embed url="<https://www.instagram.com/p/CQY45q_BVXv/>" %}

{% embed url="<https://www.instagram.com/p/CFjMLfGJYGD/>" %}

{% embed url="<https://www.instagram.com/p/CQJTNtkMw83/>" %}
{% endtab %}
{% endtabs %}

## Erich Brechbühl \[Mixer]（瑞士）

網站：<https://erichbrechbuhl.ch/>\
IG：[https://www.instagram.com/erichbrechbuhl](https://www.instagram.com/erichbrechbuhl/?hl=zh-tw)\
AGI 會員，大師級的人物，創辦 Weltformat Graphic Design Festival。將文字與實體圖像高度結合。

{% tabs %}
{% tab title="Innerschweizer Filmpreis" %}
![](/files/-McrqgZJpvkvKRkRvToT)

更多資訊：<https://erichbrechbuhl.ch/be-water>
{% endtab %}

{% tab title="Seoul – Pyongyang" %}
{% embed url="<https://vimeo.com/303111885>" %}

更多資訊：<https://erichbrechbuhl.ch/seoul-pyongyang>
{% endtab %}

{% tab title="The Happy Show" %}
{% embed url="<https://vimeo.com/239497408>" %}

更多資訊：<https://vimeo.com/239497408>
{% endtab %}
{% endtabs %}

## Studio Yukiko（德國）

網站：<http://y-u-k-i-k-o.com/>\
IG：<https://www.instagram.com/studio_yukiko/>\
[《Flaneur》第 8 期](https://www.flaneur-magazine.com/shop/issue-8-kangding-road-wanda-road)以臺北萬大路為題材，獲得 [Stack Awards 2019](https://www.stackmagazines.com/awards-2019/) 的殊榮。

{% tabs %}
{% tab title="POOL Berlin" %}
{% embed url="<https://www.instagram.com/p/CDjIsN3C0ga/>" %}
{% endtab %}

{% tab title="OÖ Kulturquartier" %}
{% embed url="<https://www.instagram.com/p/CLGocJfhvZ2/>" %}

{% endtab %}

{% tab title="Magical Soup" %}
![](/files/-Md3QBGdpIYpp79wUk7N)

圖源：<https://www.instagram.com/p/CFjW5Eui-SZ/>

![](/files/-Md3QRGLEfwAtSGVnWHZ)

圖源：<https://www.instagram.com/p/CHC2ymVh1b6/>
{% endtab %}
{% endtabs %}

## Team Thursday（荷蘭）

網站：<https://teamthursday.com/>\
IG：<https://www.instagram.com/teamthursday/>\
雖然他們的視覺並未做成動態，但可以看見他們對空間佈局有個高度的可變性。我尤其喜歡他們為 Moving Futures 2014/2015 所做的視覺，任何人都可以與這個視覺互動，並創造出自己專屬的海報。似乎和韓國的設計師有不錯的關係，有邀請過 21 位韓國設計師[在鹿特丹舉辦海報展](https://www.instagram.com/p/BcSKo_QnD9g/)（[在他們經營的空間 TTHQ](https://teamthursday.com/tthq/)），也有受邀參與 Typojanchi 2015，也有[到韓國做設計分享](https://www.instagram.com/p/BUayJ3YjeAI/)。

{% tabs %}
{% tab title="Disclosed poster series" %}
![](/files/-McoE68lw0mmhXkwlNC8)

圖源：<https://teamthursday.com/timeline/>
{% endtab %}

{% tab title="Moving Futures" %}
![](/files/-McoEjk6JteFBcWWTpQq)

![](/files/-McoFJf1mo32fTXIXfEu)

圖源：<https://teamthursday.com/timeline/>
{% endtab %}
{% endtabs %}

## Anna Kulachek（烏克蘭／俄羅斯／美國）

網站：<http://kulachek.com/>｜<https://k-u-l-a-c-h-e-k.tumblr.com/>\
IG：<https://www.instagram.com/kulachek/>\
根據[這一篇訪談](https://strelkamag.com/en/article/kulachek-for-french-magazine)，她歷經過烏克蘭、俄羅斯、義大利和美國。現擔任 [Strelka Institute](https://strelka.com/en) 的藝術指導，負責幾乎所有的視覺。

{% tabs %}
{% tab title="1" %}
![](/files/-Md3Tg9GeOj3b799kNMI)

圖源：<https://k-u-l-a-c-h-e-k.tumblr.com/>
{% endtab %}

{% tab title="2" %}
![](/files/-Md3UohuOH4g11tVL5kZ)

![](/files/-Md3Uug28m5Tf8cZHAuU)

圖源：<https://k-u-l-a-c-h-e-k.tumblr.com/>
{% endtab %}
{% endtabs %}

## StudioSpass（荷蘭）

網站：<https://studiospass.com/>\
IG：<https://www.instagram.com/studiospass/>

{% tabs %}
{% tab title="\[UN]REAL" %}
{% embed url="<https://www.instagram.com/p/B-hP9sxhVAz/>" %}

更多資訊：<https://www.instagram.com/p/B-hRJG0hY7x/>
{% endtab %}

{% tab title="Zig Zag City" %}
{% embed url="<https://www.instagram.com/p/BG3ZRk1yb1S/>" %}

更多資訊：<https://studiospass.com/work/zig-zag-city-architecture-festival-2/>
{% endtab %}

{% tab title="So Me Thing Kunsthal" %}
{% embed url="<https://www.instagram.com/p/5ynUK5Sb6F/>" %}

更多資訊：<https://studiospass.com/work/so-me-thing-kunsthal/>
{% endtab %}
{% endtabs %}

## studio de ronners（荷蘭）

網站：<https://www.deronners.nl/>\
IG：<https://www.instagram.com/deronners/>

{% tabs %}
{% tab title="IABR" %}
{% embed url="<https://www.instagram.com/p/BwZ0Nk4hnkH/>" %}

更多資訊：<https://www.deronners.nl/projecten/internationale-architectuur-biennale-rotterdam/>
{% endtab %}

{% tab title="Stadsmakerscongres" %}
{% embed url="<https://www.instagram.com/p/B4226KMBXyi/>" %}

更多資訊：<https://www.deronners.nl/projecten/stadmakerscongres/>
{% endtab %}
{% endtabs %}

## Balmer Hählen（瑞士）

網站：<https://www.balmerhahlen.ch/>\
IG：<https://www.instagram.com/balmerhahlen/>

{% tabs %}
{% tab title="Swiss Graphic Design" %}
{% embed url="<https://www.balmerhahlen.ch/wp-content/uploads/2020/04/Composition-1_6_3.mp4>" %}

更多資訊：<https://www.balmerhahlen.ch/projects/swiss-graphic-design/>
{% endtab %}

{% tab title="Rendez" %}
![](/files/-McrcFf2jhBOR7v5F8hm)

![](/files/-McrcWuL2GEc8pJiucSP)

更多資訊：<https://www.balmerhahlen.ch/projects/rendez-vous-des-createurs-2017/>
{% endtab %}
{% endtabs %}

## Main Studio（荷蘭）

網站：[https://mainstudio.com](https://mainstudio.com/digital/ssfb/)\
IG：<https://www.instagram.com/mainstudio/>

{% tabs %}
{% tab title="De School" %}
{% embed url="<https://www.instagram.com/p/CDOPuybBihe/>" %}

更多資訊：<https://mainstudio.com/identity/de-school-2/>
{% endtab %}

{% tab title="Strange Sounds" %}
![](/files/-McrhgdIgRaUgX29fxKz)

![](/files/-McrhmVW1CBiRIFghq7N)

![](/files/-McrhoshXcZL7AVVdzq2)

圖源：<https://mainstudio.com/identity/ssfb/>
{% endtab %}

{% tab title="Zoe" %}
![](/files/-Mcrh0FHcGRRmdhdW-NN)

![](/files/-Mcrh3LFZNzzaU_d_3k8)

更多資訊：<https://mainstudio.com/editorial/zoe/>
{% endtab %}
{% endtabs %}

## UVMW（波蘭）

網站：<http://www.uv-warsaw.com/>\
behance：<https://www.behance.net/uv-warsaw>

{% tabs %}
{% tab title="SALE" %}
![](/files/-McwrLXwfFNMRxNUiciG)

![](/files/-McwrR5LPQAL-ESj3Lsv)

更多資訊：<https://www.behance.net/gallery/73890433/SALE-Stary-Browar>
{% endtab %}

{% tab title="50Brands identity" %}
{% embed url="<https://vimeo.com/349018674>" %}

![](/files/-McwtkD4kgKFb_izUhK4)

更多資訊：<https://www.behance.net/gallery/83100337/50Brands-identity>
{% endtab %}
{% endtabs %}

## a black cover design（中國）

網站：<http://www.ablackcover.com/>\
IG：<https://www.instagram.com/ablackcoverdesign/>\
為廣煜（AGI 會員）和 Nod Young 共同成立的工作室。是探討當代中國 Typography 風格，絕對不能忽略的人物。未來在介紹中國設計工作室的專文裡，再做詳細的介紹。

{% tabs %}
{% tab title="Tokyo TDC 北京展" %}
{% embed url="<https://www.instagram.com/p/B8g3ItrBD_Z/>" %}

更多資訊：<http://www.ablackcover.com/Tokyo-TDC-1>
{% endtab %}

{% tab title="EDITOR" %}
![](/files/-Mcx1sqeFWWlWDqt_F0F)

更多資訊：<http://www.ablackcover.com/EDITOR>
{% endtab %}

{% tab title="湛庐出版" %}
{% embed url="<https://www.instagram.com/p/B5qgPqwg4LK/>" %}

更多資訊：<http://www.ablackcover.com/CHEERS-BOOK-COVER-1>\
其餘動態書封作品，可以在 nodyoung 的 IG 上看到：\
<https://www.instagram.com/p/CA9TqbRh7HI/>\
<https://www.instagram.com/p/B9xw8vEB34S/>
{% endtab %}
{% endtabs %}

## another design（中國）

網站：<http://www.another-lab.com/>\
IG：<https://www.instagram.com/another_liuzhao/>

{% tabs %}
{% tab title="GDC Award 2020" %}
{% embed url="<https://www.instagram.com/p/CO9ULPDhCio/>" %}

![](/files/-Mcx6EWV-5w5m--ViGWM)

圖源：<https://www.instagram.com/p/CPLLGiqBR7F/>\
相關介紹可參考：<https://mp.weixin.qq.com/s/3c8v-IiaiwvSGqQssnqk_w?fbclid=IwAR32nrWFnku7D3p4hDhivkq5TUstXv2vsTethMC4PKxsrBdBSBXRJ40Rb28>
{% endtab %}

{% tab title="廣州影像三年展" %}
![](/files/-Mcx5ESQVpDGYwtun9AO)

![](/files/-Mcx5L_cvFOLT4FZRL5O)

更多資訊：<http://www.another-lab.com/detail.aspx?id=33>
{% endtab %}

{% tab title="廣州三年展" %}
![](/files/-McxAVlZSbvfzUhJSLQ4)

![](/files/-McxA_bMHiItazNDFwNQ)

更多資訊：<http://www.another-lab.com/detail.aspx?id=42>
{% endtab %}
{% endtabs %}

## TRANSWHITE STUDIO（中國）

網站：<https://transwhite.cn/WORK>\
IG：<https://www.instagram.com/transwhitestudio/>

{% tabs %}
{% tab title="Award 360°" %}
{% embed url="<https://vimeo.com/501666375>" %}

![](/files/-Mcx8pfBNyZQJsHSJFvq)

更多資訊：<https://transwhite.cn/Award360-2020>
{% endtab %}

{% tab title="ICPDC 2018" %}
![](/files/-McxAAa8ui2hPuc2DB4A)

![](/files/-McxADDli8CkYkrzQDXy)

更多資訊：<https://transwhite.cn/ICPDC-2018>
{% endtab %}
{% endtabs %}

## TEN BUTTONS（中國）

網站：<https://tian-design.com/>\
Behance：<https://www.behance.net/amandawong>

{% tabs %}
{% tab title="後信息時代" %}
{% embed url="<https://fb.watch/6k01v09mOV/>" %}

![](/files/-McxByzK1ObI3VpRdXnT)

更多資訊：<https://tian-design.com/POST-INFORMATION-ERA-POSTER>
{% endtab %}

{% tab title="廣州美術學院畢業展" %}
![](https://p9.itc.cn/images01/20210516/5828feffb6c146fe802d3e6af6a29368.gif)

更多資訊：<https://gafads.gzarts.edu.cn/#/home>\
相關介紹可參考：<https://mp.weixin.qq.com/s/3c8v-IiaiwvSGqQssnqk_w?fbclid=IwAR32nrWFnku7D3p4hDhivkq5TUstXv2vsTethMC4PKxsrBdBSBXRJ40Rb28>
{% endtab %}

{% tab title="食欲的形狀" %}
![](/files/-McxEXAFiSllBgTujrh2)

![](/files/-McxEfJsVPR4vOPs-lXx)

更多資訊：<https://tian-design.com/SHAPE-OF-APPETITE>
{% endtab %}
{% endtabs %}

## Creative Coding × Graphic Design

在前面的許多案例裡都可以看到，Variable Typography 不僅僅是 Typography 加上了動態設計，更是高度結合 creative coding生成式的設計。這樣的應用雖然在台灣，還比較偏向互動展演取向，[2021 年的放視大賞](https://dcaward-vgw.org.tw/)主視覺，便應用到了類似的技術；可以想見，未來幾年這種技術會更常被應用在平面設計上。

![主視覺設計：三頁文](/files/-Md3FhNTDx0Ms7VRNvid)

這裡推薦一門[線上課程「互動藝術程式創作入門」](https://hahow.in/courses/5d1ba52a0d5f3b0021dbb996/main?item=5ef24bb106d14e92928762a5)給各位。這是我目前在上的課程，也是台灣目前少數有對 creative coding 做系統性、從零開始教起的課程。我沒有程式背景，只有簡單自學過 HTML/CSS 和一點點 Python，但都已經沒碰 2-3 年了，目前上到第十個章節，沒有感受到明顯的技術門檻，我覺得很適合非程式背景的設計人接觸。學完整門課程能做到的什麼程度的作品，[可以參考老師的作品](https://openprocessing.org/user/139364?view=sketches\&o=108)：

![](/files/-Md3Ipyh7itoBHHE5n35)

另外也有朋友推薦 touchdesigner 這個軟體，不過我沒有接觸，但在前面 TEN BUTTONS 所做的廣州美術學院畢業製作的互動設計中，就有應用此軟體。在台灣也有專門的社群討論，不失為一個方向。

### Schultzschultz（德國）

網站：<https://www.schultzschultz.com/>\
Behance：<https://www.behance.net/schultzschultz>\
IG：<https://www.instagram.com/schultzschultzgrafik/>

Schultzschultz 我在 IG 上有追蹤的其中一位擅於結合兩者作出 Variable Typography 應用的設計師，他還有把部分的程式碼直接貼出來，有興趣的人可以參考。

{% tabs %}
{% tab title="FUNKY MR. SALVADOR" %}
![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/3444e7111843635.600abfc37f6df.gif)

更多資訊：<https://www.behance.net/gallery/111843635/FUNKY-MR-SALVADOR-Corporate-Design>
{% endtab %}

{% tab title="Type Experiment" %}
{% embed url="<https://www.instagram.com/p/CPjT2gvCJNK/>" %}

{% embed url="<https://www.instagram.com/p/CNcW-IEiS8P/>" %}

更多資訊：<https://www.behance.net/gallery/82408087/VARIABLE-TYPE-EXPERIMENTS>\
更多資訊：<https://www.behance.net/gallery/82408967/CUSTOM-SOFTWARE>
{% endtab %}
{% endtabs %}