Top Related Projects
Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕
Noto CJK fonts
Noto fonts, except for CJK and emoji
Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조
Versatile typeface for code, from code.
The Inter font family
Quick Overview
Sarasa Gothic is an open-source, CJK programming font family that combines multiple existing fonts to create a harmonious typeface for East Asian languages and Latin scripts. It aims to provide a consistent and aesthetically pleasing appearance for both code and text, supporting Chinese, Japanese, Korean, and various Latin-based languages.
Pros
- Comprehensive language support for CJK and Latin scripts
- Optimized for coding with clear distinctions between similar characters
- Multiple weight variants available for versatile usage
- Regular updates and active community support
Cons
- Large file size due to extensive character set
- May require manual installation on some systems
- Limited customization options compared to some other programming fonts
- Potential rendering issues on certain platforms or applications
Getting Started
To use Sarasa Gothic:
- Visit the Sarasa Gothic GitHub releases page
- Download the desired font variant (e.g.,
sarasa-gothic-ttf-0.35.8.7z
) - Extract the downloaded archive
- Install the font files on your system:
- Windows: Right-click on the font files and select "Install"
- macOS: Double-click the font files and click "Install Font"
- Linux: Copy the font files to
~/.local/share/fonts/
and runfc-cache -f -v
- Configure your text editor or IDE to use Sarasa Gothic as the default font
Note: The exact version number may change; replace it with the latest available version when downloading.
Competitor Comparisons
Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕
Pros of Source Han Sans
- Extensive CJK (Chinese, Japanese, Korean) character coverage
- Developed by Adobe, ensuring high-quality design and professional support
- Multiple weights and styles available for versatile typography
Cons of Source Han Sans
- Limited support for programming-specific ligatures and features
- Larger file size due to comprehensive character set
- Less frequent updates compared to community-driven projects
Code Comparison
While both projects are font repositories, they don't contain directly comparable code. However, here's an example of how you might use each font in CSS:
Source Han Sans:
body {
font-family: 'Source Han Sans', sans-serif;
}
Sarasa Gothic:
body {
font-family: 'Sarasa Gothic', monospace;
}
Sarasa Gothic is designed with programming in mind, offering features like ligatures for coding, while Source Han Sans is a more general-purpose CJK font. Sarasa Gothic combines Source Han Sans with Iosevka, creating a hybrid font that's suitable for both text and code display. It offers more customization options and more frequent updates, but may have less extensive CJK coverage compared to the Adobe-backed Source Han Sans.
Noto CJK fonts
Pros of Noto CJK
- Comprehensive coverage of CJK (Chinese, Japanese, Korean) characters
- Backed by Google, ensuring long-term support and updates
- Designed for optimal readability across various screen sizes and resolutions
Cons of Noto CJK
- Limited stylistic options compared to Sarasa Gothic
- Larger file size due to extensive character coverage
- Less customization potential for developers and designers
Code Comparison
While both projects are font repositories, they don't contain directly comparable code. However, here's an example of how you might use each font in CSS:
Noto CJK:
body {
font-family: 'Noto Sans CJK SC', sans-serif;
}
Sarasa Gothic:
body {
font-family: 'Sarasa Gothic SC', monospace;
}
Note that Sarasa Gothic is often used as a monospace font, while Noto CJK is typically used as a sans-serif font. This reflects their different design philosophies and target use cases.
Noto fonts, except for CJK and emoji
Pros of Noto Fonts
- Extensive language support covering over 1,000 languages
- Developed by Google, ensuring regular updates and maintenance
- Consistent design across all scripts for a unified look
Cons of Noto Fonts
- Large file sizes due to comprehensive character coverage
- May lack some specialized CJK (Chinese, Japanese, Korean) features
- Less customization options compared to Sarasa Gothic
Code Comparison
While both projects are font repositories, they don't typically include code samples. However, here's an example of how to use these fonts in CSS:
Noto Fonts:
body {
font-family: 'Noto Sans', sans-serif;
}
Sarasa Gothic:
body {
font-family: 'Sarasa Gothic', monospace;
}
Summary
Noto Fonts offers broader language support and consistency across scripts, making it ideal for global projects. Sarasa Gothic, on the other hand, provides more specialized CJK features and is particularly suited for coding environments. The choice between the two depends on specific project requirements, such as language needs, performance considerations, and design preferences.
Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조
Pros of Source Han Serif
- Extensive CJK (Chinese, Japanese, Korean) character coverage
- Developed by Adobe, ensuring high-quality design and professional support
- Multiple weights and regional variants available
Cons of Source Han Serif
- Limited to serif style, less versatile for modern UI design
- Larger file size due to comprehensive character set
- May require more system resources to render complex glyphs
Code Comparison
While both projects are font repositories, they don't contain directly comparable code. However, here's an example of how you might use each font in CSS:
Source Han Serif:
@font-face {
font-family: 'Source Han Serif';
src: url('SourceHanSerif-Regular.otf') format('opentype');
}
Sarasa Gothic:
@font-face {
font-family: 'Sarasa Gothic';
src: url('sarasa-gothic-regular.ttf') format('truetype');
}
Summary
Source Han Serif is a comprehensive CJK serif font with professional backing, while Sarasa Gothic offers a more modern, versatile sans-serif design. The choice between them depends on the specific needs of the project, such as language support, design aesthetics, and performance considerations.
Versatile typeface for code, from code.
Pros of Iosevka
- Highly customizable with numerous build options
- Supports a wide range of programming ligatures
- Smaller file size, ideal for web use and embedding
Cons of Iosevka
- Limited CJK (Chinese, Japanese, Korean) support
- Fewer pre-built variants compared to Sarasa Gothic
- May require more setup time to achieve desired customization
Code Comparison
Iosevka:
@font-face {
font-family: 'Iosevka';
src: url('iosevka-regular.woff2') format('woff2');
}
Sarasa Gothic:
@font-face {
font-family: 'Sarasa Gothic';
src: url('sarasa-gothic-regular.ttf') format('truetype');
}
Both Iosevka and Sarasa Gothic are high-quality, open-source font projects created by the same developer. Iosevka excels in customization and programming-specific features, while Sarasa Gothic offers broader language support, particularly for CJK characters. Iosevka is more suitable for coding-focused applications and web use, whereas Sarasa Gothic is better for multilingual environments and desktop publishing. The choice between the two depends on specific language requirements and intended use cases.
The Inter font family
Pros of Inter
- Focused on a single, modern sans-serif typeface optimized for screen readability
- Extensive language support with over 4,000 glyphs
- Highly customizable with variable font technology
Cons of Inter
- Limited to Latin, Greek, and Cyrillic scripts
- Lacks support for CJK (Chinese, Japanese, Korean) characters
- Not designed for monospace or coding use cases
Code comparison
While both projects are font repositories, they don't contain typical code. However, here's a comparison of their font usage in CSS:
Inter:
body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1;
}
Sarasa Gothic:
body {
font-family: 'Sarasa Gothic', monospace;
font-feature-settings: 'calt' 1, 'ccmp' 1, 'locl' 1;
}
Key differences
Sarasa Gothic is a CJK-focused font family that includes monospace variants, making it suitable for coding and terminal use. It supports a wide range of East Asian languages alongside Latin scripts. In contrast, Inter is a modern sans-serif typeface designed primarily for user interfaces and web content, with a focus on readability and versatility in Latin-based languages.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Sarasa Gothic (æ´çº±é»ä½ / æ´ç´é»é« / æ´ç´ã´ã·ã㯠/ ì¬ë¼ì¬ê³ ë)
This is SARASA GOTHIC, a CJK composite font based on Inter, Iosevka and Source Han Sans.
Note
It is highly recommended to completely remove the old version of the fonts before you install the newer version of this font. Many OSes' and softwares' caching system may have trouble when dealing with large TTC fonts.
To build
You need Node.js (version 20 or newer), AFDKO (latest) and ttfautohint installed, then run:
npm install
after the NPM packages are installed, run
npm run build ttf
to build the TTF files, it would be in out/ttf
directory.
To build TTC, type
npm run build ttc
instead, the files would be in out/ttc
directory.
Please note that you will need a lot of memory to create TTCs, due to the huge quantity of subfamily-orthography combinations.
What are the names?
- Style dimension
- Latin/Greek/Cyrillic character set being Inter
- Quotes (
ââ
) are full width ââ Gothic - Quotes (
ââ
) are narrow ââ UI
- Quotes (
- Latin/Greek/Cyrillic character set being Iosevka
- Em dashes (
ââ
) are full width ââ Mono - Em dashes (
ââ
) are half width ââ Term - No ligature, Em dashes (
ââ
) are half width ââ Fixed
- Em dashes (
- Latin/Greek/Cyrillic character set being Inter
- Orthography dimension
CL
: Classical orthographySC
,TC
,J
,K
,HC
: Regional orthography, following Source Han Sans notations.
Mirrors
Top Related Projects
Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕
Noto CJK fonts
Noto fonts, except for CJK and emoji
Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조
Versatile typeface for code, from code.
The Inter font family
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot