fridamedrano / kalnia-glaze Goto Github PK

License: SIL Open Font License 1.1

Makefile 0.31% Python 0.79% HTML 98.90%

kalnia-glaze's Introduction

Kalnia Glaze: Step into the World of Color.

A new gradient variable font by Frida Medrano.

Minisite: https://www.fridamedrano.com/kalniaglaze

Kalnia Glaze is a new typeface commissioned by Google Fonts, that experiments with the new color font technology in variable fonts, inviting you to step into a world of color and add vibrancy and depth to your projects.

A Glaze of Possibilities.

Kalnia Glaze is the result of an broad exploration of the latest COLRv1 format and it’s integration with the variable font technology. The objective was not only to create a complex layered design to explore the possibilities of the format but also to streamline and expedite the process, minimizing the need for manual adjustments through software and emphasizing the automation of processes using paintcompiler, a program by Simon Cozens.

COLRv1 is the latest version of the color font format combining transparency, gradients, and variable font technology. As one of the advantages of the format, it's possible to change the color palettes in code. CSS serves as a powerfull tool to change palettes.

CSS Palettes

Kalnia Glaze is designed for both light and dark modes, with easily accessible palettes through CSS.

Light Mode (default color)

h1 {
  font-family: 'Kalnia Glaze';
  font-palette: light; #light mode
}

Dark Mode

h1 {
  font-family: 'Kalnia Glaze';
  font-palette: dark; #dark mode
}

Custom Palettes

You can customize colors in CSS or use tools like DJR's color font customizer (https://tools.djr.com/color-font-customizer) or Laurence Penney's Figma plugin (https://github.com/Lorp/figma-colrv1), both offering easy and powerful customization options.

About the Design

Inspired by the Victorian era, Kalnia Glaze features high contrast and refined terminals. Much like the Victorian Sash windows that were meticulously glazed to capture a timeless charm, Kalnia Glaze takes the essence of this historical craftsmanship into its letterforms. It incorporate their structural elegance, volume, and lighting nuances, to enhance the original structure of Kalnia typeface with added complexity and decoration.

Kalnia Glaze is the color font version of Kalnia Typeface also available at Google Fonts.

About Frida Medrano

Frida Medrano is a Mexican type and product designer currently based in San Fransisco, California. She is interested in design automation and exploration projects where code and design converge. She won the SOTA Catalyst Award in 2018 and has presented her work in forums like ATypI, TypeLab, TypeCon, Design Matters, IxDA, Letrástica, and TMX.

fridamedrano.com Instagram GitHub Twitter

Aditional Credits

This project was possible thanks to Google Fonts and the support of Viviana Monsalve, Simon Cozens and Dave Crossland.

Building

Kalnia is divided in two sections:

Kalnia-Glaze.glyphs: This file contain the letterforms design and the variable font parameters. It's constructed using two color palettes: the stroke and the fill. Note: The colors on this palette are random, they will be replace in the next step.
Paints.py file: This script is dependent from paintcompiler, a program by Simon Cozens. As a second step, paintcompiler (incorporated on the build) replace the color palettes in the Glyphs file with the gradients and alphas described on the paints.py file.

These files are available in the sources folder. As a summary, the Glyphs file contain the letterform designs and interpolation settings and the paints.py file the color gradients.

Fonts are built automatically by GitHub Actions - take a look in the "Actions" tab for the latest build.

If you want to build fonts manually on your own computer:

make build will produce font files.
make test will run FontBakery's quality assurance tests.
make proof will generate HTML proof files.

The proof files and QA tests are also available automatically via GitHub Actions - look at https://github.com/fridamedrano/Kalnia-Glaze

Changelog

5 March 2024. Version 1.00

License

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at https://scripts.sil.org/OFL

Repository Layout

This font repository structure is inspired by Unified Font Repository v0.3, modified for the Google Fonts workflow.

kalnia-glaze's People

Contributors

Stargazers

Watchers

kalnia-glaze's Issues

To-Do list for publishing

Add details on the Color concept (combined the gradients + chosen palette) to the README.md file
Defining a name to replace the "Color" particle and meaningful to the concept of the font
~~When adding the gradients, ensure consistency and compatibility across:~~
Try out #1
- Include Simon and Laurence to repo

`caroncomb.alt` should not use quoteright

This Fail is reported for the latest colored font KalniaColorVF.ttf in the paintcompiler-test folder at commit 7f36f26

🔥 FAIL: Check accent of Lcaron, dcaron, lcaron, tcaron (derived from com.google.fonts/check/alt_caron) (com.google.fonts/check/alt_caron)

Lcaron, dcaron, lcaron, tcaron should NOT be composed with quoteright or quotesingle or comma or caron(comb). It should be composed with a distinctive glyph which doesn't look like an apostrophe.

Source: https://ilovetypography.com/2009/01/24/on-diacritics/ http://diacritics.typo.cz/index.php?id=5 https://www.typotheque.com/articles/lcaron

🔥 FAIL Lcaron uses component quoteright. [code: bad-mark]
🔥 FAIL dcaron uses component quoteright. [code: bad-mark]
🔥 FAIL lcaron uses component quoteright. [code: bad-mark]
🔥 FAIL tcaron uses component quoteright. [code: bad-mark]

Math symbols width

This warning is still reported for the latest colored font KalniaColorVF.ttf in the paintcompiler-test folder at commit 7f36f26

⚠ WARN: Check math signs have the same width. (com.google.fonts/check/math_signs_width)

It is a common practice to have math signs sharing the same width (preferably the same width as tabular figures accross the entire font family).

This probably comes from the will to avoid additional tabular math signs knowing that their design can easily share the same width.

⚠ WARN The most common width is 460 among a set of 5 math glyphs.
The following math glyphs have a different width, though:

Width = 461:
plus, plusminus

Width = 364:
lessequal, less, greater, greaterequal

Width = 385:
multiply

Width = 652:
approxequal
[code: width-outliers]

No such file or directory

File updated, but now I have a new error, it doesn't create the exports.

Changing repository's name to Kalnia Glaze

So it gets updated with the font project name.

Paintcompiler option

Could Simon's paintcompiler Python library be used to add the COLRv1 gradients to Kalnia?

You can find in my QA-KalniaC branch on my fork a paintcompiler folder with the files I used to try it and the resulting font.

So far:

It is useful to test the gradients applied at once to identify how they will work in all the glyphs or if special cases should be attended to.
The resulting font is displaying ok in FontGoggles, but is not showing the gradients in testers like color font customizer or fontdrop. Only the black color
Finding how to apply the second gradient that the font uses that act somehow at a two-layer (outer-shape/inner-shape) system would be needed. As well as changing the gradient definitions for different masters, following what you would like to achieve for the wider version.

CC @Lorp and @simoncozens since this project could be a good new test case for the COLRv1 format.

Kalnia Color current VF in fonts repo

Test-font in FontGoggles

This would be equivalent to the "layer 1" - outer-shape

Current VF in browser font testers

Test-font in browser font testers

Feature request: Please add Cyrillic and Greek support

Hope developers will add Cyrillic and Greek support to this wonderful font.

🔥 FAIL: Check glyphs do not have components which are themselves components.

This Failure is reported again for some unexpected glyphs (I've deleted all the .color ones from the list).
Please review all of them and ensure to solve them.

🔥 FAIL: Check glyphs do not have components which are themselves components. (com.google.fonts/check/glyf_nested_components)

There have been bugs rendering variable fonts with nested components. Additionally, some static fonts with nested components have been reported to have rendering and printing issues.

For more info, see: * fonttools/fontbakery#2961 * arrowtype/recursive#412

🔥 FAIL The following glyphs have components which themselves are component glyphs:
- Adieresis
- Dcroat
- Edieresis
- Idieresis
- Odieresis
- Ohungarumlaut
- Udieresis
- Uhungarumlaut
- Wdieresis
- Ydieresis
- adieresis
- edieresis
- idieresis
- odieresis
- ohungarumlaut
- udieresis
- uhungarumlaut
- wdieresis
- ydieresis
- onehalf
- onequarter
- threequarters
- guillemotright
- lessequal
- perthousand

make update-project-template

When I update the template via terminal, I don't have any problems, but when commit the updates to the repo, I get an error in the actions.

⚠ WARN: Detect any interpolation issues in the font.

FB has reported some interpolation issues. Please inspect that list as well as the below PDF that visually reports them.

KalniaGlaze.pdf

⚠ WARN: Detect any interpolation issues in the font. (com.google.fonts/check/interpolation_issues)

When creating a variable font, the designer must make sure that corresponding paths have the same start points across masters, as well as that corresponding component shapes are placed in the same order within a glyph across masters. If this is not done, the glyph will not interpolate correctly.

Here we check for the presence of potential interpolation errors using the fontTools.varLib.interpolatable module.

⚠ WARN Interpolation issues were found in the font:
- Contour order differs in glyph 'paragraph': [0, 1, 2, 3] in wght=100,wdth=125, [0, 2, 1, 3] in wght=700,wdth=100.
- Contour 1 start point differs in glyph 'paragraph' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour 0 start point differs in glyph 'lslash.color1' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour order differs in glyph 'q': [0, 1, 2, 3] in wght=100,wdth=125, [0, 3, 2, 1] in wght=700,wdth=100.
- Contour 2 start point differs in glyph 'sterling.color1' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour 0 start point differs in glyph 'asciitilde.color1' between location wght=700,wdth=100 and location wght=700,wdth=125
- Contour order differs in glyph 'd': [0, 1, 2, 3] in wght=100,wdth=125, [0, 2, 1, 3] in wght=700,wdth=100.
- Contour order differs in glyph 'b': [0, 1, 2, 3] in wght=100,wdth=125, [0, 3, 2, 1] in wght=700,wdth=100.
- Contour 4 start point differs in glyph 'sterling' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour 4 start point differs in glyph 'section' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour 1 start point differs in glyph 'asciitilde' between location wght=700,wdth=100 and location wght=700,wdth=125
- Contour 2 start point differs in glyph 'section.color1' between location wght=100,wdth=125 and location wght=700,wdth=100
- Contour order differs in glyph 'p': [0, 1, 2, 3] in wght=100,wdth=125, [0, 3, 2, 1] in wght=700,wdth=100.
- Contour 2 start point differs in glyph 'uni1E9E.color1' between location wght=100,wdth=100 and location wght=100,wdth=125
- Contour order differs in glyph 'thorn': [0, 1, 2, 3] in wght=100,wdth=125, [0, 2, 1, 3] in wght=700,wdth=100.
- Contour 3 start point differs in glyph 'uni1E9E' between location wght=100,wdth=100 and location wght=100,wdth=125 [code: interpolation-issues]

Name

Here are some options on name so far:

Kalnia Oriel

Oriel: projection from the wall of a building, typically supported from the ground or by corbels.

Aesthetically, oriel windows became a landmark detail for Victorian-era architecture, although they were present in structures earlier than the 19th century. Ref: https://www.thisismysaintgallen.com/oriels/

Kalnia Glaze

Glaze: fit panes of glass into (a window or doorframe or similar structure).
Glaze: overlay or cover (food, fabric, etc.) with a smooth, shiny coating or finish.

Victorian Sash windows used to be glazed. Ref: https://chameleon-decorators.co.uk/blog/victorian-sash-windows/

Kalnia glare

Glare: (of the sun or an electric light) shine with a strong or dazzling light. (Reference to the transparency/alfa of the font.)

Catalan punt volat should appear centered between L’s

periodcentered.loclCAT should appear centered between two lowercase l’s
periodcentered.loclCAT.case should appear centered between two uppercase L’s
ldot and Ldot can be derived from L/l + periodcentered.loclCAT(.case)

Useful scripts: mekkablue > Build Glyphs > Center punt volat and Build Ldot

Warns reported

The following are the reported Warns for the test font in the repo at commit df10cd5.

Unreachable glyphs

There are some .color glyphs added in the resulting font. Please inspect if this is a result of PaintCompiler.

⚠ WARN: Check font contains no unreachable glyphs (com.google.fonts/check/unreachable_glyphs)

Glyphs are either accessible directly through Unicode codepoints or through substitution rules.

In Color Fonts, glyphs are also referenced by the COLR table.

Any glyphs not accessible by either of these means are redundant and serve only to increase the font's file size.

⚠ WARN The following glyphs could not be reached by codepoint or substitution rules:
- .notdef.color0
- A.color0
- AE.color0
- Aacute.color0
- Abreve.color0
- Acircumflex.color0
- Adieresis.color0
- Agrave.color0
- Amacron.color0
- Aogonek.color0
- 363 more.

Use -F or --full-lists to disable shortening of long lists.
[code: unreachable-glyphs]

Interpolation issues

The following reported for the latest colored font KalniaColorVF.ttf in the paintcompiler-test folder at commit 7f36f26