Michael Gaigg: Über UI/UX Design


Use FontAwesome font in WPF apps

Posted by Michael Gaigg

What seems to be so trivial on the web feels like jumping through hoops in WPF. But yet again, it's actually that difficult really. Here is how to do:

Custom Fonts in WPF

  1. Download the TrueType font (.ttf) you are interested in, e.g.

    Find system name

  2. Find the system name of the font which is most likely different to the filename

    Find system name

  3. Add the file to your WPF solution preferably in its own directory like 'fonts'
  4. Check the properties of the font file and make sure the Build Action is set to 'Resource'

    Check properties

  5. Add the style reference to App.xaml

Here is how this little snippet will look like:


Highlights for Week 47/2011

Posted by Michael Gaigg


500+ Free Stunning PC Icons

Posted by Michael Gaigg

Set 'Dortmund' at http://pc.de/icons/

Set 'Dortmund' at http://pc.de/icons/

Download 500+ Free Stunning PC Icons

You'll find 10 sets of 1000 high-quality free .png icons in sizes 16x16 & 32x32 for bloggers and web designers to use in private & commercial projects (Creative Commons Attribution 3.0 License). Loving it!


Highlights of Week 03/2010

Posted by Michael Gaigg

Suggested reading:

Best Practices for accessible Images

Posted by Michael Gaigg

Graphics can be of great benefit to the accessibility of a Web page by providing

When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Basic Rules

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that all information conveyed with color is also available without color 2.1 c Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Until user agents allow users to control flickering, avoid causing the screen to flicker 7.1 j n/a
Provide text equivalent for Images, graphical or animated buttons, spacers, bullets 1.1 a <FORM action="..." method="post">

  <INPUT type="button" alt="Click this button to verify form" value="Verify" onclick="verify()">

  <INPUT type="image" name="submit" src="button.gif" alt="Submit form">


Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen 2.2 c For more information check the online paper about Effective Color Contrast.
When an appropriate markup language exists, use markup rather than images to convey information 3.1 n/a Mark up complex equations with e.g. MathML.
Avoid causing content to blink 7.2 n/a n/a
Avoid movement in pages 7.3 n/a i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page 14.2 n/a n/a


About Me

Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.

He has been designing map applications for 15 years and is author and curator of UI Patterns for Maps.


Popular Posts

Error: Feed temporarily unavailable.