Tailwind Crash Course - Project Based Learning
Letter Spacing
Letter space is the space in between the letters. Huge disclaimer on this one. We’ve been talking about rem a lot but we never talked about em. Yes! Letter spacing is measured in em not rem. Difference between em and rem, is that em uses the parent element’s font-size not the document. If you have a nice text-6xl, the letter spacing there is going to be based off of it’s parent. So, it is going to be based off of 64px. As I suppose to rem which would always be represented by 16px because it is base font size of entire document. Why does this make sense because letter spacing is based on the font size that it is. If it is based of it font size 16 then it really wouldn’t work at a big font size , your letter spacing would be totally off. It would not be enough. So that’s why tracking is based on ems not rems.
.tracking-{spacing}
|
Spacings |
Font Weights |
|
tighter tight normal wide wider widest |
-0.05em -0.025em 0em 0.025em 0.05em 0.1em |
📌 Note: Tracking is in em unit not in rem
em unit is based on parent element’s size, not the document
Let’s try .tracking-wider in <p> tag
<p class="italic tracking-wider">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci ac nisl varius varius. <span class=“font-black”>Nullam auctor finibus pulvinar.</span> Morbi porttitor placerat enim nec consequat.
</p>In result below, you can see a lot more space in between words.
