v2.0-alpha

The file “full_alphabet.html” contains the complete data, in svg/html format, for the current characterset (German A-Z ÄÖÜ, a-z äöüß) of “Anfangsschrift”.

(Preview here. NOTE: top row shows “Anfangsschrift” bottom row your device's system-ui font)

 

“Anfangsschrift” is a sans-serif mono-linear font intended for foundational writing/reading instruction and practice, ie ‘cognitive automation’ of the alphabet (and phonics).
It adheres to teaching an unconnected/non-cursive (‘print-style’) handwriting.

Letter shapes are deliberately ‘prototypical’ (ie generic) for maximum recognition, defining a ‘mean envelope’ of each character's ‘principal components’.
‘Exaggerated’ features like extra-long ascenders or ‘curls’ on all connectable stem ends, that supposedly aid writing fluency or legibility, are generally avoided.
Emphasis is on ‘smooth’ proportions inducing hand-writing and building graphomotor intuition for stroke sequence and direction, based on a slightly narrower ‘less geometric’ overall width.

The font can be used for animation (stroke-wise instruction) and tracing (touch-responsive overwriting), using vanilla CSS-animation attributes and Javascript. A demo (status 19SEP23) is linked here (in desktop browsers turn on touch simulation).

Letter shapes are defined by cubic bezier segments describing a single centerline. To convert this from svg to a normal outline font, set a fixed line weight and import the curves in your favorite vector/glyphs editor.

 

(Release note 17-DEC-24)

Some small tweaks have been applied; most importantly all Bezier curves avoid "zero-distance" points (i.e. a control point that has the same value as its paired anchor point), so importing the data into a font editor should cause no problems (mathematical or other). Straight curves (“lines”) are generally divided into 3 equal parts (between a1-c1-c2-a2), so sampling fixed steps through the interval "t" (0..1) will interpolate curve points at equal distances.

Figures (indo-arabic numerals) are included separately. (Preview here) Punctuation marks (?!) and (&) some special symbols (@#) will be added in the next version.

csv to svg utility

downlaod csv(s) and utility (import_csv.html/css/js) and run

from a local directory to view the glyphs in the browser.

svg stand-alone markup can be copied from the console.