Typography & Interaction I, Fall 2025
For the third project for Typography & Interaction, I created a multi-page "binding" of digital articles exploring three perspectives on design history education.
This project consists of three texts that challenge traditional approaches to graphic design history, including my chosen reading from Project 1:
- "Knowing Your Design History Is Crucial to Aesthetic Innovation" by Kristen Coogan: Explores how understanding historical style cycles informs contemporary design innovation.
- "We Need Graphic Design Histories That Look Beyond the Profession" by Aggie Toppins: Advocates for expanding design history beyond the profession to include cultural and social contexts.
- "Can We Teach Graphic Design History Without the Cult of Hero Worship?" by Aggie Toppins: Questions the traditional focus on individual "design heroes" in favor of contextual understanding.
The visual design is inspired by Geronimo Stilton children's books, which use playful typography and engaging visual hierarchies to make reading more dynamic and entertaining.
- Instrument Sans (variable font): Primary body text
- Instrument Serif: Headings and emphasis
- Font faces loaded via
@font-facein CSS files
- Mobile-first approach with main breakpoints at 500px and 850px, few at 415px
- Responsive typography scaling across devices, checking for legibility
- Adaptive + experimental grid layouts for optimal reading experience (I saw a good amount of mobile articles laid out in single-column, so I wanted to try switching it to multi-column layouts. And for desktop dimensions, I wanted to introduce single-column layouts rather than various multi-column ones, essentially reversing what I typically expect from today's online articles and their responsive forms.)
Three distinct cool color palettes for each article:
- Style Cycles: Green palette (
#c6e3c7,#87BBA1,#47928b,#1c6364,#162E30) - People's Design: Teal palette (
#D4F6F5,#87AFBB,#3A7485,#0C4655,#132228) - De-heroizing: Blue palette (
#D4E9F6,#879ABB,#3A4F85,#012B62,#161328)
CSS-generated geometric patterns for visual interest:
- Circular CSS background patterns: CSS Pattern Generator
- Rotating book stack SVG on homepage: SVGRepo - Books Stack Icon
- Infinite rotating animation with responsive scaling - tutorial from SVG Tutorial
Inspired by Geronimo Stilton's expressive text treatments:
.slant/.slant2: Slightly rotated text for emphasis.stroke: Text with thin stroke outline.shadow: Drop shadow effect.space: Letter-spaced italic text.shimmer: Animated gradient text effect - inspiration from Julien Thibeaut.geronimo: Orange serif text format - dedicated to Geronimo Stilton
- Home page navigation banners with color-coded sections
- Top navigation bar with theme titles for each respective article
- Active state indicators
- Clean hover states
- Simpler footer navigation bar for easy navigation to the top of the article or the home page
- Sticky numbered/lettered labels for paragraph navigation
- Highlighted (
<mark>) for key concepts - Italicized (
<em>) for emphasis on certain key terms/words - Pull quotes with custom styling + alignment changes based on device dimensions
- Grid-based layouts, with multi-column layout on smaller screens and single-column layout on larger screens
-
<header>- Contains site hero and article titles
- Houses SVG graphic on home page and primary headings, like author and published date
-
<main>- Contains navigation, articles, and figures
-
<article>- Semantic wrapper for essay content
-
<section>- Groups related content thematically
.parasections create reading rhythm.introand.colophonprovide framing content on home page
-
<nav>- Primary navigation in header
- Footer navigation for article traversal
- Unordered lists for semantic navigation menu structure
-
<footer>- Copyright information
- Secondary navigation
- Consistent across all pages
<h1>: Page/article title (one per page)<h2>: Not used (intentional flat hierarchy)<h3>: Section subheadings on homepage- Nested
<span>elements for color differentiation
<p>: Paragraphs with various classes (.pg,.context,.label)<em>: Semantic emphasis in italics<mark>: Highlighted phrases for visual + semantic importance<blockquote>: Pull quotes from article text- Custom
<span>classes for decorative typography
<a>- Navigation between pages and file directory
- External attribution links in
<figcaption>
<svg>: Inline animated book stack icon for home page decoration<img>: Cover image with lazy loading that speaks to all three article themes<figure>+<figcaption>: Semantic image structure
.dark-line,.line: Decorative banner separators.title-sec: Title section container.og-text: Original publication info.context: Article introduction quote.para: Paragraph container with grid layout.pg: Paragraph text content.bq: Blockquote.label: Sticky numbered/lettered labels.intro,.colophon: Homepage sections
Based on The New CSS Reset by Elad Shechter
- CSS Grid for complex layouts
- CSS Custom Properties (variables) for theming
- Container queries with
@media - CSS animations and transforms
- Logical properties (
margin-block,padding-inline) text-wrap: balanceandtext-wrap: prettyfor optimal text breaks
- Semantic HTML structure
- Sufficient color contrast ratios
- Responsive font sizing
- CSS document with heading hierarchy
"What is Design?" Poster of Elena Pacenti's Work
- Source: Instagram @thecharliefund
- Exploring multiple definitions of design