[莊鎧鴻]

Designer

Ethan Chng

Designer

Berkeleytime Typography

Timeline

Sep - Nov 2023

Team

Berkeleytime Design & Engineering Team

Disciplines

Typography

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.

Toggle to see the differences in ligatures

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.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0123456789

0123456789

?/#*@“”.

?/#*@“”.

cv05

Lower-case L with tail

cv06

Simplified u

cv12

Compact f

ss07

Square Punctuation

ss08

Square Quotes

cv13

Compact t

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 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.

Typeface in use on berkeleytime.com.

Ethan's Digital City

[莊鎧鴻]

Designer

Sep 20
5:01 AM

Ethan's Digital City

[数字城市]

Designer

Ethan's Digital City

[莊鎧鴻]

Designer

Sep 20
5:01 AM