Learn full-stack web development using fastn in a week
Learn Now
Adding typography

typography in doc-site

In this video we will learn how to add or change typography


Typography refers to the art of arranging and styling typefaces to make written language readable and visually appealing. In the context of website creation, typography plays a crucial role in shaping the overall design and user experience.

It involves selecting appropriate fonts, sizes, spacing, and other typographic elements to enhance the readability, convey the intended message, and establish a visual hierarchy.

Typography is added through a property of page component of doc-site.

Adding Typography

The three steps to adding a typography are:

  • Select the typography of your choice.

    You can create your own typography or you can select it from the featured page.

    Note: For explanation, we have selected lobster-typography
  • Add the typography in your project
A: Add it as a dependency in FASTN.ftd document
-- fastn.dependency: fastn-community.github.io/lobster-typography as my-types
B: Import the my-types
-- import: my-types
  • Use the types property of the ds.page component

    In the previous video, we created the custom component page in the my-ds document

    To highlight the benefit of this approach, there's no need to individually add the typography to each page. Instead, by adding the typography once and using my-ds.page, the color-scheme will be applied to all pages that utilize my-ds.page.

    And if one decides to go for another typography, then changing it once in my-ds document will reflect the new typography across the website.
Using types property
-- component page:
optional caption title:
optional body body:
children wrapper:

-- ds.page: $page.title
body: $page.body
wrapper: $page.wrapper
types: $my-types.types    

;; content goes here

-- end: ds.page

-- end: page

Change the Typography

To change the typography,
  • Select the typography
  • Replace the old typography with new one as dependency
In conclusion, Typography plays a vital role in website creation, impacting readability, visual hierarchy, and brand identity, ultimately leading to a visually appealing and user-friendly website.

Thank you guys, keep watching these videos to learn more about fastn.

Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.
Copyright © 2023 - fastn.com