Typography - Font Family Roboto
<div style="position:relative;padding-top:4rem"> <div class="text-sans-serif container"> <h2 class="h2 mb-5"> <span>Typography - Font Family Roboto</span> </h2> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 1</small> </div> <div class="col-sm-9"> <h1 class="mb-0">H1 Material Design System</h1> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 2</small> </div> <div class="col-sm-9"> <h2 class="mb-0">H2 Material Design System</h2> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 3</small> </div> <div class="col-sm-9"> <h3 class="mb-0">H3 Material Design System</h3> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 4</small> </div> <div class="col-sm-9"> <h4 class="mb-0">H4 Material Design System</h4> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 5</small> </div> <div class="col-sm-9"> <h5 class="mb-0">H5 Material Design System</h5> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 6</small> </div> <div class="col-sm-9"> <h6 class="mb-0">H6 Material Design System</h6> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Lead text</small> </div> <div class="col-sm-9"> <p class="lead mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Paragraph</small> </div> <div class="col-sm-9"> <p class="mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Small</small> </div> <div class="col-sm-9"> <p class="text-sm mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Tiny</small> </div> <div class="col-sm-9"> <p class="text-xs mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> </div> </div>
Typography - Font Family Monospace
<div style="position:relative;padding-top:4rem"> <div class="text-monospace container "> <h2 class="h2 mb-5"> <span>Typography - Font Family Monospace</span> </h2> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 1</small> </div> <div class="col-sm-9"> <h1 class="mb-0">H1 Material Design System</h1> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 2</small> </div> <div class="col-sm-9"> <h2 class="mb-0">H2 Material Design System</h2> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 3</small> </div> <div class="col-sm-9"> <h3 class="mb-0">H3 Material Design System</h3> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 4</small> </div> <div class="col-sm-9"> <h4 class="mb-0">H4 Material Design System</h4> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 5</small> </div> <div class="col-sm-9"> <h5 class="mb-0">H5 Material Design System</h5> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Heading 6</small> </div> <div class="col-sm-9"> <h6 class="mb-0">H6 Material Design System</h6> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Lead text</small> </div> <div class="col-sm-9"> <p class="lead mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Paragraph</small> </div> <div class="col-sm-9"> <p class="mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Small</small> </div> <div class="col-sm-9"> <p class="text-sm mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> <div class="py-3 align-items-center row"> <div class="col-sm-3"> <small class="text-uppercase font-weight-bold">Tiny</small> </div> <div class="col-sm-9"> <p class="text-xs mb-0"> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that's a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p> </div> </div> </div> </div>