Tutorial 01 - Font Chart

Pleasant and uncomplicated typefaces featuring a rich array of variations (capitalization, italics, bold, kerning, etc.) are ideal for situations where the text shouldn't dominate the icon's focus, yet you still intend to incorporate text. I also utilize these fonts in conjunction with ornate typefaces, particularly when an overly elaborate font might not suit the icon, but a plain sans-serif font would appear out of context. Please note: I'm unsure if it's intended, but it seems that the Arabic Typesetting font is meant for Arabic characters; however, for some reason, it displays Latin letters, and I appreciate the appearance of the font in this context. Additionally, while Dubiel is available in a non-italic form, I only possess the italic version. Lastly, Georgia and Times New Roman are default fonts on my computer.

2 1 4 3

The more casual versions of Georgia and Times New Roman possess a clean and straightforward aesthetic. I often opt for these fonts when the text requires a more direct and bold appearance, if that makes sense. Additionally, I prefer them for subjects that aren't as elaborate – for instance, I wouldn't choose Governor or Intro for a Downton Abbey-themed icon. Instead, these fonts work well for subjects that are more playful or informal, like Disney, or when the text itself exudes a sense of fun. For instance, in the case of this Draco icon, I'd lean toward using Governor or Intro rather than Georgia or Times New Roman. These fonts also shine when you want to emphasize a specific word with an ornate font and then pair it with a clean and simple font to avoid having two fonts compete for attention within the same space.

1 1 1 1
1 1

I thoroughly enjoy employing these types of fonts for subjects with a 'historical' vibe, such as The Witcher and similar themes.

1 1 1 1
1 1 1 1

Elegant and intricate text (in italics) - Ideal for incorporating text as a background element, especially when planning to rotate the text. Italics or slanted fonts work exceptionally well in such cases. They are also highly effective for emphasizing accent words (when paired with a simpler font) or when combined with the 'historical' or 'angry' fonts.

1 1 1 1
1 1 1 1
1 1

Fonts with a casual or handwritten appearance. The informal ones are my choice for creating fun icons, while the fonts resembling handwriting are often my preference for crafting more emotional or 'deep' icons.

1 1 1 1

Here is a little faster overlook for the font chart using Icons or other samall graphics

When working with small graphics like 100x100 icons, choosing the right font and presenting it effectively is essential to maintain readability and visual appeal. Here are some steps to help you achieve the best results:

  1. Font Selection: Choose a font that is clear and easily readable at small sizes. Sans-serif fonts like Arial, Helvetica, or Open Sans often work well due to their simplicity and legibility.

  2. Font Size: Keep the font size large enough to be legible but not so large that it overpowers the graphic. A font size around 10-12 points usually works well for 100x100 graphics.

  3. Contrast: Ensure a strong contrast between the font color and the background to enhance readability. Light text on a dark background or vice versa tends to work best.

  4. Bold and Italics: Use bold or italics to emphasize certain words or phrases, but avoid overusing them, as they might make the text appear cluttered on a small graphic.

  5. Alignment: Center-align the text within the graphic to maintain a balanced appearance. This helps prevent the text from looking cramped or off-balance.

  6. Spacing: Leave some space around the text to give it breathing room. Crowding the text to the edges of the graphic can make it feel cramped.

  7. Background Consideration: If the font has a decorative style or is more complex, consider using a simple or solid background to avoid visual clutter.

  8. Test and Iterate: Always test how the font appears at the actual size of your graphic. If it's hard to read or looks cluttered, consider adjusting the font size, style, or other elements until you find the right balance.

  9. Preview in Context: After placing the text on the graphic, step back and view it from a distance or in the context of where it will be used (such as a website or app). This helps you assess its overall impact.

  10. Feedback: Don't hesitate to get feedback from others. Sometimes a fresh perspective can help identify areas for improvement.