Inter Typeface

repository·master·Indexed 12 days ago

https://github.com/rsms/inter

A variable font specifically designed for high legibility on computer screens. Includes documentation for web implementation via CDN or self-hosting, build instructions from source, and utility tools like fontsample for macOS and kerndiff for comparing kerning pairs. Licensed under the SIL Open Font License 1.1.

Tokens
1.6K
Snippets
7
Records
11
Agent score
96%

What's inside Inter

  1. Understand how OpenType features are structured in Inter

    master

    Inter's OpenType features are stored as individual .fea files within the src/features directory. Each file represents a specific feature (e.g., cv07.fea).

    Note that these files do not contain the feature { ... } wrapper themselves; instead, they contain raw feature code. During the font compilation process, each file is automatically wrapped in a feature { ... } block based on its filename.

    Important for font designers/contributors: The definitive order of features is managed in the .glyphs file, not by the file order in this directory. Some features are maintained directly within the .glyphs application.

    // Example content of cv07.fea
    sub germandbls by germandbls.1;
    
    // Resulting compiled code:
    feature cv07 {
      sub germandbls by germandbls.1;
    }
  2. License and usage rights for Inter

    master

    Inter is licensed under the SIL Open Font License 1.1.

    Key usage rules:

    • Commercial Use: You can use Inter commercially (e.g., bundled with a product or service).
    • Restrictions: You are NOT allowed to sell Inter itself or its derivatives.
    • Derivatives: You can create derivative fonts, but they must also be released under the same SIL Open Font License 1.1.
    • Reserved Name: "Inter" is a Reserved Font Name by Rasmus Andersson. Derivative works must not use this name.
    • Documents: The license requirements do not apply to documents created using the font.
  3. Understand the Inter source file structure

    master

    The Inter source files consist of the following components:

    • Inter-Roman.glyphspackage: Contains the non-italic designs in the Glyphs format.
    • Inter-Italic.glyphspackage: Contains the italic designs in the Glyphs format.
    • features/: Contains hand-written OpenType feature code. Note that many other features are automatically generated by Glyphs and are embedded directly within the .glyphspackage directories.
  4. Use kerndiff to compare kerning pairs in font files

    master

    The kerndiff.sh tool generates a unified diff showing the differences in kerning pairs between two font files. It supports OTF, TTF, and UFO font formats.

    Usage: Run the script from your terminal, providing the paths to the two font files you wish to compare as arguments.

    kerndiff.sh <font1> <font2>
    
    # Example usage:
    kerndiff.sh Inter-Regular-v2.4.otf src/Inter-Regular.ufo
  5. Install Inter via alternate distributions

    master

    Inter is available through several package managers and distributions. Note that these may not always be as up-to-date as the official GitHub releases.

    • NPM: inter-ui package
    • Homebrew: font-inter cask
    • Ubuntu: fonts-inter package
    • Linux: Various versions available via Repology
    • Google Fonts: Available as a web font (Note: The README advises against using Google Fonts unless necessary, as it may be outdated and lacks italics).
  6. Install Inter for web use

    master

    You can use Inter on a web page by either hosting the files yourself or using the official CDN distribution.

    Use the official CDN to avoid hosting font files yourself. Add these links to your HTML <head>:

    Option 2: Self-hosting

    If you host the files yourself, include a preconnect link to your host and link to your inter.css file.

    CSS Implementation

    To ensure you use the variable font version when supported, use the @supports rule in your CSS. This provides better control over font weight and axes for modern browsers while falling back to standard Inter for older ones.

    <!-- Using the official CDN -->
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    
    <!-- CSS usage -->
    <style>
    :root { font-family: 'Inter', sans-serif; }
    @supports (font-variation-settings: normal) {
      :root { font-family: 'Inter var', sans-serif; }
    }
    </style>
  7. Build Inter font files from source

    master
    To build the Inter font family from the source files, you must have python3, bash, and make installed on your system. Run the make -j all command from the repository root to build all approximately 80 fonts in the family.
    make -j all
  8. Understand Inter's font weights and styles

    master

    Inter is distributed as a variable font and also as a set of traditional distinct font files. The following table maps the Roman (upright) and Italic names to their respective weights:

    Roman (upright) nameItalic nameWeight
    ThinThin Italic100
    Extra LightExtra Light Italic200
    LightLight Italic300
    RegularItalic400
    MediumMedium Italic500
    Semi BoldSemi Bold Italic600
    BoldBold Italic700
    Extra BoldExtra Bold Italic800
    BlackBlack Italic900
  9. Configure fontsample options

    master

    Use the following flags to customize the output of fontsample:

    • -z, -size <size>: Set the font size to render (defaults to 96).
    • -t, -text <text>: Set the specific text line to render (defaults to "Rags78 **A**").
    • -o <file>: Specify the output filename.
      • If the filename ends in .png, a PNG image is generated instead of a PDF.
      • If no output file is specified, it defaults to <fontfile>.pdf.
    # Example: Render 'Hello World' at size 72 to a PNG file
    ./fontsample -t "Hello World" -z 72 -o sample.png myfont.ttf