Text utilities

Use the following classes to modify some text related properties in any element

Font weight

.text-bold { 
  font-weight: bold;
}
.f-w-300 { 
  font-weight: 300;
}
.f-w-400 { 
  font-weight: 400;
}
.f-w-500 { 
  font-weight: 500;
}
.f-w-600 { 
  font-weight: 600;
}
.f-w-700 { 
  font-weight: 700;
}
.f-w-800 { 
  font-weight: 800;
}
.f-w-900 { 
  font-weight: 900;
}

Examples

.f-w-300

Hello world!

.f-w-400

Hello world!

.f-w-500

Hello world!

.f-w-600

Hello world!

.f-w-700

Hello world!

.f-w-800

Hello world!

.f-w-900

Hello world!

.text-bold

Hello world!

Text alignment

.text-left { 
  text-align: left;
}
.text-center { 
  text-align: center;
}
.text-right { 
  text-align: right;
}
.text-justify { 
  text-align: justify;
}

Examples

.text-left

Hello world!

.text-center

Hello world!

.text-right

Hello world!

Text case

.lowercase { 
  text-transform: lowercase;
}
.uppercase { 
  text-transform: uppercase;
}
.capitalize { 
  text-transform: capitalize;
}

Examples

.text-lowercase

Hello world!

.text-uppercase

Hello world!

.text-capitalize

Hello world!

Font size in pixels

.f-s-10 { 
  font-size: 10px;
}
.f-s-11 { 
  font-size: 11px;
}
.f-s-12 { 
  font-size: 12px;
}
.f-s-13 { 
  font-size: 13px;
}
.f-s-14 { 
  font-size: 14px;
}
.f-s-15 { 
  font-size: 15px;
}
.f-s-16 { 
  font-size: 16px;
}
.f-s-17 { 
  font-size: 17px;
}
.f-s-18 { 
  font-size: 18px;
}
.f-s-19 { 
  font-size: 19px;
}
.f-s-20 { 
  font-size: 20px;
}
.f-s-21 { 
  font-size: 21px;
}
.f-s-22 { 
  font-size: 22px;
}
.f-s-23 { 
  font-size: 23px;
}
.f-s-24 { 
  font-size: 24px;
}
.f-s-28 { 
  font-size: 28px;
}
.f-s-32 { 
  font-size: 32px;
}
.f-s-36 { 
  font-size: 36px;
}
.f-s-48 { 
  font-size: 48px;
}
.f-s-64 { 
  font-size: 64px;
}

Examples

.f-s-10

Hello world!

.f-s-14

Hello world!

.f-s-18

Hello world!

.f-s-22

Hello world!

.f-s-28

Hello world!

.f-s-32

Hello world!

.f-s-36

Hello world!

.f-s-48

Hello world!

.f-s-64

Hello world!

Font size in REM

.f-r-5 { 
  font-size: 0.5rem;
}
.f-r-6 { 
  font-size: 0.6rem;
}
.f-r-7 { 
  font-size: 0.7rem;
}
.f-r-8 { 
  font-size: 0.8rem;
}
.f-r-9 { 
  font-size: 0.9rem;
}
.f-r-10 { 
  font-size: 1rem;
}
.f-r-11 { 
  font-size: 1.1rem;
}
.f-r-12 { 
  font-size: 1.2rem;
}
.f-r-13 { 
  font-size: 1.3rem;
}
.f-r-14 { 
  font-size: 1.4rem;
}
.f-r-15 { 
  font-size: 1.5rem;
}
.f-r-16 { 
  font-size: 1.6rem;
}
.f-r-17 { 
  font-size: 1.7rem;
}
.f-r-18 { 
  font-size: 1.8rem;
}
.f-r-19 { 
  font-size: 1.9rem;
}
.f-r-20 { 
  font-size: 2rem;
}

Examples

.f-r-5

Hello world!

.f-r-6

Hello world!

.f-r-7

Hello world!

.f-r-8

Hello world!

.f-r-9

Hello world!

.f-r-10

Hello world!

.f-r-12

Hello world!

.f-r-14

Hello world!

.f-r-16

Hello world!

.f-r-18

Hello world!

.f-r-20

Hello world!