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

&amp; = 
 & = 
 
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 (&nbsp;) 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.

Dynamic text inside active forms. A short script without character recognition simulates the PHP function on click.
Complex characters (such as g or j, diacritics and most of the symbols) have nested elements and rely on the character recognition to render properly.

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.

12px
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

  1. Open counters created with backgrounds (e.g. c, e, schwa) works only with fixed attachments, using the same image.
  2. The background-image property won't work on characters built exclusively with borders (star symbol).
  3. 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).

Default lowercase.
Stylistic alternates.
<pre class="regular css salt" ...
Default css text.
Ordinal indicators.
<pre class="bold css ordn" ...
Inline figures.
Oldstyle numbers and slashed zeros.
<pre class="regular css onum slsh" ...
Figures and slash dividers.
Figures and slashes as fractions.
<pre class="bold css frac" ...
Default css text.
Superscripts.
<pre class="regular css sups" ...
White symbols.
Negative correspondent symbols.
<pre class="light css blck" ...

Activation

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

  1. Afar
  2. Afrikaans
  3. Albanian
  4. Alsatian
  5. Azeri
  6. Bambara
  7. Bari
  8. Basque
  9. Bislama
  10. Bosnian
  11. Breton
  12. Catalan
  13. Cebuano
  14. Chamorro
  15. Chichewa
  16. Corsican
  17. Croatian
  18. Czech
  19. Danish
  20. Dutch
  21. English
  22. Esperanto
  23. Estonian
  24. Faroese
  25. Fijian
  26. Filipino
  27. Finnish
  28. Flemish
  29. French
  30. Friulian
  31. Gagauz
  32. Galician
  33. German
  34. Greenlandic
  35. Haitian Creole
  36. Hausa
  37. Hawaiian
  38. Hmong
  39. Hungarian
  40. Icelandic
  41. Indonesian
  42. Irish
  43. Italian
  44. Javanese
  45. Khasi
  46. Kiribati
  47. Kirundi
  48. Kurdish
  49. Latin
  50. Latvian
  51. Lombard
  52. Luxembourgish
  53. Machame
  54. Malagasy
  55. Malay
  56. Maltese
  57. Manx
  58. Maori
  59. Moldavian
  60. Norwegian
  61. Papiamento
  62. Piedmontese
  63. Pinyin
  64. Polish
  65. Portuguese
  66. Provençal
  67. Romanian
  68. Romansh
  69. Romany
  70. Rotokas
  71. Sami
  72. Samoan
  73. Sango
  74. Sardinian
  75. Scottish
  76. Sediq Taroko
  77. Serbian Latin
  78. Sesotho
  79. Shona
  80. Slovenian
  81. Soga
  82. Somali
  83. Spanish
  84. Sundanese
  85. Swahili
  86. Swedish
  87. Tagalog
  88. Tatar
  89. Turkish
  90. Türkmen
  91. Welsh
  92. West Frisian
  93. Wolof
  94. Xhosa
  95. Zulu

*List generated based on specific characters for every language, found in the diacritics table.

1. NO FONT

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

  1. 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.
  2. SEO Friendly

    Important data can be included using tag properties, the same way the alt attribute works for images.
  3. 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.
  4. 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).
  1. 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.
  2. Not Interactive

    The most common display functions, such as sort, will have to rely on classes, not on content.
  3. 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.
  4. 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

  1. Public

    Anyone can create his own font. Short texts can be rendered manually, the PHP function is not a requirement.
  2. 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.
  3. Live

    Every adjustment result is instant. Conversions, exports, imports or other processes to activate the font are eliminated from the process.
  1. Limited Design

    There's not a wide selection to choose from and the design options are limited to CSS possibilities.
  2. 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.
  3. 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.

    Post Scriptum51 of 51
    Posted