-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
play with variable fonts and show how to use them for the case of Rub…
…ik Light. Consider moving all fonts to this style.
- Loading branch information
Dierk Koenig
committed
Oct 3, 2024
1 parent
7effeb8
commit 198b5cf
Showing
4 changed files
with
216 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>FontStyleExample</title> | ||
| <link rel=stylesheet href="font-variations-regular.css"> | ||
| <style> | ||
| body { | ||
| font-family: "Rubik-Light", "Comic Sans MS", serif; /*make it obvious if lookup fails*/ | ||
| } | ||
| .italic { | ||
| font-family: "Rubik-Light-Italic", "Comic Sans MS", serif; /*make it obvious if lookup fails*/ | ||
| } | ||
| .lightWeight { | ||
| font-variation-settings: "wght" 300; | ||
| transition: font-variation-settings 1s; | ||
| } | ||
| .lightWeight:hover { | ||
| font-variation-settings: "wght" 500; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>Rubik Font Style</h1> | ||
| <h2>Style Examples from variable font settings</h2> | ||
|
|
||
| <p class="lightWeight">smoth variable font weight on hover</p> | ||
| <p class="rubik-light-light">light Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate in qui quos vel veniam. Ad culpa deleniti deserunt error exercitationem expedita explicabo facere ipsam magni omnis, quaerat quasi, quod reiciendis.</p> | ||
| <p class="rubik-light-light italic">light italic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate in qui quos vel veniam. Ad culpa deleniti deserunt error exercitationem expedita explicabo facere ipsam magni omnis, quaerat quasi, quod reiciendis.</p> | ||
| <p class="rubik-light-regular">regular Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate in qui quos vel veniam. Ad culpa deleniti deserunt error exercitationem expedita explicabo facere ipsam magni omnis, quaerat quasi, quod reiciendis.</p> | ||
| <p class="rubik-light-bold">bold Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate in qui quos vel veniam. Ad culpa deleniti deserunt error exercitationem expedita explicabo facere ipsam magni omnis, quaerat quasi, quod reiciendis.</p> | ||
| <p class="rubik-light-case">case feature [ABC] (TTT) {EFJ} HI0 (default is good for this font)</p> | ||
| <p class="rubik-light-sinf">scientific H2O</p> | ||
| <p class="rubik-light-tnum">111111.1 999 tabular numbers</p> | ||
| <p class="rubik-light-tnum">000000,0 333 tabular numbers</p> | ||
| <p class="rubik-light-zero">000000.0 456 tabular numbers with slashy zeros</p> | ||
| <p class="rubik-light-frac">1/3 of all fractions are useless</p> | ||
| </body> | ||
| </html> |
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| /** | ||
| * CSS for Rubik Light | ||
| * Generated by Wakamai Fondue - https://wakamaifondue.com | ||
| * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl | ||
| */ | ||
|
|
||
| @font-face { | ||
| font-family: "Rubik-Light"; | ||
| src: url("Rubik-VariableFont_wght.ttf"); | ||
| font-weight: 300 900; | ||
| unicode-range: U+000D, U+0020-007E, U+00A0-0161, U+0164-017F, U+0192, | ||
| U+01FC-01FF, U+0218-021B, U+0237, U+02BC, U+02C6-02C7, U+02D8-02DD, | ||
| U+0300-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+0335, | ||
| U+0337-0338, U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, | ||
| U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B1, U+04B6-04BB, | ||
| U+04C0-04C2, U+04CB-04CC, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, | ||
| U+04EE-04F9, U+051A-051D, U+0524-0525, U+05B0-05BC, U+05BE, | ||
| U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F2-05F4, U+1E80-1E85, | ||
| U+1EF2-1EF3, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, | ||
| U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+207D-207E, | ||
| U+2080-2089, U+208D-208E, U+20AA, U+20AC, U+20AE, U+20B4, U+20B8-20B9, | ||
| U+20BD, U+2116, U+2122, U+212E, U+2153-2154, U+215B-215E, U+2202, | ||
| U+2206, U+220F, U+2211-2212, U+2215, U+221A, U+221E, U+222B, U+2248, | ||
| U+2260, U+2264-2265, U+25CA, U+FB01-FB02, U+FB2A-FB36, U+FB38-FB3C, | ||
| U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4B; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Rubik-Light-Italic"; | ||
| src: url("Rubik-Italic-VariableFont_wght.ttf"); | ||
| font-weight: 300 900; | ||
| unicode-range: U+000D, U+0020-007E, U+00A0-0161, U+0164-017F, U+0192, | ||
| U+01FC-01FF, U+0218-021B, U+0237, U+02BC, U+02C6-02C7, U+02D8-02DD, | ||
| U+0300-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+0335, | ||
| U+0337-0338, U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, | ||
| U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B1, U+04B6-04BB, | ||
| U+04C0-04C2, U+04CB-04CC, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, | ||
| U+04EE-04F9, U+051A-051D, U+0524-0525, U+05B0-05BC, U+05BE, | ||
| U+05C1-05C2, U+05C7, U+05D0-05EA, U+05F2-05F4, U+1E80-1E85, | ||
| U+1EF2-1EF3, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, | ||
| U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+207D-207E, | ||
| U+2080-2089, U+208D-208E, U+20AA, U+20AC, U+20AE, U+20B4, U+20B8-20B9, | ||
| U+20BD, U+2116, U+2122, U+212E, U+2153-2154, U+215B-215E, U+2202, | ||
| U+2206, U+220F, U+2211-2212, U+2215, U+221A, U+221E, U+222B, U+2248, | ||
| U+2260, U+2264-2265, U+25CA, U+FB01-FB02, U+FB2A-FB36, U+FB38-FB3C, | ||
| U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4B; | ||
| } | ||
|
|
||
| /* Set custom properties for each layout feature */ | ||
| :root { | ||
| --rubik-light-case: "case" off; | ||
| --rubik-light-frac: "frac" off; | ||
| --rubik-light-pnum: "pnum" off; | ||
| --rubik-light-sinf: "sinf" off; | ||
| --rubik-light-subs: "subs" off; | ||
| --rubik-light-sups: "sups" off; | ||
| --rubik-light-tnum: "tnum" off; | ||
| --rubik-light-zero: "zero" off; | ||
| } | ||
|
|
||
| /* OpenType features. https://sparanoid.com/lab/opentype-features | ||
| If class is applied, update custom property and | ||
| apply modern font-variant-* when supported */ | ||
|
|
||
| /*nicer uppercase*/ | ||
| .rubik-light-case { | ||
| --rubik-light-case: "case" on; | ||
| } | ||
| /*fractions*/ | ||
| .rubik-light-frac { | ||
| --rubik-light-frac: "frac" on; | ||
| } | ||
| /*proportional numbers*/ | ||
| .rubik-light-pnum { | ||
| --rubik-light-pnum: "pnum" on; | ||
| } | ||
| @supports (font-variant-numeric: proportional-nums) { | ||
| .rubik-light-pnum { | ||
| --rubik-light-pnum: "____"; | ||
| font-variant-numeric: proportional-nums; | ||
| } | ||
| } | ||
| /*scientific*/ | ||
| .rubik-light-sinf { | ||
| --rubik-light-sinf: "sinf" on; | ||
| } | ||
| /*subscript*/ | ||
| .rubik-light-subs { | ||
| --rubik-light-subs: "subs" on; | ||
| } | ||
| @supports (font-variant-position: sub) { | ||
| .rubik-light-subs { | ||
| --rubik-light-subs: "____"; | ||
| font-variant-position: sub; | ||
| } | ||
| } | ||
| /*superscript*/ | ||
| .rubik-light-sups { | ||
| --rubik-light-sups: "sups" on; | ||
| } | ||
| @supports (font-variant-position: super) { | ||
| .rubik-light-sups { | ||
| --rubik-light-sups: "____"; | ||
| font-variant-position: super; | ||
| } | ||
| } | ||
| /*tabular numbers*/ | ||
| .rubik-light-tnum { | ||
| --rubik-light-tnum: "tnum" on; | ||
| } | ||
| @supports (font-variant-numeric: tabular-nums) { | ||
| .rubik-light-tnum { | ||
| --rubik-light-tnum: "____"; | ||
| font-variant-numeric: tabular-nums; | ||
| } | ||
| } | ||
| /*slashed zero*/ | ||
| .rubik-light-zero { | ||
| --rubik-light-zero: "zero" on; | ||
| } | ||
| @supports (font-variant-numeric: slashed-zero) { | ||
| .rubik-light-zero { | ||
| --rubik-light-zero: "____"; | ||
| font-variant-numeric: slashed-zero; | ||
| } | ||
| } | ||
|
|
||
| /* Apply current state of all custom properties | ||
| whenever a class is being applied */ | ||
|
|
||
| .rubik-light-case, | ||
| .rubik-light-frac, | ||
| .rubik-light-pnum, | ||
| .rubik-light-sinf, | ||
| .rubik-light-subs, | ||
| .rubik-light-sups, | ||
| .rubik-light-tnum, | ||
| .rubik-light-zero { | ||
| font-feature-settings: | ||
| var(--rubik-light-case), | ||
| var(--rubik-light-frac), | ||
| var(--rubik-light-pnum), var(--rubik-light-sinf), | ||
| var(--rubik-light-subs), var(--rubik-light-sups), var(--rubik-light-tnum), | ||
| var(--rubik-light-zero); | ||
| } | ||
|
|
||
| /* Variable instances */ | ||
| .rubik-light-light { | ||
| font-variation-settings: "wght" 300; | ||
| } | ||
|
|
||
| .rubik-light-regular { | ||
| font-variation-settings: "wght" 400; | ||
| } | ||
|
|
||
| .rubik-light-medium { | ||
| font-variation-settings: "wght" 500; | ||
| } | ||
|
|
||
| .rubik-light-semibold { | ||
| font-variation-settings: "wght" 600; | ||
| } | ||
|
|
||
| .rubik-light-bold { | ||
| font-variation-settings: "wght" 700; | ||
| } | ||
|
|
||
| .rubik-light-extrabold { | ||
| font-variation-settings: "wght" 800; | ||
| } | ||
|
|
||
| .rubik-light-black { | ||
| font-variation-settings: "wght" 900; | ||
| } | ||
|
|