⌘ K
esc

    Font Weight

    Specifies the font weight of an element.

    Classes
    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;
    Examples

    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="card flex flex-wrap align-items-center justify-content-center">
        <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>
    </div>
    
    
    Font Weight

    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.

    • 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="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container">
            <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>
    </div>