-
|
Hi, It seems the current font size for normal paragraphs is too big (25px). Is there a way to reduce all the font sizes with the same scale factor? For example I like to have the paragraph font to be reduced to 22px so a reduction ratio if 22/25, or 88%. How can I achive a 88% reduction on all the font sizes? Also how to change the line spacing in the paragraphs? |
Beta Was this translation helpful? Give feedback.
Replies: 0 comments 2 replies
-
|
Hi @toorajpro I think a solution for your needs is to modify the tailwind.config.cjs to adjust the Tailwind CSS settings to update the font sizes and line height to the values you want. Also keep in mind that for larger devices in AstroWind we do a proportional adjustment (increase the size of everything) using a class in the HTML tag. <html class="2xl:text-[20px] motion-safe:scroll-smooth">
<!-- rest of the tags -->
</html>The class |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the answer, it was very helpful. However, I tried changing the base font from 20px, which is enforced for devices with a minimum size of 1536 px as you explained, to 18px in the
But it stayed at 20px and didn't change on the website. Do I need to change something else as well? Thanks again for the help. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @toorajpro Try updating <html lang={language} dir={textDirection} class="text-[6px] 2xl:text-[10px]">That will proportionally update all theme fonts using the base font specified in the But if you want to change only the font size of some variations then you can do it with the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks again, What you suggested reduces font sizes. But it it too small. If instead of [10px] I use [18px] then the fonts on blog posts are at size 23px and the font on the main page just under the website title is 18px. How can I change my blog post font size to 18px or 20px and keep the font size on the main page unchanged? |
Beta Was this translation helpful? Give feedback.
-
|
I exaggerated the numbers to see if the change was noticeable. I see it works for you. Now, about the Blog Post, the thing there is that by default we decided to use a larger font than normal to make the content stand out. That is configured in this line: https://github.com/onwidget/astrowind/blob/main/src/components/blog/SinglePost.astro#L91 <div
class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-md lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
>All those classes starting with prose are from the official Tailwind CSS Typography plugin https://tailwindcss.com/docs/plugins#typography You have these classes modifying the font size of the articles: |
Beta Was this translation helpful? Give feedback.
Hi @toorajpro
I think a solution for your needs is to modify the tailwind.config.cjs to adjust the Tailwind CSS settings to update the font sizes and line height to the values you want.
Also keep in mind that for larger devices in AstroWind we do a proportional adjustment (increase the size of everything) using a class in the HTML tag.
The class
2xl:text-[20px]means that the base font for devices with a minimum size of 1536px will be 20px. More details: