Convert Figma logo to code with AI

be5invis logoSarasa-Gothic

Sarasa Gothic / 更纱黑体 / 更紗黑體 / 更紗ゴシック / 사라사 고딕

9,914
369
9,914
4

Top Related Projects

Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕

Noto CJK fonts

Noto fonts, except for CJK and emoji

Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조

18,991

Versatile typeface for code, from code.

17,552

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:

  1. Visit the Sarasa Gothic GitHub releases page
  2. Download the desired font variant (e.g., sarasa-gothic-ttf-0.35.8.7z)
  3. Extract the downloaded archive
  4. 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 run fc-cache -f -v
  5. 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.

18,991

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.

17,552

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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
    • 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
  • Orthography dimension
    • CL: Classical orthography
    • SC, TC, J, K, HC: Regional orthography, following Source Han Sans notations.

Mirrors