add articles to the three tilt fonts

diff --git a/ofl/tiltneon/article/ARTICLE.en_us.html b/ofl/tiltneon/article/ARTICLE.en_us.html
new file mode 100644 (file)
index 0000000..a8db911
--- /dev/null
+++ b/ofl/tiltneon/article/ARTICLE.en_us.html
@@ -0,0 +1,30 @@
+<p>
+    Tilt is a family of type inspired by the dimensional lettering found in storefront signage.
+    It’s comprised of three related variable font styles that you might find in a shop window — Tilt Neon, 
+    <a href="https://fonts.google.com/specimen/Tilt+Prism">Tilt Prism</a>,
+    and <a href="https://fonts.google.com/specimen/Tilt+Warp">Tilt Warp</a>.
+</p>
+<p>
+    All three are based around the same letter model of a sign painter’s geometric sans serif,
+    similar to the typefaces Futura or Avant Garde, but with the kinds of details you might expect to see
+    when the letter is built up with a brush.
+</p>
+<p>
+    The three styles are designed and built as variable fonts.
+    They allow users to rotate the orientation of their glyphs with “Rotation in X” and
+    “Rotation in Y” axes. The rotation is limited to ±45° so that the letterforms never rotate past a readable
+    range.
+</p>
+
+<p>To contribute, see <a href="https://github.com/googlefonts/Tilt-Fonts">github.com/googlefonts/Tilt-Fonts</a>.</p>
+<hr>
+<img src="hero.png">
+<p>The most common axes used in <a href="https://fonts.google.com/knowledge/glossary/variable_fonts">variable</a> fonts are Italic, Optical Size, Slant, Weight, and Width. And while you can sometimes get creative at the extremes of these axes, they're more often used to finesse type. For example, with <a href="https://fonts.google.com/knowledge/glossary/weight_axis">Weight</a>, you don't have to settle on what the type designer designated as the Bold style, you can tweak it to be a bit lighter or heavier so it's perfect for you.</p>
+<p>Variable fonts also open up many possibilities for creative expression! And Google Fonts is adding a bunch of fonts to your palette with new axes to get your juices flowing.</p>
+<h3>First up are the Tilt fonts by Andy Clymer, Tilt Neon, Tilt Prism, and Tilt Warp:</h3>
+<p>Initially sparked by the experience of seeing a neon sign from the side, Clymer was inspired to create fonts that allow the orientation of their glyphs to be rotated horizontally and vertically. "With variable fonts, I thought it was kind of amazing how the physical form of a common <a href="https://fonts.google.com/knowledge/glossary/sans_serif">sans-serif</a> could inadvertently blend into something that looked like graffiti lettering," says Clymer.</p>
+<p>All three fonts are takes on dimensional storefront signage and are controlled by Rotation in X (HROT), and Rotation in Y (VROT) variable <a href="https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts">axes</a>. The rotation is limited to ±45° so that the letterforms are always within a readable range.</p>
+<p>To learn more, visit:</p>
+<a href="https://design.google/library/get-ready-for-a-windfall-of-expressive-variable-fonts-with-new-axes">Get ready for a windfall of new axes, starting with Tilt Neon, Tilt Prism, and Tilt Warp</a>
+<br>
+<a href="https://fonts.withgoogle.com/tilt">Tilt minisite</a>
\ No newline at end of file

diff --git a/ofl/tiltneon/article/hero.png b/ofl/tiltneon/article/hero.png
new file mode 100644 (file)
index 0000000..ed527aa
Binary files /dev/null and b/ofl/tiltneon/article/hero.png differ

diff --git a/ofl/tiltprism/article/ARTICLE.en_us.html b/ofl/tiltprism/article/ARTICLE.en_us.html
new file mode 100644 (file)
index 0000000..6b81481
--- /dev/null
+++ b/ofl/tiltprism/article/ARTICLE.en_us.html
@@ -0,0 +1,32 @@
+
+<p>
+    Tilt is a family of type inspired by the dimensional lettering found in storefront signage.
+    It’s comprised of three related variable font styles that you might find in a shop window — 
+    <a href="https://fonts.google.com/specimen/Tilt+Neon">Tilt Neon</a>, 
+    Tilt Prism,
+    and <a href="https://fonts.google.com/specimen/Tilt+Warp">Tilt Warp</a>.
+</p>
+<p>
+    All three are based around the same letter model of a sign painter’s geometric sans serif,
+    similar to the typefaces Futura or Avant Garde, but with the kinds of details you might expect to see
+    when the letter is built up with a brush.
+</p>
+<p>
+    The three styles are designed and built as variable fonts.
+    They allow users to rotate the orientation of their glyphs with “Rotation in X” and
+    “Rotation in Y” axes. The rotation is limited to ±45° so that the letterforms never rotate past a readable
+    range.
+</p>
+
+<p>To contribute, see <a href="https://github.com/googlefonts/Tilt-Fonts">github.com/googlefonts/Tilt-Fonts</a>.</p>
+<hr>
+<img src="hero.png">
+<p>The most common axes used in <a href="https://fonts.google.com/knowledge/glossary/variable_fonts">variable</a> fonts are Italic, Optical Size, Slant, Weight, and Width. And while you can sometimes get creative at the extremes of these axes, they're more often used to finesse type. For example, with <a href="https://fonts.google.com/knowledge/glossary/weight_axis">Weight</a>, you don't have to settle on what the type designer designated as the Bold style, you can tweak it to be a bit lighter or heavier so it's perfect for you.</p>
+<p>Variable fonts also open up many possibilities for creative expression! And Google Fonts is adding a bunch of fonts to your palette with new axes to get your juices flowing.</p>
+<h3>First up are the Tilt fonts by Andy Clymer, Tilt Neon, Tilt Prism, and Tilt Warp:</h3>
+<p>Initially sparked by the experience of seeing a neon sign from the side, Clymer was inspired to create fonts that allow the orientation of their glyphs to be rotated horizontally and vertically. "With variable fonts, I thought it was kind of amazing how the physical form of a common <a href="https://fonts.google.com/knowledge/glossary/sans_serif">sans-serif</a> could inadvertently blend into something that looked like graffiti lettering," says Clymer.</p>
+<p>All three fonts are takes on dimensional storefront signage and are controlled by Rotation in X (HROT), and Rotation in Y (VROT) variable <a href="https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts">axes</a>. The rotation is limited to ±45° so that the letterforms are always within a readable range.</p>
+<p>To learn more, visit:</p>
+<a href="https://design.google/library/get-ready-for-a-windfall-of-expressive-variable-fonts-with-new-axes">Get ready for a windfall of new axes, starting with Tilt Neon, Tilt Prism, and Tilt Warp</a>
+<br>
+<a href="https://fonts.withgoogle.com/tilt">Tilt minisite</a>
\ No newline at end of file

diff --git a/ofl/tiltprism/article/hero.png b/ofl/tiltprism/article/hero.png
new file mode 100644 (file)
index 0000000..ed527aa
Binary files /dev/null and b/ofl/tiltprism/article/hero.png differ

diff --git a/ofl/tiltwarp/article/ARTICLE.en_us.html b/ofl/tiltwarp/article/ARTICLE.en_us.html
new file mode 100644 (file)
index 0000000..8aefc6c
--- /dev/null
+++ b/ofl/tiltwarp/article/ARTICLE.en_us.html
@@ -0,0 +1,31 @@
+<p>
+    Tilt is a family of type inspired by the dimensional lettering found in storefront signage.
+    It’s comprised of three related variable font styles that you might find in a shop window — 
+    <a href="https://fonts.google.com/specimen/Tilt+Neon">Tilt Neon</a>, 
+    <a href="https://fonts.google.com/specimen/Tilt+Prism">Tilt Prism</a>,
+    and Tilt Warp.
+</p>
+<p>
+    All three are based around the same letter model of a sign painter’s geometric sans serif,
+    similar to the typefaces Futura or Avant Garde, but with the kinds of details you might expect to see
+    when the letter is built up with a brush.
+</p>
+<p>
+    The three styles are designed and built as variable fonts.
+    They allow users to rotate the orientation of their glyphs with “Rotation in X” and
+    “Rotation in Y” axes. The rotation is limited to ±45° so that the letterforms never rotate past a readable
+    range.
+</p>
+
+<p>To contribute, see <a href="https://github.com/googlefonts/Tilt-Fonts">github.com/googlefonts/Tilt-Fonts</a>.</p>
+<hr>
+<img src="hero.png">
+<p>The most common axes used in <a href="https://fonts.google.com/knowledge/glossary/variable_fonts">variable</a> fonts are Italic, Optical Size, Slant, Weight, and Width. And while you can sometimes get creative at the extremes of these axes, they're more often used to finesse type. For example, with <a href="https://fonts.google.com/knowledge/glossary/weight_axis">Weight</a>, you don't have to settle on what the type designer designated as the Bold style, you can tweak it to be a bit lighter or heavier so it's perfect for you.</p>
+<p>Variable fonts also open up many possibilities for creative expression! And Google Fonts is adding a bunch of fonts to your palette with new axes to get your juices flowing.</p>
+<h3>First up are the Tilt fonts by Andy Clymer, Tilt Neon, Tilt Prism, and Tilt Warp:</h3>
+<p>Initially sparked by the experience of seeing a neon sign from the side, Clymer was inspired to create fonts that allow the orientation of their glyphs to be rotated horizontally and vertically. "With variable fonts, I thought it was kind of amazing how the physical form of a common <a href="https://fonts.google.com/knowledge/glossary/sans_serif">sans-serif</a> could inadvertently blend into something that looked like graffiti lettering," says Clymer.</p>
+<p>All three fonts are takes on dimensional storefront signage and are controlled by Rotation in X (HROT), and Rotation in Y (VROT) variable <a href="https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts">axes</a>. The rotation is limited to ±45° so that the letterforms are always within a readable range.</p>
+<p>To learn more, visit:</p>
+<a href="https://design.google/library/get-ready-for-a-windfall-of-expressive-variable-fonts-with-new-axes">Get ready for a windfall of new axes, starting with Tilt Neon, Tilt Prism, and Tilt Warp</a>
+<br>
+<a href="https://fonts.withgoogle.com/tilt">Tilt minisite</a>
\ No newline at end of file

diff --git a/ofl/tiltwarp/article/hero.png b/ofl/tiltwarp/article/hero.png
new file mode 100644 (file)
index 0000000..ed527aa
Binary files /dev/null and b/ofl/tiltwarp/article/hero.png differ