googlefonts / roboto-flex

SIL Open Font License 1.1
465 stars 32 forks source link

Roboto Extremo proofing notes #18

Closed dberlow closed 5 years ago

dberlow commented 5 years ago

There is a natural affinity between the frame-based nature of video and the need to present the styles in the design space of variable fonts. CSS-based Variable Font animation is widespread and the font software support exists for use of CSS and variable fonts with all modern browsers. https://variationsguide.typenetwork.com/proposal/images/animation-xtra.gif

Simple Variable fonts can be made that require the same, or only slightly more proofing than traditional instances of typeface families. A font with six weights needs a few hundred pages composed, different combinations of glyphs that need to be seen to be tested during a font family’s design iteration, eventually leading to specimens of what the font is designed to do best, to make people want to use it for that or whatever they see in the font family.

But complex variable fonts can also be made that overwhelm traditional proofing, and proofing any variable font expressly made for animation, by definition requires animated proofing. So, this paper explores how to provide a proofing platform for variable fonts using CSS and video to compact and offer presentation of proofs and specimens of fonts, how such proofs could be used, and what the benefits are to be able to present as compact and portable a “view” as possible, of one variable font.

That is not to say that this development could not be applied by Authoring in some other environment that outputs CSS, Nor is it limited to a single variable font if multiple variable fonts need to be proofed together, or if variable and non-variable fonts need to be proofed together.

This paper also is content to demonstrate the issues for Black and white Latin typefaces intended for all sizes and languages, which is not to say that this development could not be applied to fonts of other colors, scripts or for more specialized typeface designs.

I. How to provide a proofing platform for variable fonts using CSS.
  A. Assets
    1. Variable font

      a. Glyphs
        i. Local character set, i.e. user’s input repertoire
        ii. Glyph repertoire, of the font
          ii1.glyph group space
          ii2.glyph space
           ii2a.subglyph space

      b. Style roster   
        i. Registered axes & and stored instances
             Opsz, 1/72 inch
             Wght, os/2 100-900
             Wdth, os/2 25%-200%
             Slnt, degrees
             Ital, feature-like
        ii. Custom axes & stored instances
              Parametric (figurable), a value Per em definition & range
              A stored instance      
              Visualometric (fishable), values appearance

       c. Feature roster

       d. Design space, is the total stylistic range of the variable font implied by the axes.
     2. Composition modules 
      a. Text formats, per style
        i. Glyph, Glyph group, Glyph Repertoire
        ii. Glyph(s) in context, nnpnonopoo
        iii. Style in use. The quick brown fox
        vi. Style(s) in context, in use among the family
      b. Text “runtons”, code modules for layout of text runs.
        i. Run maker, 
           i.padder, Takes a glyph list and adds glyphs/spaces beside each glyph
           ii.Uses predefined runs
           iii. Synthesizes runs to fit for language, size, and length.
        ii. Size munch, determines text size, 
           i. absolutely, input in points/pixels
           ii. Relative, to page ht, body in ems
        iii. Linespacer, formulates linespacing by linelength
        iv. Letterspacer, line or ppg fit to width, tracks and kerns proportionally, manages word space.
        v. Tabulator, uses tabular width glyphs to compose test tables.
        vi. Hyphenator, collects hyphenation dicts of supported lang., sets per language hyphenation rules
        vii. Backgrounder, adjusts style for particular color/rendering cases
        viii. Script stalker, adjusts style for inter-script interactions.
        is. Style walker, directs proofs through Vars with more than one style of a given wght, wdth, opsz.
        x. Effects speccer, applies ranges of text effects to runs of a style, e.g. dropshadow, confetti
        xi. custom, feature or other style-specific run composition.

There are the Interesting possibilities

The video, and the portal displaying the video to the user are not dependent.

A css variable font movie is searchable and presentable for the usual things like glyphs, words and,phrases, as well as axes, instances

controls to examine individual frames go forward backwards speed up and slow down not frame dependent.

davelab6 commented 5 years ago

(meta comment: I tried to update the plain text formatting to markdown that makes sense)

dberlow commented 5 years ago

Well received. Proof of “something works”… https://videoproof.typenetwork.com/

Do not, imho, set duration to 1 if you are nervous already.

dberlow commented 5 years ago

No response yet, more info has been sent elsewhere.