Classifications
Old Style
This category includes the first Roman types, originally created between the late 15th and mid 18th centuries, as well as typefaces patterned after those designed in this earlier period. The axis of curved strokes is normally inclined to the left in these designs, so that weight stress is at approximately 8:00 and 2:00 o’clock. The contrast in character stroke weight is not dramatic, and hairlines tend to be on the heavy side. Serifs are almost always bracketed in old style designs and head serifs are often angled. Some versions, like the earlier Venetian old style designs, are distinguished by the diagonal cross stroke of the lowercase e.
Transitional Serifs
English printer and typographer John Baskerville established this style in the mid 18th century. These typefaces represent the transition between old style and neoclassical designs, and incorporate some characteristics of each. Baskerville’s work with calendered paper and improved printing methods (both developed by him) allowed much finer character strokes to be reproduced and subtler character shapes to be maintained. While the axis of curve strokes can be inclined in transitional designs, the strokes normally have a vertical stress. Weight contrast is more pronounced than in old style designs. Serifs are still bracketed and head serifs are oblique.
Neoclassical & Didone Serifs
These are typefaces created within the late 18th century, or their direct descendants. The work of Giambattista Bodoni epitomizes this style of type. When first released, these typefaces were called “classical” designs. Early on, however, it became apparent to printers that these were not updated versions of classic type styles, but altogether new designs. As a result their classification name was changed to “modern.” Since the mid 20th century, they have also been classified as neoclassical or didone. Contrast between thick and thin strokes is abrupt and dramatic. The axis of curved strokes is vertical, with little or no bracketing. In many cases, stroke terminals are “ball” shapes rather than an evocation of a broad pen effect. These tend to be highly mannered designs, with clearly constructed letters.
Slab Serifs
Slab serif typefaces became popular in the 19th century for advertising display. These typefaces have very heavy serifs with minimal or no bracketing. Generally, changes in stroke weight are imperceptible. To many readers, slab serif type styles look like sans serif designs with the simple addition of heavy (stroke weight) serifs.
Clarendon Serifs
This category includes the typefaces patterned after the Clarendon type styles first released in the mid 19th century. Clarendons were designed as bold faces to accompany text composition. Their stroke contrast is slight, and serifs tend to be short to medium length. Later, many of these designs were released at larger point sizes as display types. Character stroke weight that is more obvious, and serifs that tend to be longer than earlier designs, mark more current interpretations of this style.
Glyphic Serifs
Typefaces in this category tend to emulate lapidary inscriptions rather than pen-drawn text. Contrast in stroke weight is usually at a minimum, and the axis of curved strokes tends to be vertical. The distinguishing feature of these typefaces is the triangular-shaped serif design, or a flaring of the character strokes where they terminate. In some type classification systems this category is sub-divided into two groups: “glyphic” and “latin.” “Latins” are faces with strictly triangular-shaped serifs.
20 Best Web-Safe HTML Fonts
1. Arial
2. Arial Narrow
3. Times
4. Times New Roman
5. Helvetica
6. Courier
7. Courier New
8. Verdana
Verdana is an excellent on-screen font due to its readability in small size and when displayed on low-resolution screens. This is primarily due to its generous width and spacing between characters.
9. Candara
Moreover, Candara achieves a contemporary look thanks to its curves and open forms. This font is suitable for informal typographic settings such as blog post titles and taglines on websites.
10. Geneva
The font is versatile and widely used for both display and body text. The bold colors and slim strokes make this font legible in any size – it offers generous spacing with consistent length to ensure readability.
11. Calibri
12. Optima
13. Cambria
14. Garamond
15. Perpetua
16. Monaco
17. Didot
This typeface is known for its high contrast and increased stress, making it stand out. If you’re looking for a display font for your website’s heading, tagline, or titles, consider Didot.
18. Brush Script
19. Lucida Bright
20. Copperplate
Dishonorable Mention: Comic Sans
Why Should You Use an HTML Web Font?
Add HTML Fonts Manually
Adding fonts manually using HTML can be a challenge since the HTML tag is a deprecated font tag in HTML5. Instead, people now use CSS properties to change font-family properties, color, face, and other font attributes.
Add HTML Fonts Using Plugins
After the verification is complete, add your .ttf, .otf, and .woff font files and click upload to let UAF convert the custom fonts into web-safe fonts.
5. GOTHIC / BLACKLETTER CALLIGRAPHY
Gothic letters have a very strong resemblance to medieval times and it can be a great choice of style if you are trying to represent something with a long tradition, old and strong.
Graffiti can be characterized as a more ‘’free’’ art form, meaning that there aren’t really any firm rules on how to create it – like for example blackletter or copperplate calligraphy does.
Thick, thin, round, sharp – graffiti gives you total freedom of doing whatever you want, but just keep in mind that it still needs to be well balanced, have good contrast between colors etc.
TO KEEP IN MIND – if you are just starting out, or if you are simply trying a technique for the first time, don’t get discouraged if you don’t like what you’ve created at first. Repeat the same artwork 5 times and compare the first and the last one –
Resource:
https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
https://www.hostinger.com/tutorials/best-html-web-fonts
https://www.lettering-daily.com/types-of-lettering/