*--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--*

(&)

(%)

($)

-/\

Form & Agency exhibition website

A typeface designed with generative ligatures, complemented by a website that maximizes this concept.

---~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~-

(&)

-/\

[!]

Role

Development,

Design,

Website,

Digital tool,

Experimental,

UI/UX,

Typography.

Date

Theme

Context

1. Visit the “type generation tool” site here vanghoa.github.io/AsAboveSoBelow/oldsite/

Take a look at the github repository.

2. Visit the exhibition site here formandagency.net or formandagency.vercel.app

Take a look at the github repository.

3. Visit the “AI text” site here vanghoa.github.io/AsAboveSoBelow/.

Take a look at the github repository.

Form & Agency exhibition by Brandon Tay introduces a body of work that explores the materiality of the digital, through an engagement with 3D-printed sculptures, live-simulations, and virtual ecosystems. The exhibition’s visual identity, designed by Darius Ou, specifically places a spotlight on the innovative variable typeface As Above, So Below. This typeface, characterized by its elongated ascenders and descenders, deliberately echoes the verticality of the stacks. It boasts the unique capability of forming 'vertical ligatures' not between adjacent letters but across lines of text.

In font technology, there's a thing called a 'Ligature,' which is an OpenType feature. It's when two or more adjacent letters are combined into a single glyph horizontally.

($)

[*]

With the font As Above, So Below, the ligature becomes vertical like this.

[=]

-/\

However, there isn't an existing OpenType feature for this particular type of ‘weird’ ligature. Moreover, creating the vertical ligature is a more intricate technical process than the usual ligature because it relies on the positioning of letters vertically adjacent, which can shift significantly when we adjust the width of the text box.

(&)

($)

(#)

That's when Darius approached me for a collaboration, with the goal of bringing this feature to life through coding.

1/ Type Tool:

Technically, Darius could use the font without coding, but it would require painstaking manual calculation and replacement of each character with its long-ligature counterpart. To simplify and streamline this process, my primary task was to develop a tool that would enable Darius to efficiently implement the font across all design assets. The tool would be written in Javascript and deployed as a website for convenient use.

As I mentioned earlier, one of the most challenging thing about this is accurately determining the position of every letter within each line. To achieve this, it's crucial to identify the location of every line break.

-/\

(%)

($)

As of my front-end knowledge at the time, there was no possible way to do this. After much lookups, I came across this article by Ben Nadel bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node-in-javascript.htm. He made use of ‘Range’, a Web API representing a fragment of a document that can contain nodes and parts of text nodes. What’s really cool about this ‘Range’ object is that it can return a collection of separate text lines as they are visually rendered on the screen. I would go so far as to say that the 'Range' interface serves as the core engine driving this entire project.

[+]

[!]

Another notable point is that because the width of each character varies, even a minor change like replacing, removing, or inserting a single letter can have a significant impact on the ligatures of all the other characters. Within this font, the rule is that the ligature joint can only connect to the permitted stems of other characters.

-/\

[=]

A bit about this font’s construction: In order to allow for chances of ligature connections, Darius designed everything within this font in a grid of 70-unit-width-columns, in which the permitted connected stems have to fit within any column.

[+]

-/\

($)

(#)

Every single character has a distinct width divisible by 70, with specific permitted stem and ligature positions. That’s why I had to prepare a collection storing those information for each character. To facilitate the ligature calculation process down the line, I compiled a collection to store this information for every character.

-/\

[=]

[!]

-/\

However, there was one potential problem that could ruin the entire thing, kerning. The kerning behavior varies drastically from browsers to browsers, especially in Safari. To render a specific ligature for a character, I had to isolate that character within a <span> tag. Unfortunately, in Safari, this process removed all the kerning settings for that character.

With this in mind, I had to resort to manual kerning instead of depending on CSS styling. One big problem was how to extract kerning information from a font because the kerning data in a font is so enormous to be manually added. I assumed there would be built-in support within the browser to access this kerning data, but I was surprised to find that such support didn't exist.

After a bit of digging on the internet, I stumbled upon opentype.js, which was basically the lifesaver I was looking for. The tool will provide kerning pairs data for those isolated characters to be manually adjusted.

-/\

(%)

-/\

One last notable challenge was exporting vector files for Darius to use in his designs. I scoured various plugins and tools to export vector from the DOM, but either they were too complex to use or mysteriously stripped the font data from the vector files. However, the solution eventually revealed itself when I realized I could simply use the 'print' function within the browser. It turned out that the printed PDF files were actually vectorized, which was a pleasant surprise I hadn't anticipated.

Visit the site here vanghoa.github.io/AsAboveSoBelow/oldsite/

Take a look at the github repository.

(&)

-/\

($)

(#)

[=]

-/\

(%)

-/\

Photography by Jonathan Tan @jonathantyl

I even went as far as creating an Indesign script so that it can be even more adjustable within the design softwares. No need to switch to a separate online tool, streamlining the process.

-/\

[=]

-/\

2/ Website Development:

This website is another tiring journey to develop. I started the process of design and development all together just two weeks before the exhibition's opening, which was a hectic speed run.

Visit the site here formandagency.net or formandagency.vercel.app

Take a look at the github repository.

Here's an extraction from Darius's writings on the exhibition visual identity: ‘We think of ligatures as inherently generative, (connecting/aligning parts of letters) yet born from adversarial conditions (clashing of letters' forms). One of the concepts (borrowed from biology) in cybernetics is autopoiesis: described as living entities/ machinic systems with versatile adaptive behavior capable of maintaining themselves, grow, and reproduce. 𝘈𝘴 𝘢𝘣𝘰𝘷𝘦, 𝘴𝘰 𝘣𝘦𝘭𝘰𝘸—through code—gains the ability to form vertical ligatures across lines, binding entire texts as 'organisms'. These texts adapt to external (adversarial) influences, re-organise, and react; while always maintaining these ligatures through letter stem(cells), rhizomatic, shapeshifting into new forms.’

The website continues the identity's obsession with the threshold, this time splitting the browser into 2 separate spaces. The navigation bar texts exist in a space of their own, linked to the content space on the right. This allows for the 'live' texts to be shaped by the browser, and in turn, the typeface adapts to the space.

[+]

-/\

[!]

[*]

For this website, I opted for Next as the primary framework. However, this time, I skipped using Typescript due to time constraint. Also, I didn’t have enough time to learn it since my last Next website during my graduation project, "Nam Bắc Một Nhà.”

-/\

(%)

[!]

A few days after the website's launch, we received feedback indicating that the ligatures were causing some legibility issues with the text. To address this, I promptly implemented a solution by adding a button that allowed users to toggle the ligature view. On mobile devices, the ligatures were set to be turned off by default.

(&)

(%)

($)

-/\

($)

(#)

Here is the loading animation.

-/\

Here is how the ligature recalculates every resize.

(%)

(#)

3/ ETYM(YTH)OLOGY:

Throughout the identity development process, Darius crafted a fictional lore for the typeface as an integral part of the exhibition. This lore wove together a series of ideas rooted in the etymologies of the Latin alphabet, interwoven with semi-fictional myths. He published them on Instagram www.instagram.com/p/CxP1EbJSv_W/?img_index=7.

[+]

-/\

(#)

This is a fun work I did on top of this written, using gpt-3.5-turbo API. It’s still a WIP because I initially attempted to fine-tune the model to better comprehend the lore, but that didn't go as planned. In the future, I'm considering alternative methods, such as using embeddings, to integrate chat responses as part of the written lore.

Visit the site here vanghoa.github.io/AsAboveSoBelow/.

Take a look at the github repository.

[=]

-/\

Bảo Anh as web designer and creative coder

Darius Ou as design director and graphic designer

This project was done for Brandon Tay’s exhibition–Form and Agency, curated by Rafi Abdullah

Individual Credits

Singapore Art Week 2023

Other works

*-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --*

(&)

-/\

[!]

Various development works I contributed to during the time in Tusitala, a creative storytelling/literary art company based in Singapore

Works at Tusitala

2024-02

[!]

(#)

An artist website focusing on claiming the traces left behind during a web development process, pondering the question of how we can observe the growth of a web page.

Victoria Hertel Velasco website

2023-11

-/\

($)

[*]

Backend development for a website exploring the impacts of digital culture on creative expression, by Singapore Art Museum.

Open Systems website

2023-11

[=]

($)

[*]

My final year project, delving into the longlasting division between North and South Vietnam, intricately woven with my family's personal stories.

Nam Bắc Một Nhà

2023-01

(&)

(%)

[!]

A font that when moved up, it becomes uppercase; moved down, it's lowercase.

Variable-Case modular font

2023-02

[+]

-/\

($)

-/\

Visualization of human passion inside web developer tools.

Measure a machine’s heart

2023-05

--^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~-

(%)

($)

Waiting...

**********************************************************************************************************************************

--^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~-

-/\

Site is built on Next.js with Tailwind CSS. CMS is from Notion API with react-notion-render ↗︎ by @9gustin for data rendering and upload-notion-images-to-cloudinary ↗︎ by @guillermodlpa for hosting images form Notion to Cloudinary. You can view the database on Notion here notion link ↗︎. Other dependencies include Prisma + PostgreSQL, Framer Motion, probe-image-size, seedrandom, react-lazy-load, ... See the Github repository of the site here github link ↗︎.

Typeface is Alegreya ↗︎ designed by Juan Pablo del Peral, Huerta Tipográfica. Mono typeface is Select Mono ↗︎ designed by MICHAEL McMASTER.

The idea of the site can be observed via the 3D View of the developer tool of Microsoft Edge. Inspect the site to see.

(&)

(%)

($)

-/\

Form & Agency exhibition website

A typeface designed with generative ligatures, complemented by a website that maximizes this concept.

(&)

-/\

[!]

Role

Development,

Design,

Website,

Digital tool,

Experimental,

UI/UX,

Typography.

Date

Theme

Context

1. Visit the “type generation tool” site here vanghoa.github.io/AsAboveSoBelow/oldsite/

Take a look at the github repository.

2. Visit the exhibition site here formandagency.net or formandagency.vercel.app

Take a look at the github repository.

3. Visit the “AI text” site here vanghoa.github.io/AsAboveSoBelow/.

Take a look at the github repository.

In font technology, there's a thing called a 'Ligature,' which is an OpenType feature. It's when two or more adjacent letters are combined into a single glyph horizontally.

($)

[*]

With the font As Above, So Below, the ligature becomes vertical like this.

[=]

-/\

(&)

($)

(#)

That's when Darius approached me for a collaboration, with the goal of bringing this feature to life through coding.

1/ Type Tool:

-/\

(%)

($)

[+]

[!]

-/\

[=]

[+]

-/\

($)

(#)

-/\

[=]

[!]

-/\

(%)

-/\

Visit the site here vanghoa.github.io/AsAboveSoBelow/oldsite/

Take a look at the github repository.

(&)

-/\

($)

(#)

[=]

-/\

(%)

-/\

Photography by Jonathan Tan @jonathantyl

I even went as far as creating an Indesign script so that it can be even more adjustable within the design softwares. No need to switch to a separate online tool, streamlining the process.

-/\

[=]

-/\

2/ Website Development:

This website is another tiring journey to develop. I started the process of design and development all together just two weeks before the exhibition's opening, which was a hectic speed run.

Visit the site here formandagency.net or formandagency.vercel.app

Take a look at the github repository.

[+]

-/\

[!]

[*]

-/\

(%)

[!]

(&)

(%)

($)

-/\

($)

(#)

Here is the loading animation.

-/\

Here is how the ligature recalculates every resize.

(%)

(#)

3/ ETYM(YTH)OLOGY:

[+]

-/\

(#)

Visit the site here vanghoa.github.io/AsAboveSoBelow/.

Take a look at the github repository.

[=]

-/\

Bảo Anh as web designer and creative coder

Darius Ou as design director and graphic designer

This project was done for Brandon Tay’s exhibition–Form and Agency, curated by Rafi Abdullah

Individual Credits

Singapore Art Week 2023

Other works

(&)

-/\

[!]

Various development works I contributed to during the time in Tusitala, a creative storytelling/literary art company based in Singapore

Works at Tusitala

2024-02

[!]

(#)

An artist website focusing on claiming the traces left behind during a web development process, pondering the question of how we can observe the growth of a web page.

Victoria Hertel Velasco website

2023-11

-/\

($)

[*]

Backend development for a website exploring the impacts of digital culture on creative expression, by Singapore Art Museum.

Open Systems website

2023-11

[=]

($)

[*]

My final year project, delving into the longlasting division between North and South Vietnam, intricately woven with my family's personal stories.

Nam Bắc Một Nhà

2023-01

(&)

(%)

[!]

A font that when moved up, it becomes uppercase; moved down, it's lowercase.

Variable-Case modular font

2023-02

[+]

-/\

($)

-/\

Visualization of human passion inside web developer tools.

Measure a machine’s heart

2023-05

08/2019 →05/2023 (expected)	LASALLE COLLEGE OF THE ARTS Singapore Diploma in Design for Communication and Experiences For the AY 2021 - 2022, I take a gap year to return to my hometown, Vietnam. I will be coming back to Singapore this August 2022 to resume my study.
09/2016 →05/2019	HIGHSCHOOL FOR THE GIFTED—VNUHCM Vietnam High School Diploma

08/2022 →10/2022	PRACTICE THEORY Graphic Design Intern – Communication & Visual Designer for the Singapore-based creative studio
07/2021 →12/2021	THE LAB SAIGON Junior Graphic Designer – Communication & Visual Designer for the Saigon-based creative agency
05/2019	INTEL PRODUCTS VIETNAM Independent Freelance Illustrator – Stage Background Illustrator for the company’s year-end event.
2017 →Now	SMALL MEDIUM ENTERPRISES Freelancer in Graphic Design – Responsible for the visual images, graphics, illustrations and concepts for clients’ needs.

07/2022	D&AD New Blood Academy – Participant.
01/2022 →03/2022	Google Developer Solution Challenge 2022 – Participant.
09/2021 →04/2022	Google Developer Student Club - UIT – Development team.
05/2021 →10/2021	Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts. – Graphic Design Consultation.
10/2020 →01/2021	Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam. – Website Development, Graphic Design.
10/2017 →01/2018	Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues. – Graphic Design, Illustration.
08/2017 →08/2018	Project Sugar—a non-profit student-run organisation dedicated to underprivileged children – Graphic Design, Illustration, Art Direction.

2022	D&AD NEW BLOOD YELLOW PENCIL – Awarded 2022 Yellow Pencil by D&AD New Blood for the entry Duolingo: Non-fungible Efforts.
2021	RED DOT JUNIOR AWARD – Awarded “Red Dot Junior Award” under Red Dot Award: Brands & Communication Design by Red Dot Award in 2021.
2021	CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67 – Awarded “Certificate of Typographic Excellence” in TDC67 by Type Directors Club and will be included in the Annual of the Type Directors Club, The World’s Best Typography.
2020	LASALLE SCHOLARSHIP 2020-2021 – Awarded LASALLE Scholarship 2020–2021 to cover my tuition fee for my great performance at LASALLE College of the Arts.
2019	LASALLE TUITION GRANT – Awarded 60% merit-based tuition grant for my tuition fee in the diploma at LASALLE College of the Arts.

1/ Type Tool:

2/ Website Development:

3/ ETYM(YTH)OLOGY:

Individual Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Nam Bắc Một Nhà

Variable-Case modular font

Measure a machine’s heart

LASALLE COLLEGE OF THE ARTS

HIGHSCHOOL FOR THE GIFTED—VNUHCM

PRACTICE THEORY

THE LAB SAIGON

INTEL PRODUCTS VIETNAM

SMALL MEDIUM ENTERPRISES

– Proficient with the following Digital Softwares:

– Familiar with the following Digital Softwares:

– Technical Skills:

D&AD New Blood Academy

Google Developer Solution Challenge 2022

Google Developer Student Club - UIT

Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts.

Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam.

Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues.

Project Sugar—a non-profit student-run organisation dedicated to underprivileged children

D&AD NEW BLOOD YELLOW PENCIL

RED DOT JUNIOR AWARD

CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67

LASALLE SCHOLARSHIP 2020-2021

LASALLE TUITION GRANT

1/ Type Tool:

2/ Website Development:

3/ ETYM(YTH)OLOGY:

Individual Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Nam Bắc Một Nhà

Variable-Case modular font

Measure a machine’s heart