About

Ideas

CV

HUMAN INTERFACE

Apple

GoodNotes

Web interface

Berkeleytime

GradTrak

Typography

Marqeta

SSO Forms

Bulk-Add /Users

PropertyGuru

Notifications

Web

CONTACT

Mail

Twitter

LinkedIn

read.cv

About

Ideas

CV

HUMAN INTERFACE

Apple

GoodNotes

Web interface

Berkeleytime

GradTrak

Typography

Marqeta

SSO Forms

Bulk-Add /Users

PropertyGuru

Notifications

Web

CONTACT

Mail

Twitter

LinkedIn

read.cv

About

Ideas

CV

Berkeleytime – Typography

Redefining hierarchical typefaces

At Berkeleytime, I led redefining how typography is used throughout the website. Switching from regular 'Inter' to a modern 'Inter Variable V4' with OpenType features, the new adopted typeface uses some alternative ligatures for various glyphs to enhance legibility and make it feel distinctly 'Berkeleytime'. The typeface, Inter, is designed by Rasmus Andersson.

Timeline

Sep - Nov 2023

Team – Berkeleytime Product

Design team

Engineering team

Tools

Figma

OpenType

Disciplines

Typography

Toggle to see the differences in ligatures

Toggle to see the differences in ligatures

With a 'compact t' alternative ligature, the left terminal is removed, resulting in a tighter kerning between the 'y' and 't' characters. This makes the individual words 'Berkeley' and 'time' feel more like one cohesive brand for the logotype.

With a 'compact t' alternative ligature, the left terminal is removed, resulting in a tighter kerning between the 'y' and 't' characters. This makes the individual words 'Berkeley' and 'time' feel more like one cohesive brand for the logotype.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0123456789

0123456789

?/#*@“”.

?/#*@“”.

cv05

Lower-case L with tail

cv06

Simplified u

cv12

Compact f

cv13

Compact t

ss07

Square Punctuation

ss08

Square Quotes

01234567890

Various OpenType alternative ligatures were used to make 'Inter' feel more like a playful heading typeface that strays away from traditional neo-grotesque typefaces.

Various OpenType alternative ligatures were used to make 'Inter' feel more like a playful heading typeface that strays away from traditional neo-grotesque typefaces.

Desktop UI Typeface for informational pages like Home & About. Headings for these pages adopt the OpenType alternative ligatures.

Desktop UI Typeface for informational pages like Home & About. Headings for these pages adopt the OpenType alternative ligatures.

Desktop UI Typeface for Catalog, Scheduler, Grades, GradTrak, and Enrollment. This typeface hierarchy uses traditional default ligatures for better legibility at small type sizes.

Desktop UI Typeface for Catalog, Scheduler, Grades, GradTrak, and Enrollment. This typeface hierarchy uses traditional default ligatures for better legibility at small type sizes.

Mobile UI Typeface for Catalog, Scheduler, Grades, GradTrak, and Enrollment.

Mobile UI Typeface for Catalog, Scheduler, Grades, GradTrak, and Enrollment.

Typeface in use on berkeleytime.com.

Typeface in use on berkeleytime.com.