Material Design Typography in CSS

Material Design Typography in CSS
Code Snippet:Material Design Type in CSS
Author: liabru
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 349
License: MIT
Edit Code online: View on CodePen
Read More

This code showcases Material Design Typography in CSS. It styles text sizes and weights, creating a structured typographic hierarchy. The CSS defines various text classes for different font sizes, weights, and line heights. This implementation helps maintain consistent and visually appealing text styles throughout a web page.

You can use this code for styling text on your website or web application. It helps create a consistent and visually appealing typographic hierarchy, making your text look neat and organized. One major benefit is that it implements Material Design principles, providing a modern and user-friendly look to your content.

How to Create Material Design Typography In CSS

1. First of all, load the Google Fonts by adding the following CDN link into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">

2. Utilize the HTML structure to implement Material Design Typography classes within your content:

<div class="header-section">
  <div class="container">
    <h3 class="text-display-2">Material Design Type in CSS</h3>
    <h4 class="text-headline">
      <a href="https://github.com/liabru/material-design-type">github</a> /
      <a href="https://www.google.com/design/spec/style/typography.html">specification</a> 
    </h4>
    <h4 class="text-subhead"><a href="http://brm.io">@liabru</a></h4>
    <h4 class="text-caption">(an unofficial implementation)</h4>
  </div>
</div>
<div class="light-section">
  <div class="container">
    <h1 class="text-display-4">Light 112px</h1>
    <h2 class="text-display-3">Regular 56px</h2>
    <h3 class="text-display-2">Regular 45px</h3>
    <h4 class="text-display-1">Regular 34px</h4>
    <h2 class="text-headline">Regular 24px</h2>
    <h3 class="text-title">Medium 20px</h3>
    <h4 class="text-subhead">Regular 16px</h4>
    <div class="text-menu">Medium 14px</div>
    <div class="text-button">Medium 14px</div>
    <div class="text-caption">Regular 12px</div>
    <p class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula erat, dignissim a mollis vel, sollicitudin a leo. Morbi in turpis orci. Nulla lacinia faucibus placerat. Vivamus aliquet aliquam congue. Suspendisse nec tellus eu enim semper commodo at eget quam.</p>
  </div>
</div>
<div class="dark-section">
  <div class="container">
    <h1 class="text-display-4">Light 112px</h1>
    <h2 class="text-display-3">Regular 56px</h2>
    <h3 class="text-display-2">Regular 45px</h3>
    <h4 class="text-display-1">Regular 34px</h4>
    <h2 class="text-headline">Regular 24px</h2>
    <h3 class="text-title">Medium 20px</h3>
    <h4 class="text-subhead">Regular 16px</h4>
    <div class="text-menu">Medium 14px</div>
    <div class="text-button">Medium 14px</div>
    <div class="text-caption">Regular 12px</div>
    <p class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula erat, dignissim a mollis vel, sollicitudin a leo. Morbi in turpis orci. Nulla lacinia faucibus placerat. Vivamus aliquet aliquam congue. Suspendisse nec tellus eu enim semper commodo at eget quam.</p>
  </div>
</div>
<div class="light-section show-grid">
  <div class="container">
    <h1 class="text-display-4">Light 112px</h1>
    <h2 class="text-display-3">Regular 56px</h2>
    <h3 class="text-display-2">Regular 45px</h3>
    <h4 class="text-display-1">Regular 34px</h4>
    <h2 class="text-headline">Regular 24px</h2>
    <h3 class="text-title">Medium 20px</h3>
    <h4 class="text-subhead">Regular 16px</h4>
    <div class="text-menu">Medium 14px</div>
    <div class="text-button">Medium 14px</div>
    <div class="text-caption">Regular 12px</div>
    <p class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula erat, dignissim a mollis vel, sollicitudin a leo. Morbi in turpis orci. Nulla lacinia faucibus placerat. Vivamus aliquet aliquam congue. Suspendisse nec tellus eu enim semper commodo at eget quam.</p>
  </div>
</div>

3. The following CSS contains classes for various text styles. Apply these classes to your HTML elements as needed:

/* 

    by @liabru
    based on material design typography

    http://brm.io/material-design-type
    https://github.com/liabru/material-design-type
    https://www.google.com/design/spec/style/typography.html

*/

/**
 * The MIT License (MIT)
 * 
 * Copyright (c) 2014 Liam Brummitt
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */


body {
    font-family: 'RobotoDraft', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.text-display-4 {
    font-size: 112px;
    font-weight: 300;
    line-height: 128px;
    letter-spacing: -5px;
}

.text-display-3 {
    font-size: 56px;
    font-weight: 400;
    line-height: 64px;
}

.text-display-2 {
    font-size: 45px;
    font-weight: 400;
    line-height: 64px;
}

.text-display-1 {
    font-size: 34px;
    font-weight: 400;
    line-height: 52px;
}

.text-headline {
    font-size: 24px;
    font-weight: 400;
    line-height: 44px;
}

.text-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 44px;
}

.text-subhead {
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
}

.text-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}

.text-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 32px;
}

.text-menu {
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
}

.text-button {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 32px;
}

/* demo page styles */

body {
    margin: 0 auto;
    background: #e8eaf6;
    max-width: 1024px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 8%;
}

h1, h2, h3, h4 {
    margin: 0;
}

p {
    max-width: 40em;
    margin: 8px 0;
}

a:link, a:visited, a:hover, a:active {
    color: #dedede;
    text-decoration: none;
}

.header-section {
    background-color: #5677fc;
    color: #dedede;
}

.header-section .text-display-2 {
    color: #fafafa;
}

.light-section {
    background: #f9f9f9;
    color: #1b1b1b;
}

.dark-section {
    background: #212121;
    color: #dedede;
}

@media all and (min-width: 520px) {
    .header-section,
    .light-section,
    .dark-section {
        padding-left: 128px;
    }
}

.show-grid {
    position: relative;
}

.show-grid:before {
    display: block;
    content: ' ';
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    background-size: 4px 4px;    
    background-image: repeating-linear-gradient(0deg, transparent, rgba(255,0,0,0.3) 1px, transparent 1px, transparent 4px);
}

/* show class names */

.text-display-4:before,
.text-display-3:before,
.text-display-2:before,
.text-display-1:before,
.text-headline:before,
.text-title:before,
.text-subhead:before,
.text-body:before,
.text-caption:before,
.text-menu:before,
.text-button:before {
    font-size: 13px;
    font-weight: 300;
    color: #aaa;
    letter-spacing: 0;
    display: none;
    float: left;
    text-transform: none;
}

@media all and (min-width: 520px) {
    .text-display-4:before,
    .text-display-3:before,
    .text-display-2:before,
    .text-display-1:before,
    .text-headline:before,
    .text-title:before,
    .text-subhead:before,
    .text-body:before,
    .text-caption:before,
    .text-menu:before,
    .text-button:before {
        display: block;
        margin-left: -128px;
    }
}

.text-display-4:before {
    content: 'text-display-4';
    line-height: 126px;
}

.text-display-3:before {
    content: 'text-display-3';
    line-height: 65px;
}

.text-display-2:before {
    content: 'text-display-2';
    line-height: 65px;
}

.text-display-1:before {
    content: 'text-display-1';
    line-height: 53px;
}

.text-headline:before {
    content: 'text-headline';
    line-height: 45px;
}

.text-title:before {
    content: 'text-title';
    line-height: 45px;
}

.text-subhead:before {
    content: 'text-subhead';
    line-height: 32px;
}

.text-body:before {
    content: 'text-body';
    line-height: 25px;
}

.text-caption:before {
    content: 'text-caption';
    line-height: 32px;
}

.text-menu:before {
    content: 'text-menu';
    line-height: 32px;
}

.text-button:before {
    content: 'text-button';
    line-height: 32px;
}

By following these steps, you can effectively implement Material Design Typography in CSS within your web project while maintaining consistency and visual appeal across your text elements.

That’s all! hopefully, you have successfully integrated this Material Design Typography into your project. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X