Source Code Pro

.example-class {font-family: 'Source Code Pro';}

Source Code Pro

ExtraLight

Light

Medium

SemiBold

Bold

ExtraBold

Black

Source Code Pro 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
! @ # $ % ^ & * ( ) + =

Source Code Pro 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

Source Code Pro 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 Source Code Pro

Kode Mono

Ubuntu Mono

Nova Mono

JetBrains Mono

DM Mono

How to Embed Source Code Pro in Your Project

Using a <link> tag in HTML

<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">

Using @import in CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

Using @font-face in CSS

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

CSS Code Examples

.example-class { font-family: 'Source Code Pro'; }

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

// SCSS Variable $example-class-font-family: 'Source Code Pro'; .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-source-code-pro-monospace; }

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

Source Code Pro's Details

Source Code Pro is a monospaced font family created by Adobe. The typeface was released in 2012. It's designed specifically for coding environments. Source Code Pro features clean lines and a modern appearance. It belongs to the Source family, which also includes Source Sans Pro and Source Serif Pro. Source Code Pro, Source Code Pro has a distinct look with its uniform character width. The glyphs are easy to distinguish from one another. For example, the zero has a diagonal slash, and the lowercase 'l' is easily differentiated from the number one. These design choices help reduce errors in reading and writing code. This font supports multiple weights ranging from Extra Light to Black. Each weight maintains clarity and readability. The italics are designed with a slight angle to differentiate from the upright versions. The font's x-height is tall, which improves legibility on screens. Source Code Pro is open-source, meaning anyone can use and modify it. This flexibility makes it popular among developers and designers. It's commonly used in integrated development environments (IDEs) and text editors like Visual Studio Code and Sublime Text. The monospaced nature ensures consistent alignment of code, which is crucial for debugging and reviewing. The font also supports several scripts, including Latin, Greek, and Cyrillic. This wide range of character support makes it versatile. It's optimized for screen use, ensuring that characters are crisp at various resolutions. Notable features include its clear distinction between similar-looking characters. The font's generous spacing enhances readability, especially in longer coding sessions. The design minimizes eye strain, making it suitable for prolonged use. In summary, Source Code Pro is a versatile, open-source monospaced font designed for coding environments. It offers multiple weights, wide character support, and clear readability. Its design choices make it a popular choice among developers and designers.

Accessibility Overview for Source Code Pro

Source Code Pro is a monospaced font designed to maintain legibility and clarity in user interface (UI) environments. It is characterized by its uniform glyph widths and design features that preserve the vertical proportions of Source Sans. The font is commonly used for coding, programming, and other applications where monospaced fonts are preferred for their alignment and ease of reading. Its clean and modern design makes it suitable for both print and digital media, offering a professional and polished appearance.

Source Code Pro's Legibility

Source Code Pro excels in legibility due to its consistent spacing, generous x-height, and clear differentiation between characters. The ample spacing between characters aids in distinguishing individual glyphs, while the well-proportioned x-height contributes to improved readability, especially at smaller sizes. The font's distinct character shapes and clear punctuation marks further enhance legibility, ensuring ease of comprehension in coding and text-based applications.

Source Code Pro's Readability

In various contexts, Source Code Pro demonstrates strong readability. In long text passages, its monospaced design promotes uniformity and ease of scanning, enhancing comprehension for technical documentation and lengthy code snippets. For captions and digital displays, its clean and modern appearance maintains readability even at smaller sizes, making it suitable for use in user interfaces and on-screen text.

Source Code Pro's Visual Fatigue and Adaptability

The font's monospaced design minimizes visual fatigue during extensive reading, as the consistent character widths and spacing reduce eye strain. Additionally, Source Code Pro exhibits adaptability across different devices and language scripts, ensuring consistent legibility and aesthetic appeal in diverse environments.

Source Code Pro Accessibility Recommendations

For enhanced accessibility, Source Code Pro should be used with attention to contrast ratios, particularly in digital applications. When selecting font sizes, it is advisable to consider the needs of diverse user groups, ensuring that the font remains legible across different viewing conditions. Modifications such as adjusting letter spacing and line height can be implemented to optimize readability for individuals with visual impairments.

Best Practices for Using Source Code Pro

When utilizing Source Code Pro in design, it is best to employ the font for coding interfaces, technical documentation, and digital displays where monospaced fonts are beneficial. For example, Source Code Pro can be effectively used in code editors, terminal applications, and websites that feature programming tutorials. Its clean and modern aesthetic also makes it suitable for branding materials and print collateral where a contemporary, professional appearance is desired.

License Type

The font Source Code Pro is licensed under the SIL Open Font License (OFL). This license allows you to use, modify, and distribute the font freely. You can use the font for personal, academic, or commercial projects without paying for it. You can also change the font to suit your needs if you want to customize its appearance or functionality. The OFL license requires that if you distribute the original or modified font, you must include a copy of the license. This ensures that others know their rights regarding the font. If you modify the font and distribute it, you must not use the original name unless you get permission from the original creators. Instead, you should rename your modified version to avoid confusion. You can embed the font in documents or software. For example, you can include it in PDFs, websites, or apps. This makes it easy to share work with others without needing them to have the font installed on their devices. However, you can't sell the font by itself. You can sell products that use the font, like books or software, but you can't sell the font as a standalone item. This helps keep the font freely available for everyone to use. In summary, the SIL Open Font License for Source Code Pro gives you a lot of freedom to use, modify, and share the font, as long as you follow a few simple rules. This ensures that the font remains accessible and useful for everyone.

Language Support

Source Code Pro is a monospaced font designed to be particularly suited for coding. It supports a wide range of languages, covering Latin, Greek, and Cyrillic scripts, which includes most Western and Eastern European languages, as well as various programming languages that use these scripts.

Download Weights & Variants

200

300

regular

500

600

700

800

900

200 italic

300 italic

italic

500 italic

600 italic

700 italic

800 italic

900 italic

Source Code Pro

Fonts Similar to Source Code Pro

Kode Mono

Ubuntu Mono

Nova Mono

JetBrains Mono

DM Mono

How to Embed Source Code Pro in Your Project

Using a <link> tag in HTML

Using @import in CSS

Using @font-face in CSS

CSS Code Examples

Source Code Pro's Details

Accessibility Overview for Source Code Pro

Source Code Pro's Legibility

Source Code Pro's Readability

Source Code Pro's Visual Fatigue and Adaptability

Source Code Pro Accessibility Recommendations

Best Practices for Using Source Code Pro

License Type

Language Support

Download Weights & Variants

About Us