Logo

typography

24 items
Blog Posts(5)
  • Weekly Design Documentaries Free Streaming — Helvetica

    Independent film director Gary Hustwit announced to offer free streaming of his past work to encourage people staying home. First title would be his typography documentary Helvetica (2007).

  • Design Documentaries

    Catching up with some design documentaries in the last few months during quarantine, here's my recommended list! The two-season documentary series highlight artists across various fields of design. Each episode is an in-depth look of how design is implemented around our everyday life. @abstractdesign Watch Now Discover the history and cultural impact of the famous typeface Helvetica, also known as

  • Custom Fonts with Tailwind CSS in NextJS

    Next has released @next/font solution to integrate with google fonts as well as local fonts. Check out https://nextjs.org/docs/pages/building-your-application/optimizing/fonts for the latest implementation There isn't an official guide on applying custom fonts with TailwindCSS in NextJS site. It took a while for me to experiment but turns out it's quite easy to do it yourself. So following the def

  • Create Sparkline Charts Without Any Code Using Sparks

    Sparkline is a tiny chart to visualise trends of a series of data values. After The Flood created Sparks font to generate sparkline chart using a line of text, no Excel or any design software is required. Therefore you can use it anywhere, like Powerpoint, website or basically anywhere you can think of. Sparks used OpenType’s context alternative feature to create a dot that is proportionate to the

  • Fluid Typography

    I recall making font sizes fluid and scale in ratio according to the viewport was not an easy task few years ago. Here's the formula I had bookmarked from css-tricks.com ```css body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); } ``` Introducing `clamp()`, a css function that i

  • Resources(19)