TYPE
Interactive Typography Introduction Website Implemented with Vanilla JavaScript
A typography introduction website built with HTML, CSS, and JavaScript. The content is structured across five pages covering the history of typefaces, letter-spacing and leading, size and weight, font showcases, and type designers. Dark mode state is preserved across page transitions using sessionStorage, and a pre-applied inline script eliminates flickering before rendering. Letter-spacing and leading sliders, along with a real-time font typing feature, allow users to explore typographic concepts through direct interaction. Responsive layouts and a toggle navigation are applied with an 851px breakpoint.
Details
Implementation of Interactive Interface
- Ensured code readability and maintainability through a modular JavaScript structure separated by page. Managed common features (dark mode, navigation) in global.js and clearly separated concerns by splitting functionality into individual page scripts.
- Implemented modern JavaScript by actively utilizing ES6+ syntax including const, let, arrow functions, and template literals.
CSS Variables-based Light/Dark Mode Switching System
•Implemented dynamic theme switching utilizing CSS custom properties (--primary-color, --secondary-color).
Saved user theme settings in sessionStorage to maintain state even after page refresh, and optimized user experience by pre-applying themes in scripts before DOM load to prevent FOUC (Flash of Unstyled Content). Also applied smooth theme transition animations using CSS transitions.
Real-time DOM Manipulation and Event Handling
•Implemented real-time style property modification functionality using addEventListener and oninput events. Immediately updated DOM style properties upon value changes in range inputs and select boxes, and implemented input validation and filtering logic using regular expressions.
CSS3 Animation and Responsive Implementation
•Implemented card flip animations using CSS transform and perspective, and created typing effects and slide-in/out animations using keyframes.
Constructed layouts utilizing Flexbox and CSS Grid, and implemented responsive web design using media queries to support various devices ranging from 480px to 2560px.
Web Standards and Performance Optimization
•Implemented structural markup using semantic HTML5 elements (header, nav, main, section, article) and improved accessibility through ARIA attributes and alt tags.
Considered browser compatibility through CSS normalization (normalize.css) and reset, and improved rendering performance through web font preload. Optimized user experience by pre-preparing necessary resources during initial page load along with background video preload.