BrushScript, Brush011FONT508GLYPHSAlso known as “LeviBrush”, the Brush font is one of the first fonts made for online, initially created for a single title in the 2003 portfolio since I couldn’t find the right fit.
CrayolaScript, Handwriting021FONT369GLYPHSCrayola is one of the oldest exercise with textures from the period when each tool was tested to see how it behaves in digital format.
Dry BrushScript, Brush031FONT433GLYPHSDry Brush is the Brush font “reloaded”, with more focus on the texture and the gesture, trying to get the maximum out of it.
Fashion FetishBook, Sans, Geometric048FONTS1,385GLYPHSFashion Fetish initially was created to test the readability limits of a very light font on screen, but eventually this became a full font, with accents, symbols and special characters.
Gotcha GothicDisplay, Sans, 3D077FONTS1,053GLYPHSGotcha Gothic is a personal approach to classics, created to have an extended option for headings, with lowercases, accents and iconography, not necessarily for web.
HermanoMayorDisplay, Sans, Vintage093FONTS1,132GLYPHSHermanoMayor is the grandfather of HermanoAlto, resulted from various exercises with block elements, looking for a very compact design that offers a good visibility in headlines.
LipsumScript, Handwriting111FONT342GLYPHSLipsum is a lighter version of the loremipsum font, created as an alternative for longer texts, but since the two fonts were drawn separately, this can’t be considered just a weight variant.
loremipsumScript, Handwriting121FONT523GLYPHSThe loremipsum font is the result of many desperate attempts to reduce the time spent in accounting, this font especially was designed only as a handwriting substitute for various digital documents.
MarkerScript, Handwriting141FONT534GLYPHSMarker is a handwriting font drawn with a worn-out marker, made in the series of the early experiments that involved any tool that’s been lying around.
OgonekBook, Sans, Neutral158FONTS662GLYPHSOgonek was created with the express role of having a neutral, easily readable, but hardly identifiable font, worthy of any lorem ipsum text.
PostScriptumDisplay, Sans, Monoline166FONTS1,043GLYPHSPostScriptum is based on a minimal construction and a very strict grid, with small weight variations and a condensed design that will result in a compact text, in every use.
pxlxxlDisplay, Bitmap178FONTS662GLYPHSpxlxxl was made in 2010 for a personal website that involved pixel related designs, so the font was built using only vertical and horizontal lines.
RubberDisplay, Sans, Retro183FONTS643GLYPHSRubber is a collection of various identity proposals using custom letters, redesigned to form a single style across all its characters.
RulerBook, Sans, Monoline1912FONTS381GLYPHSA mix between a condensed Gothic and a typewriter, inspired by the technical fonts you find on charts, Ruler is meant to add a scientific look to the design, without being too elaborated.
Ruler ModernDisplay, Sans, Retro211FONT817GLYPHSRuler Modern is the Ruler Rounded font “alienated” a little further, to the extreme point when the font is still readable but has a small resemblance with the basic version.
Ruler RoundedDisplay, Sans, Monoline228FONTS535GLYPHSThe Ruler series are based on the Ruler Rounded metrics, a font that initially was created as an experiment, to see how a side-effect would act on a geometric font structure.
Sugar VinegarDisplay, Serif, Vintage251FONT1,430GLYPHSSugar & Vinegar is an old-fashioned font, with a “handmade” warm touch, avoiding sharp corners, grids or very strict guidelines, created with a fluid, personal and expressive line.
Virgula VulgarisBook, Serif261FONT2,161GLYPHSVirgula Vulgaris (Common Comma in Latin) is meant to sum up the most usual forms of a serif font, avoiding styles and side-effects that would only come between the reader and the text.
WindowsDisplay, Bitmap, Techno277FONTS622GLYPHSThe font was made using Windows95 titlebars as inspiration, redrawing each character pixel by pixel, at times when bitmap fonts were on every desktop, and not by choice.
Let me elaborate. This is a way to render a text without using any font at all. A random text is split with PHP into words and letters, then rendered as HTML elements with classes. Every element is styled with CSS to create the characters, only this time the result is not an actual font.
Yes, this is just a HTML controlled with CSS, but still, it is a software, it gets the message through, it has all the properties a conventional font does, so we'll call it a font. A font without a format.
How it Works
CSS Character 1. Main shape; 2. Extra element; 3, 4. Pseudo elements.1234
A CSS font is written, not drawn, so the "hand-made" concept is eliminated completely. This is a hybrid of web and font design, a character is built with basic CSS rules and used inline to behave like a font. Metrics, Weights, OpenType Features and all the other font properties are controlled exclusively with the CSS file.
The font design is based on the elements border width, which makes it extremely versatile. Excepting script fonts, several styles can result just from border variations, using the same shape. In CSS the styling has effect on several characters at once, the design can be adjusted with any text editor and has an instant effect.
Sans extra elements
The first preview is a serif, only to show a complex design that involves more elements (i.e. finials, serifs, terminals) and variable border widths. Extra elements (Fig. 01.A.2.) are generated when the ::before and ::after pseudo-element is not enough to form a character.
As usual, a sans font will have fewer elements to deal with, the file is smaller and will load faster. This is not really an issue, a CSS file can be X times bigger than a custom font and will still load way faster than with the @font rule. It's only logical, HTML always come first.
Design First
The idea behind the project is to get the maximum out of the most basic resources, to simplify the setup process if possible and get rid of dependencies, just to make sure that the design is the same on devices with disabled scripts. A script free solution should eliminate annoying flickers on load and render actual characters instead of empty squares, already a common characteristic for online texts. Accesibility and the fun are bonus features.
Function Later
Naive Start
The font is valid for situations when the design is more important than the function. This means giving up on text editing possibilities onscreen.
On digital displays accurate sizes resulted from elaborated mathematical formulas are not always reproduced as expected. Logical values were replaced with optical sizes, but even so, the design relies on the pixel ratio and can hide a few surprizes.
Online still doesn't have a common language, CSS rules may have different meaning for every browser, and each one has its own limitation. The font is designed and tested with Chrome and Firefox, with CSS properties that are not supported by Internet Explorer (browser no longer supported by its own team - from the Microsoft Blog). Random codes are included in the presentation to follow the methods and the process.
Disclaimer
The font is not created to replace or minimize standard systems and the result is far from a final solution. This is an experiment and should be treated as such.
HTML Syntax
Any HTML element can include the CSS font, as long it has the "css" class, next to the weight of the font. To select a weight, the "thin", "regular" or "bold" class is used, something like <pre class="regular css"> … (the <pre> tag here is just a safety measure, to make sure that no other style would interfere with the font).
Available weights.
The HTML content is generated by PHP. The function removes extra spaces and creates matching groups for every word and letter. An angle bracket (<) is ignored if this has a closing correspondent (>), leaving every tag intact. URLs, file paths or other additional infos found in the tag are encoded just the same by the browser.
Charset
The PHP function is set to recognize characters by unicode, without worrying about the charset attribute, which means that special characters set in the function will be displayed as they are supposed to.
Character Entities
& =
& =
HTML entities and URL Escape Codes are not decoded and will be ignored. PHP generates each character as typed.
This is not an accidental feature, it is meant to simplify the text editing process by eliminating all the research, but it comes with a few conditions. Inline HTML entities must be avoided or replaced with alternatives, for example sections that need non-breaking spaces ( ) can be wrapped in the <nobr> tag.
HTML Tags
Depending on layout preferences, specific tags can be treated as objects (a, u, ins, del), to emulate and customize their native appearance and behaviour. Even if in some cases their appearance is the default (list-style-types for example), due to font size differences, these need a new styling.
Conventional HTML syntax with underline tag. <span class="nowrap">Good old<u>underline</u>.</span>
Except for text formatting elements (h1-h6, strong, em, small, sup, sub, etc.) that will need new rules to have the right effect on the text, most of the semantic elements (form, ol, li) work with their custom settings.
Ids and Classes
HTML tags with ids or classes are used also to access and create alternates. Special characters may have a matching Unicode, but sometimes these are far from reach to have a practical use. Classes are used to simplify the process, some characters can be used as code specific or as regular figures, alternated with a class (see Features).
The CSS font is ten times bigger than average fonts, so the usual font-size is divided by ten.
This is your system font. p {font-size: 50px}
Default font, Arial, Helvetica or another sans-serif.
Font size set to match default sizes.
Settings
The font-size is set in the CSS file, the same as every font, using viewport width, percentage, pixels, em or rem (relative to the font-size of the parent or to the base font-size). Values set in pixels works with decimals.
Limitations
Since this is not really a font, in order to have a sharper display, some browsers instead of blurring the elements, will move them to the closest integer value or even change their dimensions. This is more obvious on small sizes, when the pixel ratio is usually a decimal number.
The smallest size recommended is above 2.4px, to avoid weird shape shiftings.
Spaces added between letters with the "tracking" option in the PHP function.
Letter Spacing
The PHP function works differently for each type of text, depending on the desired format. For letter spacing this will insert a span after each letter, this way blocking the ligatures and creating extra options for spacing. Letter-spacing is increased or decreased using the span width or its positive/negative margins. This won't limit the use of a span tag outside the words.
The letter margins are reserved for kerning, and padding would interfere with the design. If a spacing is used globally, the best option is to rewrite the kerning for every letter in the CSS file.
Word Spacing
The word spacing depends on the right margin of the words. This works independently and must be adjusted with every letter-spacing, to fit the new setup.
Line Height
Because the font is ten times bigger, usual values are multiplied with ten. The minimum line height is 7 since the base heights of the characters are 7em. For smaller heights than 100% the words need negative top and bottom margins.
Default system font. p {line-height: 1.8}
Default line height.
Equivalent line height for the CSS text.
The :first-child pseudo-element selector is used instead the usual :first-letter.
Font Style
The classic font-weight, font-style and font-stretch settings in CSS have no effect on the font. The character metrics take the border width and the component elements into account, and because of that global transformations in CSS to get Bold, Italics, Oblique, Condensed, Expanded or other versions have inconsistent results. Characters must be redesigned individually to have another style.
Selective adjustments of words and letters doesn't involve complex codes and scripts. In special circumstances the component elements of a character can be modified as well.
Text Alignment
The text-align and the text-indent works by default. The CSS text will align to any setup even without a text content.
Line Breaks
Block-level elements (e.g. div, p, ol) placed inside the CSS text will cause a line break, as it would normally. The <br> tag works as expected.
Word breaks in progress.
Colors
CSS variable in action.
CSS Variable
Negative elements will inherit the background color with a variable. A global color variable is required in CSS to create a cutout effect for overlapping elements that otherwise would follow the parent color (complex outlines are the result of overlaying elements, where the element on top is matched with the background).
The CSS variable is used as an alternative to the clip-path rule, not fully supported in every browser. The lesser evil, CSS variables works fine except in Internet Explorer.
Side Effects
The downside is that shadows and some effects can have unexpected or even opposite results on elements with variable properties. For shadows the symbol is a full object and the filter doesn't have inner options.
The font is built with borders and transformations, these are excluded from the effects.
Background Images
Cutout effect with fixed backgrounds and using the mix-blend-mode.
Issues
Open counters created with backgrounds (e.g. c, e, schwa) works only with fixed attachments, using the same image.
The background-image property won't work on characters built exclusively with borders (star symbol).
The background is changed if the element has size or position transformations (scale, skew, rotate, .etc). In Firefox the fixed attachment rule is not working at all on transformed elements.
Solution
Where a background cannot be used (2, 3), the solution is {mix-blend-mode: lighten} on dark backgrounds and darken on light backgrounds.
In order to work, the transform-style property needs to be flat instead of preserve-3d (apparently the 3d transform renders layers or masks in conflict with the initial element index).
Usual characters restyled inline to form a ligature. The dot becomes the connecting element.
A CSS ligature is not a stand-alone character and doesn't have a specific class. Different from conventional OpenType Features, the characters are restyled, not replaced. The interaction is controlled in CSS by styling the second element, to merge or form a new character.
Hyphen and More sign shaped into the right arrow. The same technique is applied in reverse, for long arrows alike: < + - + - = ⟵ and - + - + > becomes ⟶
Ligatures work by default and can be deactivated in the CSS file or using the "tracking" option in the PHP function (more in the Spacing section).
The features are activated with a specific class added to the parent container. This is valid also for Subscripts (subs), Enclosed Alphanumerics (circ) and the Optical size (size). The same recipe should work with any desired feature, including Small Caps, Titling or even squared dots.
Options
Alternates are rendered in any circumstances, regardless if a character is registered or not, in every browser, with or without font feature support. For selective conversions a feature can be activated by specific HTML tags, the same way classic styling works.
Classes with similar functions to OpenType are named after the Registered Features.
The structure of diacritics are similar with the usual type designs, combining basic characters with accents, but unlike in OpenType Fonts (OTF), these will remain active and open for any change or interaction.
Not every diacritic has to exist in the character map, the tables are for preview. If a diacritic is listed in the PHP function and it's only a matter of pairing, it will be displayed automatically (e.g. W with acute from the Additional Latin table).
Language Support
Afar
Afrikaans
Albanian
Alsatian
Azeri
Bambara
Bari
Basque
Bislama
Bosnian
Breton
Catalan
Cebuano
Chamorro
Chichewa
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Fijian
Filipino
Finnish
Flemish
French
Friulian
Gagauz
Galician
German
Greenlandic
Haitian Creole
Hausa
Hawaiian
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Javanese
Khasi
Kiribati
Kirundi
Kurdish
Latin
Latvian
Lombard
Luxembourgish
Machame
Malagasy
Malay
Maltese
Manx
Maori
Moldavian
Norwegian
Papiamento
Piedmontese
Pinyin
Polish
Portuguese
Provençal
Romanian
Romansh
Romany
Rotokas
Sami
Samoan
Sango
Sardinian
Scottish
Sediq Taroko
Serbian Latin
Sesotho
Shona
Slovenian
Soga
Somali
Spanish
Sundanese
Swahili
Swedish
Tagalog
Tatar
Turkish
Türkmen
Welsh
West Frisian
Wolof
Xhosa
Zulu
*List generated based on specific characters for every language, found in the diacritics table.
1. NO FONT
Instant Load
In the absence of an actual text, the browser doesn't wait for a font and a script to render the page. The CSS file along with HTML elements are cached, which means even faster loads.
Universal
Every browser and server will recognize a CSS. Less worries to find the right format that works the same in every browser. A server will not check for a specific format to allow access.
No Dependencies
The CSS font doesn't need alternate / system fonts to display the text. The same CSS that styles the page can include the font. The browser will not display a default font, not before or after the page load. The font will not rely on third parties and scripts to load, the design is not different on browsers with disabled scripts.
No Embedding
The CSS font is fully integrated into a webpage, it is adapted to the layout without replacing other elements on load. Every page property is automatically valid for the text and this will show up the way it was intended, without after effects or issues of functionality.
Selective Use
The font can be reduced to a limited number of characters, the full version is not required if the layout has a single word or a symbol, for example.
Moderate Use
The speed of the page load may suffer if a CSS font is generated for extended texts. Recommended for headlines, titles, excerpts and short paragraphs.
Common
The CSS font will not benefit from special treatments, for the browser this is just another HTML element. As a result there's no optimization or kerning support and at small sizes the font is not displayed properly. The pixels have a hard time sharing thin lines, and even though position translate is a solution at some extent, this creates unnecessary blurs.
Hard Coded
Usual font settings won't work by default and styling tags (strong, em and such) have no effect. The functions must be set in the CSS file and requires a different approach, working with HTML elements instead of fonts.
Exclusive
This is a webfont only, it is limited to digital media controlled with CSS. The design cannot be translated to offline, unless someone finds a way to integrate CSS into vector softwares.
Abstract
Without a stand-alone file the font is hard to be identified, traced or transferred. Cannot be tested or developed in its inactive state. Despite being an important part of a layout, the font remains an invisible tool.
2. NO TEXT
Full Security
The actual text is not present on the page, which means that sensitive informations can be easily displayed without the fear of spam or phishing.
SEO Friendly
Important data can be included using tag properties, the same way the alt attribute works for images.
Customizable
To build complex characters or functions, the font is open for any HTML element, in different formats. In a text every word and letter can be styled individually, adding extra properties or side effects without a script.
Contextual
The font design is not limited to predefined characters, properties and behaviours can change depending on context without creating new characters (e.g. arrowheads inside hyperlinks have different sizes).
Not Selectable
The text cannot be selected or used in inputs and textareas. For an editable font or to load later content a new function is needed, to repeat the whole character recognition found in PHP.
Not Interactive
The most common display functions, such as sort, will have to rely on classes, not on content.
Not Printable
The online print supports only basic CSS rules, sometimes ignoring the common setup. Since the CSS font is actually a graphic, the print quality will rely strictly on the browser's capabilities.
No Accessibility
The CSS font will adjust to page zoom, but the font size and the languages cannot be changed through the browser. Additional codes are required to make this possible, only inside the page. Custom browser functions (find, reader) cannot access the text content, since there is none on display.
3. NO SOFTWARES
Public
Anyone can create his own font. Short texts can be rendered manually, the PHP function is not a requirement.
Basic
The design is accessible with any text editor or developer tool. Elementary skills using border widths, border radius, shapes and sizes is enough to redesign any character.
Live
Every adjustment result is instant. Conversions, exports, imports or other processes to activate the font are eliminated from the process.
Limited Design
There's not a wide selection to choose from and the design options are limited to CSS possibilities.
Multitask
You need to know your CSS to make adjustments in the font and the other way round. Every setup is done manually, kerning included.
No Protection
The design code is accessible to anyone, the same as any online element. The design cannot be really protected from unauthorized copying and usage.
Basic Latin
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
asalt
gsalt
ysalt
Diacritics
Agrave
Aacute
Acircumflex
Atilde
Adieresis
Aring
Amacron
Abreve
Aogonek
AE
Ccedilla
Cacute
Ccircumflex
Cdotaccent
Ccaron
Dcaron
Eth
Egrave
Eacute
Ecircumflex
Edieresis
Emacron
Ebreve
Edotaccent
Eogonek
Ecaron
Schwa
Gcircumflex
Gbreve
Gcommabelow
Gdotaccent
Hcircumflex
Hbar
Igrave
Iacute
Icircumflex
Idieresis
Itilde
Imacron
Ibreve
Iogonek
Idotaccent
IJ
Jcircumflex
Kcommabelow
Lacute
Lcommabelow
Lcommaaccent
Ldot
Lslash
Ntilde
Nacute
Ncommabelow
Ncaron
Eng
Ograve
Oacute
Ocircumflex
Otilde
Odieresis
Omacron
Obreve
Ohungarumlaut
Oslash
OE
Racute
Rcommabelow
Rcaron
Sacute
Scircumflex
Scedilla
Scaron
Scommabelow
Germandbls
Tcedilla
Tcaron
Tbar
Tcommabelow
Ugrave
Uacute
Ucircumflex
Udieresis
Utilde
Umacron
Ubreve
Uring
Uhungarumlaut
Uogonek
Wgrave
Wacute
Wcircumflex
Wdieresis
Ygrave
Yacute
Ycircumflex
Ydieresis
Zacute
Zcaron
Zdotaccent
Thorn
agrave
aacute
acircumflex
atilde
adieresis
aring
amacron
abreve
aogonek
ae
ccedilla
cacute
ccircumflex
cdotaccent
ccaron
dcaron
dcommaaccent
dbar
eth
egrave
eacute
ecircumflex
edieresis
emacron
ebreve
edotaccent
eogonek
ecaron
schwa
gcircumflex
gbreve
gcommaaccent
gdotaccent
hcircumflex
hbar
igrave
iacute
icircumflex
idieresis
itilde
imacron
ibreve
iogonek
dotlessi
ij
jcircumflex
dotlessj
kcommabelow
lacute
lcommabelow
lcommaaccent
ldot
lslash
ntilde
nacute
ncommabelow
ncaron
eng
napostrophe
ograve
oacute
ocircumflex
otilde
odieresis
omacron
obreve
ohungarumlaut
oslash
oe
racute
rcommabelow
rcaron
sacute
scircumflex
scedilla
scaron
scommabelow
germandbls
longs
tcedilla
tcommaaccent
tbar
tcommabelow
thorn
ugrave
uacute
ucircumflex
udieresis
utilde
umacron
ubreve
uring
uhungarumlaut
uogonek
wgrave
wacute
wcircumflex
wdieresis
ygrave
yacute
ycircumflex
ydieresis
zacute
zcaron
zdotaccent
agravesalt
aacutesalt
acircumflexsalt
atildesalt
adieresissalt
aringsalt
amacronsalt
abrevesalt
aogoneksalt
aesalt
gcircumflexsalt
gbrevesalt
gcommaaccentsalt
gdotaccentsalt
ygravesalt
yacutesalt
ycircumflexsalt
ydieresissalt
Ligatures
fi
fj
ff
fl
ft
ffi
ffj
ffl
st
tt
tf
ttf
Currency
currency
dollar
cent
dollaroldstyle
euro
sterling
yen
florin
bitcoin
baht
cedi
guarani
rupee
Punctuations
notdef
period
comma
colon
semicolon
ellipsis
exclamation
question
exclamdown
questiondown
parenleft
parenright
braceleft
braceright
bracketleft
bracketright
slash
backslash
underscore
hyphen
bar
brokenbar
quote
quotedbl
guilsinglleft
guilsinglright
guillemotleft
guillemotright
ampersand
ampersandsalt
paragraph
section
at
copyright
soundcopyright
registeredsize
registered
asterisk
servicemark
trademark
ordfeminine
ordmasculine
erordn
dordn
eordn
stordn
ndordn
rdordn
thordn
quotesinglbase
quotedblbase
quoteleft
quoteright
quotedblleft
quotedblright
dagger
daggerdbl
periodcentered
openbullet
bullet
trianglebullet
grave
acute
circumflex
caron
dieresis
tilde
breve
macron
ring
hungarumlaut
dotaccent
commaaccent
commabelow
cedilla
ogonek
Operators
hash
plus
minus
multiply
divide
equal
notequal
plusminus
logicalnot
similar
notsimilar
approxequal
equivalent
notequivalent
less
more
integral
radical
fraction
degree
diameter
infinity
percent
perthousand
Alpha
Beta
Gamma
Delta
Kappa
Lambda
Nabla
Omega
Pi
Sigma
alpha
beta
gamma
delta
kappa
micro
pi
partialdiff
numero
estimated
Numbers
zero
one
two
three
four
five
six
seven
eight
nine
zeroslsh
zeroonum
oneonum
twoonum
threeonum
fouronum
fiveonum
sixonum
sevenonum
eightonum
nineonum
zeroonumslsh
threesalt
threeonumsalt
zerosups
onesups
twosups
threesups
foursups
fivesups
sixsups
sevensups
eightsups
ninesups
zerosubs
onesubs
twosubs
threesubs
foursubs
fivesubs
sixsubs
sevensubs
eightsubs
ninesubs
onehalffrac
onethirdfrac
onequarterfrac
onefifthfrac
onesixthfrac
oneseventhfrac
oneeigthfrac
oneninethfrac
twothirdsfrac
twofifthfrac
threequartersfrac
threefifthfrac
fourfifthfrac
zerocirc
onecirc
twocirc
threecirc
fourcirc
fivecirc
sixcirc
sevencirc
eightcirc
ninecirc
Oneroma
Tworoma
Threeroma
Fourroma
Fiveroma
Sixroma
Sevenroma
Eightroma
Nineroma
Tenroma
Elevenroma
Twelveroma
Fiftyroma
Onehundredroma
Fivehundredroma
Onethousandroma
oneroma
tworoma
threeroma
fourroma
fiveroma
sixroma
sevenroma
eightroma
nineroma
tenroma
elevenroma
twelveroma
fiftyroma
onehundredroma
fivehundredroma
onethousandroma
Symbols
arrowleft
arrowup
arrowright
arrowdown
arrowupleft
arrowupright
arrowdownright
arrowdownleft
arrowlongleft
arrowlongright
arrowleftreturn
arrowrightreturn
arrowleftblck
arrowupblck
arrowrightblck
arrowdownblck
arrowupleftblck
arrowuprightblck
arrowdownrightblck
arrowdownleftblck
arrowlongleftblck
arrowlongrightblck
arrowleftsize
arrowrightsize
triangleleft
triangleup
triangleright
triangledown
arrowleftcirc
arrowupcirc
arrowrightcirc
arrowdowncirc
arrowupleftcirc
arrowuprightcirc
arrowdownrightcirc
arrowdownleftcirc
search
info
clock
clockblck
phone
phonestrk
receiver
phoneon
phoneoff
chat
chatblck
tooltip
tooltipblck
hamburger
noentry
prohibited
pluscirc
plussize
multiplycirc
saltire
macro
camera
camerastrk
video
triangleleftcirc
pausecirc
trianglerightcirc
reply
forward
send
envelope
envelopeblck
attachment
tag
bookmark
bookmarkblck
bookblck
document
documentblck
pencil
textarea
textbold
textitalic
textunderline
textstrikethrough
textalignleft
textaligncenter
textalignright
textalignjustify
checkmark
checkbox
cube
square
squareblck
circle
circleblck
triangle
triangleblck
globe
map
location
locationblck
house
houseblck
user
profile
eye
eyestrk
leaf
cloud
droplet
dropletblck
dropletstrk
highvoltage
spark
sparkblck
star
starblck
frown
smile
smileblck
heart
heartblck
loremipsum
etc.
Excepting a few symbols, a CSS character is a graphic that corresponds with a typed letter. Ligatures and Alternates are generated only in interactions or within a feature. Non-standard characters are used as is, styled with CSS.
The large number of icons may seem excessive, but considering that this is a webfont, it is still a very limited preview of all the CSS font possibilities. A CSS icon font is probably next.
Project in development. Quality should improve. Any input is welcomed.