add articles for bitcount - first draft

diff --git a/ofl/bitcount/article/ARTICLE.en_us.html b/ofl/bitcount/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcount/article/ARTICLE.en_us.html
+++ b/ofl/bitcount/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcount/article/image0.mp4 b/ofl/bitcount/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcount/article/image0.mp4 differ

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

diff --git a/ofl/bitcount/article/image2.png b/ofl/bitcount/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcount/article/image2.png differ

diff --git a/ofl/bitcount/article/image3.mp4 b/ofl/bitcount/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcount/article/image3.mp4 differ

diff --git a/ofl/bitcount/article/image4.png b/ofl/bitcount/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcount/article/image4.png differ

diff --git a/ofl/bitcount/article/image5.mp4 b/ofl/bitcount/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcount/article/image5.mp4 differ

diff --git a/ofl/bitcount/article/image6.png b/ofl/bitcount/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcount/article/image6.png differ

diff --git a/ofl/bitcount/article/image7.mp4 b/ofl/bitcount/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcount/article/image7.mp4 differ

diff --git a/ofl/bitcount/article/image8.mp4 b/ofl/bitcount/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcount/article/image8.mp4 differ

diff --git a/ofl/bitcount/article/image9.png b/ofl/bitcount/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcount/article/image9.png differ

diff --git a/ofl/bitcountgriddouble/article/ARTICLE.en_us.html b/ofl/bitcountgriddouble/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountgriddouble/article/ARTICLE.en_us.html
+++ b/ofl/bitcountgriddouble/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountgriddouble/article/image0.mp4 b/ofl/bitcountgriddouble/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image0.mp4 differ

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

diff --git a/ofl/bitcountgriddouble/article/image2.png b/ofl/bitcountgriddouble/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image2.png differ

diff --git a/ofl/bitcountgriddouble/article/image3.mp4 b/ofl/bitcountgriddouble/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image3.mp4 differ

diff --git a/ofl/bitcountgriddouble/article/image4.png b/ofl/bitcountgriddouble/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image4.png differ

diff --git a/ofl/bitcountgriddouble/article/image5.mp4 b/ofl/bitcountgriddouble/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image5.mp4 differ

diff --git a/ofl/bitcountgriddouble/article/image6.png b/ofl/bitcountgriddouble/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image6.png differ

diff --git a/ofl/bitcountgriddouble/article/image7.mp4 b/ofl/bitcountgriddouble/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image7.mp4 differ

diff --git a/ofl/bitcountgriddouble/article/image8.mp4 b/ofl/bitcountgriddouble/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image8.mp4 differ

diff --git a/ofl/bitcountgriddouble/article/image9.png b/ofl/bitcountgriddouble/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountgriddouble/article/image9.png differ

diff --git a/ofl/bitcountgridsingle/article/ARTICLE.en_us.html b/ofl/bitcountgridsingle/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountgridsingle/article/ARTICLE.en_us.html
+++ b/ofl/bitcountgridsingle/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountgridsingle/article/image0.mp4 b/ofl/bitcountgridsingle/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image0.mp4 differ

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

diff --git a/ofl/bitcountgridsingle/article/image2.png b/ofl/bitcountgridsingle/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image2.png differ

diff --git a/ofl/bitcountgridsingle/article/image3.mp4 b/ofl/bitcountgridsingle/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image3.mp4 differ

diff --git a/ofl/bitcountgridsingle/article/image4.png b/ofl/bitcountgridsingle/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image4.png differ

diff --git a/ofl/bitcountgridsingle/article/image5.mp4 b/ofl/bitcountgridsingle/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image5.mp4 differ

diff --git a/ofl/bitcountgridsingle/article/image6.png b/ofl/bitcountgridsingle/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image6.png differ

diff --git a/ofl/bitcountgridsingle/article/image7.mp4 b/ofl/bitcountgridsingle/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image7.mp4 differ

diff --git a/ofl/bitcountgridsingle/article/image8.mp4 b/ofl/bitcountgridsingle/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image8.mp4 differ

diff --git a/ofl/bitcountgridsingle/article/image9.png b/ofl/bitcountgridsingle/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountgridsingle/article/image9.png differ

diff --git a/ofl/bitcountpropdouble/article/ARTICLE.en_us.html b/ofl/bitcountpropdouble/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountpropdouble/article/ARTICLE.en_us.html
+++ b/ofl/bitcountpropdouble/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountpropdouble/article/image0.mp4 b/ofl/bitcountpropdouble/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image0.mp4 differ

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

diff --git a/ofl/bitcountpropdouble/article/image2.png b/ofl/bitcountpropdouble/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image2.png differ

diff --git a/ofl/bitcountpropdouble/article/image3.mp4 b/ofl/bitcountpropdouble/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image3.mp4 differ

diff --git a/ofl/bitcountpropdouble/article/image4.png b/ofl/bitcountpropdouble/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image4.png differ

diff --git a/ofl/bitcountpropdouble/article/image5.mp4 b/ofl/bitcountpropdouble/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image5.mp4 differ

diff --git a/ofl/bitcountpropdouble/article/image6.png b/ofl/bitcountpropdouble/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image6.png differ

diff --git a/ofl/bitcountpropdouble/article/image7.mp4 b/ofl/bitcountpropdouble/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image7.mp4 differ

diff --git a/ofl/bitcountpropdouble/article/image8.mp4 b/ofl/bitcountpropdouble/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image8.mp4 differ

diff --git a/ofl/bitcountpropdouble/article/image9.png b/ofl/bitcountpropdouble/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountpropdouble/article/image9.png differ

diff --git a/ofl/bitcountpropsingle/article/ARTICLE.en_us.html b/ofl/bitcountpropsingle/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountpropsingle/article/ARTICLE.en_us.html
+++ b/ofl/bitcountpropsingle/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountpropsingle/article/image0.mp4 b/ofl/bitcountpropsingle/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image0.mp4 differ

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

diff --git a/ofl/bitcountpropsingle/article/image2.png b/ofl/bitcountpropsingle/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image2.png differ

diff --git a/ofl/bitcountpropsingle/article/image3.mp4 b/ofl/bitcountpropsingle/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image3.mp4 differ

diff --git a/ofl/bitcountpropsingle/article/image4.png b/ofl/bitcountpropsingle/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image4.png differ

diff --git a/ofl/bitcountpropsingle/article/image5.mp4 b/ofl/bitcountpropsingle/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image5.mp4 differ

diff --git a/ofl/bitcountpropsingle/article/image6.png b/ofl/bitcountpropsingle/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image6.png differ

diff --git a/ofl/bitcountpropsingle/article/image7.mp4 b/ofl/bitcountpropsingle/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image7.mp4 differ

diff --git a/ofl/bitcountpropsingle/article/image8.mp4 b/ofl/bitcountpropsingle/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image8.mp4 differ

diff --git a/ofl/bitcountpropsingle/article/image9.png b/ofl/bitcountpropsingle/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountpropsingle/article/image9.png differ

diff --git a/ofl/bitcountpropsingleink/article/ARTICLE.en_us.html b/ofl/bitcountpropsingleink/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountpropsingleink/article/ARTICLE.en_us.html
+++ b/ofl/bitcountpropsingleink/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountpropsingleink/article/image0.mp4 b/ofl/bitcountpropsingleink/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image0.mp4 differ

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

diff --git a/ofl/bitcountpropsingleink/article/image2.png b/ofl/bitcountpropsingleink/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image2.png differ

diff --git a/ofl/bitcountpropsingleink/article/image3.mp4 b/ofl/bitcountpropsingleink/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image3.mp4 differ

diff --git a/ofl/bitcountpropsingleink/article/image4.png b/ofl/bitcountpropsingleink/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image4.png differ

diff --git a/ofl/bitcountpropsingleink/article/image5.mp4 b/ofl/bitcountpropsingleink/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image5.mp4 differ

diff --git a/ofl/bitcountpropsingleink/article/image6.png b/ofl/bitcountpropsingleink/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image6.png differ

diff --git a/ofl/bitcountpropsingleink/article/image7.mp4 b/ofl/bitcountpropsingleink/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image7.mp4 differ

diff --git a/ofl/bitcountpropsingleink/article/image8.mp4 b/ofl/bitcountpropsingleink/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image8.mp4 differ

diff --git a/ofl/bitcountpropsingleink/article/image9.png b/ofl/bitcountpropsingleink/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountpropsingleink/article/image9.png differ

diff --git a/ofl/bitcountsingle/article/ARTICLE.en_us.html b/ofl/bitcountsingle/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountsingle/article/ARTICLE.en_us.html
+++ b/ofl/bitcountsingle/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountsingle/article/image0.mp4 b/ofl/bitcountsingle/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountsingle/article/image0.mp4 differ

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

diff --git a/ofl/bitcountsingle/article/image2.png b/ofl/bitcountsingle/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountsingle/article/image2.png differ

diff --git a/ofl/bitcountsingle/article/image3.mp4 b/ofl/bitcountsingle/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountsingle/article/image3.mp4 differ

diff --git a/ofl/bitcountsingle/article/image4.png b/ofl/bitcountsingle/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountsingle/article/image4.png differ

diff --git a/ofl/bitcountsingle/article/image5.mp4 b/ofl/bitcountsingle/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountsingle/article/image5.mp4 differ

diff --git a/ofl/bitcountsingle/article/image6.png b/ofl/bitcountsingle/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountsingle/article/image6.png differ

diff --git a/ofl/bitcountsingle/article/image7.mp4 b/ofl/bitcountsingle/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountsingle/article/image7.mp4 differ

diff --git a/ofl/bitcountsingle/article/image8.mp4 b/ofl/bitcountsingle/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountsingle/article/image8.mp4 differ

diff --git a/ofl/bitcountsingle/article/image9.png b/ofl/bitcountsingle/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountsingle/article/image9.png differ

diff --git a/ofl/bitcountsingleink/article/ARTICLE.en_us.html b/ofl/bitcountsingleink/article/ARTICLE.en_us.html
index 44c20126352a7ac06cd11b2394ab0ee6185ae391..469b764b1ece6f2b04a197ecafa56302a627da47 100644 (file)
--- a/ofl/bitcountsingleink/article/ARTICLE.en_us.html
+++ b/ofl/bitcountsingleink/article/ARTICLE.en_us.html
@@ -1 +1,76 @@
-N/A
\ No newline at end of file
+<p>Bitcount is perfect for creating layered typographic effects using different colors and font styles. A slight shift in position creates shadows, highlights, and 3D effects. If you want to reproduce a certain combination on your own site, download Bitcount, copy the HTML/CSS, and integrate the code into your site. Or just keep playing!</p>
+
+<p>To contribute, please see <a href="https://github.com/petrvanblokland/TYPETR-Bitcount">github.com/petrvanblokland/TYPETR-Bitcount</a>.</p>
+
+<video autoplay muted loop src="image0.mp4" type="video/mp4"></video>
+<!-- <img src="image0.gif"> -->
+
+<h3>Bitcount</h3> 
+    
+<h4>Introduction</h4>
+
+<p>Bitcount is a family of styles, where the core shape of letters has been reduced to the minimal number of pixels possible. We need at least 5 vertical pixels of x-height to draw “a” and “e”. Adding the minumum of 1 pixel as ascender and 1 pixel as descender, the mininum grid is 5 pixels wide and 7 pixel high. Here the <em>Bitcount Single Regular</em> is shown.</p>
+
+<img src="image1.png">
+
+<p>The large number of styles in the Bitcount family come from the virtually infinite amount of variations that are possible, even with this small amount of 35+ pixels. The styles vary is articulation of accent shapes, one or two pixel stems, roman or slanted, normal or condensed. And all of this with a range of pixels shapes, such as large/small circles and large/small squares. Here showing respectively <em>Bitcount Single Regular Circle, Bitcount Double Regular Circle and Bitcount Single Regular Square.</em></p>
+
+<img src="image2.png">
+
+<p>In order to find the best selection of styles for a specific task, this “manual” is available, illustrated with a large number of examples.</p>
+
+<p>And even Python/DrawBot programs are available for users who want to dive into it to that level of detail. E.g. to create similar animations to the ones shown in this manual.</p>
+
+<h4>Usage</h4>
+
+<p>There are many ways to use Bitcount. To name a few from practice:</p>
+<ul>
+  <li>As decorative type design, e.g. by combining a number of layers, each with their own pixel shape, color and transparency.</li>
+  <li>Layers can be used to simulate 3-D effects – suggesting shadow and globes with highlights – by not centering them on purpose.</li>
+  <li>As type design for usage in hardware devices (such as running LED-displays) where there is very limited space, or if there is a fixed grid.</li>
+  <li>As display type in very small sizes in very low resolution or as hard-core bitmap fonts, e.g. to build into low-resolution devices, such as displays and printers.</li>
+  <li>As template for physical type, e.g. with LEGO bricks, flower-pots or lights behind a grid of windows in a building.</li>
+</ul>
+
+<h5>Decorative designs</h5>
+
+<p>Since most of the Bitcount letters within the same variant (Grid, Mono, or Prop) have identical spacing, they can be used in overlapping layers to create colorful decorative type.</p>
+
+<video autoplay muted loop src="image3.mp4" type="video/mp4"></video>
+
+<!-- <img src="image3.gif"> -->
+
+<p>Multiple layers of Bitcount generate an infinite amount of pixels shape combinations.</p>
+
+<p>The animated examples give fast overview of possible combination, in plain or transparant colors.</p>
+
+<img src="image4.png">
+
+<p>For a whole letter this would look like this:</p>
+
+<video autoplay muted loop src="image5.mp4" type="video/mp4"></video>
+
+<!-- <img src="image5.gif"> -->
+
+<p>Here is an overview of 3 random layers. Each of these combinations can be used as pixel shape for any layer combination of Bitcount letters.</p>
+
+<img src="image6.png">
+
+<h4>Running LED-displays</h4>
+
+<p>Example of <em>Bitcount Grid Double</em> with fixed height in 7 pixel grid display and fixed monospaced width of 6 pixels. Note the use of <em>Bitcount Grid Double Italic</em> to simulate the slanted delay of electronics in physical LED-displays with running text.</p>
+
+<video autoplay muted loop src="image7.mp4" type="video/mp4"></video>
+
+<!-- <img src="image7.gif"> -->
+
+<p>Example of <em>Bitcount Prop Single</em> with height of 10 pixels, with extended ascenders and descenders (by OpenType Features) and proportional spacing. Also here, <em>Bitcount Prop Single Italic</em> is used to slant the running text.</p>
+
+<video autoplay muted loop src="image8.mp4" type="video/mp4"></video>
+<!-- <img src="image8.gif"> -->
+
+<h4>Low resolution screens</h4>
+
+<p>Weight variations can be made by altering the pixel size (or intensity), instead of adding more pixels. Although the 2-pixel contrast stem of the Double variant in this example could be interpreted as bold, it is compensated by using very small or light pixels.</p>
+
+<img src="image9.png">
\ No newline at end of file

diff --git a/ofl/bitcountsingleink/article/image0.mp4 b/ofl/bitcountsingleink/article/image0.mp4
new file mode 100644 (file)
index 0000000..c341de3
Binary files /dev/null and b/ofl/bitcountsingleink/article/image0.mp4 differ

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

diff --git a/ofl/bitcountsingleink/article/image2.png b/ofl/bitcountsingleink/article/image2.png
new file mode 100644 (file)
index 0000000..77c8946
Binary files /dev/null and b/ofl/bitcountsingleink/article/image2.png differ

diff --git a/ofl/bitcountsingleink/article/image3.mp4 b/ofl/bitcountsingleink/article/image3.mp4
new file mode 100644 (file)
index 0000000..ba07cd6
Binary files /dev/null and b/ofl/bitcountsingleink/article/image3.mp4 differ

diff --git a/ofl/bitcountsingleink/article/image4.png b/ofl/bitcountsingleink/article/image4.png
new file mode 100644 (file)
index 0000000..29f4cb4
Binary files /dev/null and b/ofl/bitcountsingleink/article/image4.png differ

diff --git a/ofl/bitcountsingleink/article/image5.mp4 b/ofl/bitcountsingleink/article/image5.mp4
new file mode 100644 (file)
index 0000000..00e2e10
Binary files /dev/null and b/ofl/bitcountsingleink/article/image5.mp4 differ

diff --git a/ofl/bitcountsingleink/article/image6.png b/ofl/bitcountsingleink/article/image6.png
new file mode 100644 (file)
index 0000000..790c2b3
Binary files /dev/null and b/ofl/bitcountsingleink/article/image6.png differ

diff --git a/ofl/bitcountsingleink/article/image7.mp4 b/ofl/bitcountsingleink/article/image7.mp4
new file mode 100644 (file)
index 0000000..045c145
Binary files /dev/null and b/ofl/bitcountsingleink/article/image7.mp4 differ

diff --git a/ofl/bitcountsingleink/article/image8.mp4 b/ofl/bitcountsingleink/article/image8.mp4
new file mode 100644 (file)
index 0000000..9dedd5e
Binary files /dev/null and b/ofl/bitcountsingleink/article/image8.mp4 differ

diff --git a/ofl/bitcountsingleink/article/image9.png b/ofl/bitcountsingleink/article/image9.png
new file mode 100644 (file)
index 0000000..46214c7
Binary files /dev/null and b/ofl/bitcountsingleink/article/image9.png differ