sevka

Sevka is a subset of Iosevka intended for online distribution. It constrains Iosevka to five weights (light, regular, medium, semibold, bold), one width (normal), and two slopes (upright, italic), resulting in 10 fonts against Iosevka's original 54.

To further reduce filesize, all OpenType features, character variants, and ligations are disabled at build time, and the fonts are reduced after build to either US-ASCII or Latin-1 characters. As a result, a basic TrueType bundle consisting of regular, italic, bold, and bold italic weights amounts to only 139.4 kB (ASCII) or 258.2 kB (Latin) against Iosevka's original 40.4 MB. In WOFF2 format, the size is further compressed to 57.8 kB (ASCII) and 100.9 kB (Latin), allowing fonts to load in a split second.

The font comes in three versions:

• Sevka: sans-serif, quasi-proportional
• Sevka Slab: serif, quasi-proportional
• Sevka Fixed: sans-serif, fixed width

Sevka and Sevka Slab are intended for body text and headings. Sevka Fixed is the true monospaced version, to be used for code, tables, and other environments where column width is constant.

Specimen

Motivation

Iosevka is a marvelous typeface. It is open-source, looks stunning, and comes in a variety of weights, widths, and slopes, with fixed-space and quasi-proportional versions, hundreds of character variants, ligatures, and a matching slab-serif family.

There is one problem with its use on the web, however. Due to extensive Unicode coverage, language support, OpenType features, ligature sets, and extensive customization options, its filesize is massive. Just the vanilla face (regular, normal width, upright, in TrueType format) is 9.9 MB. This is inconvenient for a website, especially if one does not even need full Unicode encoding but only ASCII or Latin characters.

Sevka is a solution to this problem. It is a heavily streamlined Iosevka build that only retains weights and shapes commonly found on the web, dropping all unnecessary glyphs and uneconomical features. This allows for a much leaner font that requires minimal bandwidth but covers virtually all use cases.

Build

Prebuilt font files based on Iosevka v34.3.0 are included in the dist folder. If you'd like to replicate the build process, install node.js and pip. You might want to build the files yourself if you want a different release of Iosevka, or if you'd like to reintroduce particular features or character variants. If this is the case, please read the docs and create new build plans through Iosevka's customizer tool.

When you have your build plans, clone the Iosevka repo, cd into it, and copy the plans.

git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka && cp ../private-build-plans.toml private-build-plans.toml

The build process requires ttfautohint, and glyphhanger to be installed on your computer. Both are available via npm and can be installed globally.

npm install -g ttfautohint
npm install -g glyphhanger

Install local dependencies and build the fonts.

npm install
npm run build -- contents::Sevka
npm run build -- contents::SevkaSlab
npm run build -- contents::SevkaFixed

Creating subsets requires the fonttools and brotli Python libraries. They can be installed with pip.

pip install fonttools
pip install brotli

Now you can run subset.sh to reduce the files previously built to ASCII and Latin characters.

bash ../subset.sh

Copy the resulting fonts into the root directory, cd back, and delete the Iosevka repo.

mv dist/ascii ../
mv dist/latin ../
cd .. && rm -rf Iosevka

Done! Your files are in the ascii and latin folders.

Usage

Copy the fonts to your project's asset directory and load them with the CSS blocks included in ascii/sevka.css or latin/sevka.css. Alternative stylesheets can be found in ascii and latin's subfolders, in case you only want to load the TrueType or WOFF2 versions.

You can also use the more compact Sass syntax:

$faces: (
  Sevka: "Sevka",
  SevkaSlab: "Sevka Slab",
  SevkaFixed: "Sevka Fixed",
);

$styles: (
  normal: "",
  italic: "Italic",
);

$weights: (
  "Light": 300,
  "Medium": 500,
  "SemiBold": 600,
  "Bold": 700,
);

@each $face, $face-value in $faces {
  @font-face {
    font-family: "#{$face-value}";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("path/to/fonts/#{$face}-Regular.ttf") format("truetype") url("path/to/fonts/#{$face}-Regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "#{$face-value}";
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    src: url("path/to/fonts/#{$face}-Italic.ttf") format("truetype") url("path/to/fonts/#{$face}-Italic.woff2") format("woff2");
  }

  @each $style, $style-value in $styles {
    @each $weight, $weight-value in $weights {
      @font-face {
        font-family: "#{$face-value}";
        font-display: swap;
        font-style: #{$style};
        font-weight: #{$weight-value};
        src: url("path/to/fonts/#{$face}-#{$weight}#{$style-value}.ttf") format("truetype") url("path/to/fonts/#{$face}-#{$weight}#{$style-value}.woff2") format("woff2");
      }
    }
  }
}