Specifies the font weight of an element.
Class | Properties |
---|---|
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-light
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="flex border-bottom-1 surface-border w-full">
<p class="font-light mr-3 text-blue-500 text-left w-2">font-light</p>
<p class="font-light w-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="flex border-bottom-1 surface-border w-full">
<p class="font-normal mr-3 text-blue-500 w-2">font-normal</p>
<p class="font-normal w-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="flex border-bottom-1 surface-border w-full">
<p class="font-medium mr-3 text-blue-500 w-2">font-medium</p>
<p class="font-medium w-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="flex border-bottom-1 surface-border w-full">
<p class="font-semibold mr-3 text-blue-500 w-2">font-semibold</p>
<p class="font-semibold w-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="flex border-bottom-1 surface-border w-full">
<p class="font-bold mr-3 text-blue-500 w-2">font-bold</p>
<p class="font-bold w-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:font-bold to use a responsive class.
Class | Description |
---|---|
sm: | small screens e.g. phones |
md: | medium screens e.g. tablets |
lg: | large screens e.g. notebooks |
xl: | larger screens e.g monitors |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="surface-overlay border-round border-1 w-16rem min-h-full p-3 m-3 flex align-items-center justify-content-center">
<p class="font-bold md:font-light">Responsive Font Weight</p>
</div>
</div>