Material Symbols Outlined

.example-class {font-family: 'Material Symbols Outlined';}

Material Symbols Outlined

Thin

ExtraLight

Light

Medium

SemiBold

Bold

Material Symbols Outlined is classified as a monospace font, where each character occupies the same amount of horizontal space, ideal for code and tabular data.

Display

Handwriting

Monospace

Sans-serif

Serif

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ( ) + =

Material Symbols Outlined Used As Heading Examples

Hierarchy	Weight	Size	Line Height	Letter Spacing
Heading Level 1	Bold	64px	64px	0px
Heading Level 2	SemiBold	48px	64px	0px
Heading Level 3	Medium	32px	48px	0.5px
Heading Level 4	Regular	24px	32px	0.5px
Heading Level 5	Regular	16px	24px	0.5px
Heading Level 6	Medium	13px	16px	0.5px

Material Symbols Outlined Used As Body Text

Element	Weight	Size	Line Height	Letter Spacing
Body Text	Regular	16px	24px	0.5px
Italicized	Regular Italic	16px	24px	0.5px
Bold	Bold	16px	24px	0.5px
Small Caps	Regular	16px	24px	0.5px
Secondary Text	Medium	13px	16px	0.5px

Fonts Similar to Material Symbols Outlined

Material Icons Round

Anonymous Pro

B612 Mono

Source Code Pro

Red Hat Mono

How to Embed Material Symbols Outlined in Your Project

Using a <link> tag in HTML

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet">

Using @import in CSS

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap');

Using @font-face in CSS

@font-face { font-family: 'Material Symbols Outlined'; src: url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap'); }

CSS Code Examples

.example-class { font-family: 'Material Symbols Outlined'; }

Standard CSS Utilization: Applying the font-family directly to a CSS class for immediate use.

// SCSS Variable $example-class-font-family: 'Material Symbols Outlined'; .example-class { font-family: $example-class-font-family; }

SCSS Variable: Defining the font-family in a variable for reuse across multiple styles, simplifying maintenance and updates.

// Tailwind CSS .example-class { @apply font-material-symbols-outlined-monospace; }

Tailwind CSS Implementation: Using Tailwind CSS utility classes provides a consistent and streamlined way to apply styles, leveraging Tailwind's utility-first approach.

Material Symbols Outlined's Details

Material Symbols Outlined is a font developed by Google. Material Symbols Outlined, Material Symbols Outlined, is part of the broader Material Symbols family, which Google introduced to enhance its Material Design system. The font emerged to provide a consistent and versatile collection of symbols that integrate seamlessly with Google's design principles. The font's design characteristics include a clean, geometric style with an emphasis on simplicity and clarity. Each symbol is crafted with precise lines and balanced proportions. The outlined nature of the symbols gives them a lightweight appearance, making them easily readable at various sizes. The font features a wide range of icons, covering diverse categories like user interface elements, communication tools, and multimedia controls. Material Symbols Outlined is widely used in web and mobile applications. Designers and developers often think about this font for its versatility and cohesive look. It's suitable for user interfaces because the outlined symbols maintain legibility without overwhelming the design. The font supports various weights and sizes, allowing for flexibility in different design contexts. Notable features of Material Symbols Outlined include its comprehensive library of symbols and consistent visual style. The font offers a cohesive experience across different platforms and devices. It's also integrated with Google's design tools, making it easy for designers to implement the symbols in their projects. The outlined style ensures the symbols remain clear and unobtrusive, catering to modern design aesthetics. The font's history reflects Google's commitment to enhancing digital communication through well-designed, accessible iconography. Material Symbols Outlined continues to evolve, with regular updates adding new symbols and refining existing ones. The font's development is driven by user feedback and emerging design trends, ensuring it remains relevant and useful in various design scenarios.

Accessibility Overview for Material Symbols Outlined

Material Symbols Outlined is a font that offers a wide range of design variants, consolidating over 3,276 glyphs in a single font file. The font is designed with a focus on providing a comprehensive set of icons for various applications. Its key design characteristics include clean and light stroke and fill attributes, making it suitable for use in dense user interfaces and applications where clarity and simplicity are essential. This font is commonly used for representing common actions and elements in digital interfaces, such as buttons, navigation elements, and informational indicators.

Material Symbols Outlined's Legibility

The legibility of Material Symbols Outlined is enhanced by its well-balanced spacing, which allows for clear differentiation between individual glyphs. The font's moderate x-height contributes to its legibility, ensuring that characters are easily distinguishable at various sizes. Additionally, the use of outlined symbols with stroke and fill attributes creates a light and clean style, further aiding character differentiation and readability.

Material Symbols Outlined's Readability

In terms of readability, Material Symbols Outlined performs well in various contexts. It is suitable for captions and digital displays due to its clear and distinct visual characteristics. When used in long text passages, its outlined style may require careful consideration of font size and contrast to ensure optimal readability. However, for its intended purpose of representing icons and symbols, Material Symbols Outlined effectively communicates visual information in digital interfaces.

Material Symbols Outlined's Visual Fatigue and Adaptability

The font's outlined style may pose a risk of visual fatigue in extensive reading materials, especially at smaller sizes or in lengthy passages. However, its adaptability across different devices and language scripts is notable, as it maintains clarity and consistency across various digital platforms and supports multilingual applications.

Material Symbols Outlined Accessibility Recommendations

To enhance accessibility, it is recommended to ensure sufficient contrast ratios when using Material Symbols Outlined, particularly in small sizes or low-contrast environments. For digital displays, consider using larger sizes for improved visibility. Additionally, modifications such as adjusting stroke thickness and fill attributes can be valuable for enhancing readability across user groups, especially those with visual impairments.

Best Practices for Using Material Symbols Outlined

When using Material Symbols Outlined in design, it is best to employ larger sizes for improved legibility, particularly in digital interfaces and applications. Utilizing sufficient contrast and carefully considering the context of use can help ensure optimal readability. For example, when incorporating the font in user interfaces, consider using it for buttons, navigation elements, and other visual indicators, while ensuring clear and distinct representation of icons for intuitive user interaction.

License Type

The Material Symbols Outlined font is licensed under the Apache License, Version 2.0. This means you can use the font freely for personal and commercial projects. You can distribute copies, modify it, and even use it in proprietary software. When you distribute the font, you must include a copy of the Apache License. If you modify the font, you must state the changes you made. You cannot use the name or trademarks of the original font creators to promote your modified version. The license also disclaims warranties, meaning the creators aren’t responsible if there are issues with the font. You should also give credit to the original authors if you distribute the font. For example, if you make a new project with the font, you should mention the creators in your documentation. The Apache License allows flexibility. You can integrate the font into various applications like websites, software, or printed material. You don’t need to pay royalties or fees. You can also use the font in open-source or closed-source projects. Remember, the Apache License requires you to keep the same license for any modifications you distribute. It ensures the font remains free and open for others to use and modify. If you use the font, you should follow these guidelines to respect the creators' terms.

Language Support

The Material Symbols Outlined font supports a wide range of languages, including but not limited to Latin-based languages, Cyrillic, Greek, and extended characters to accommodate various global scripts. This ensures broad international usability and inclusivity in digital and print media.

Download Weights & Variants

100

200

300

regular

500

600

700

Material Symbols Outlined

Fonts Similar to Material Symbols Outlined

Material Icons Round

Anonymous Pro

B612 Mono

Source Code Pro

Red Hat Mono

How to Embed Material Symbols Outlined in Your Project

Using a <link> tag in HTML

Using @import in CSS

Using @font-face in CSS

CSS Code Examples

Material Symbols Outlined's Details

Accessibility Overview for Material Symbols Outlined

Material Symbols Outlined's Legibility

Material Symbols Outlined's Readability

Material Symbols Outlined's Visual Fatigue and Adaptability

Material Symbols Outlined Accessibility Recommendations

Best Practices for Using Material Symbols Outlined

License Type

Language Support

Download Weights & Variants

About Us