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 ofdoc-site
.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
.
lobster-typography
FASTN.ftd
document-- fastn.dependency: fastn-community.github.io/lobster-typography as my-types
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
.
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
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.