Typography

Cascade UI uses Rubik, as its default font. The typography includes global settings for headings, body text, font weight, and more. Various styles and sizes of text can be created according to their respective class names.

Very Large Text
Large Text
Medium Text
Normal Text
Small Text
Very small text

Heading 1

Heading 2

Heading 3


Gray Text
Text strike

Light Weight
Regular Weight
Medium Weight
Semibold Weight
Bold Weight

Left Text
Centered Text
RightText
                    
                <!-- Rubik Font Family @credits - Google(https://fonts.google.com/) -->

                <!-- @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap');-->

                <div class="t3">Very Large Text</div>
                <div class="t2">Large Text</div>
                <div class="t1p5">Medium Text</div>
                <div class="t1">Normal Text</div>
                <div class="t0p75">Small Text</div>
                <div class="t0p5">Very small text</div>
                
                <h1 class="h1">Heading 1</h1>
                <h2 class="h2">Heading 2</h2>
                <h3 class="h3">Heading 3</h3>
                
                <div class="gray-color">Gray Text</div>
                <div class="text-strike">Text Strike</div>

                <div class="t1p5 light">Light Weight</div>
                <div class="t1p5 regular">Regular Weight</div>
                <div class="t1p5 lightbold">Medium Weight</div>
                <div class="t1p5 semibold">Semibold Weight</div>
                <div class="t1p5 bold">Bold Weight</div>
                
                <div class="text-left">Left Text</div>
                <div class="text-center">Centered Text</div>
                <div class="text-right">Right Text</div>