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

(&)

(%)

($)

-/\

Variable-Case modular font

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

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

(&)

-/\

[!]

Role

Project Direction,

Design,

Development,

Typography.

Date

Theme

Context

Variable-Case is a modular font created for the Experimental Modular Typography class taught by Darius Ou at LASALLE College of the Arts. Notably, this font's unique trait lies in its ability to switch between uppercase and lowercase letters based on where they sit vertically. I made a website to see the font in action.

Font testing site here vanghoa.github.io/VariableCase.

Take a look at the github repository.

($)

[*]

Initially, the project brief was to choose a fashion designer and craft a modular typeface inspired by that designer, their approach, philosophy, or a specific work. I decided to focus on Martin Margiela, a highly influential figure in the fashion world. What piqued my interest the most was his Spring 1996 Collection.

[=]

-/\

The collection is remarkable for its incorporation of photographs of vintage garments, screenprinted onto plain, blank clothing. This unique approach fosters a captivating dialogue between the past and present. Martin took it a step further by intertwining this concept with deconstruction. He printed the linings of one dress onto the linings of another, blank dress.

(&)

($)

(#)

Past and present, embodied in a single garment. By the same token, my typeface conceptually focuses on the relationship between uppercase and lowercase characters. Functionwise, different letter case variations can emphasize hierarchy, use for abbreviation, control reading flow, act as punctuation, and more, all with the goal of differentiation. This typeface unites both cases into a single silhouette; and the differentiation is achieved simply through moving the character up or down.

-/\

(%)

($)

The typeface is created using two modules that can be resized and reshaped like a variable font. I designed these modules to include one with a straight line and another with a curvy 'c' shape. The variability is intentionally straightforward, focused on size adjustments to maintain a smooth transition between the modules.

[+]

[!]

-/\

[=]

One key design aspect is the use of lowercase shapes for the tops of characters. This involves initially designing each character in lowercase with a consistent x-height, followed by the addition of descenders to create the impression of uppercase letters. This way, when a portion of the text is covered, it will still display the conventional look of the capitals taller than the lowercase.

[+]

-/\

($)

(#)

Besides the default uppercase and lowercase, the typeface also has a variable function allowing custom case (mostly for display purpose because there is already a similar function in Adobe Illustrator–baseline shifting)

-/\

[=]

[!]

-/\

(%)

-/\

Bảo Anh as graphic designer

Darius Ou for consultation

This project was done as part of a course module at LASALLE College of the Arts

Individual Credits

Bao Anh

Darius Ou

Group Credits

LASALLE College of the Arts, SG

Nam Bắc Một Nhà

Measure a machine’s heart

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

[=]

($)

[*]

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

Form & Agency exhibition website

2023-06

(&)

(%)

[!]

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

[+]

-/\

($)

-/\

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.

(&)

(%)

($)

-/\

Variable-Case modular font

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

(&)

-/\

[!]

Role

Project Direction,

Design,

Development,

Typography.

Date

Theme

Context

Font testing site here vanghoa.github.io/VariableCase.

Take a look at the github repository.

($)

[*]

[=]

-/\

(&)

($)

(#)

-/\

(%)

($)

[+]

[!]

-/\

[=]

[+]

-/\

($)

(#)

-/\

[=]

[!]

-/\

(%)

-/\

Bảo Anh as graphic designer

Darius Ou for consultation

This project was done as part of a course module at LASALLE College of the Arts

Individual Credits

Bao Anh

Darius Ou

Group Credits

LASALLE College of the Arts, SG

Nam Bắc Một Nhà

Measure a machine’s heart

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

[=]

($)

[*]

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

Form & Agency exhibition website

2023-06

(&)

(%)

[!]

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

[+]

-/\

($)

-/\

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.

Individual Credits

Group Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

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

Individual Credits

Group Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

Measure a machine’s heart