typography in doc-site
In this video we will learn how to add or change typography
Introduction
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`](/featured/fonts-typography/).
*Note:* For explanation, we have selected
[`lobster-typography`](https://fastn-community.github.io/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
Lang:
ftd
**B:** Import the `my-types`
-- import: my-types
Lang:
ftd
- **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
my-ds.ftd
Lang:
ftd
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](https://github.com/fastn-stack/fastn/) and join our fastn community
on [Discord](/discord/).
