Font Weight

Specifies the font weight of an element.

ClassProperties
font-lightfont-weight: 300;
font-normalfont-weight: 400;
font-mediumfont-weight: 500;
font-semiboldfont-weight: 600;
font-boldfont-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.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors

Responsive Font Weight

<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>