Portable fonts for proper Unicode superscripts

Question

I'm using GraphViz to generate graphs whose nodes are mathematical formulas, similar to polynomials, with exponents. I use the UTF-8 superscripts to render them, for several reasons (first using GraphViz's support for <SUP>...</SUP> produces an ugly result with exponents being too big, and even colliding with the frame of the node, and second because I also use the same UTF-8 rendering to display textual results).

To my biggest disappointment, I discovered that, at least on Mac OS X (El Capitan), most fonts offer a really poor support for superscripts: typically 123 are not rendered like 0456789.

For instance, in Courier and Geneva, they are in bold:

in Helvetica, they are in bold and too high and not aligned:

Monaco is hardly better:

and most other well-known fonts (Times, etc.) are simply lacking these glyphs, so the rendering engine, I guess, looks for replacement in other fonts. Here is a rendering in Times New Roman, of this GraphViz file digraph {"a⁰¹²³⁴⁵⁶⁷⁸⁹"}:

Since this is math, I am really not eager to use Courier or other fixed width fonts. Because my work is used on several computers in several environments, I am looking for as portable as possible a solution.

So my question is: what font would people recommend to use with GraphViz, for SVG rendering, so that I can render elegantly mathematical formulas that include exponents?

Answer 1

Elegant is in the eye of the beholder, but here is a Graphviz program that will display superscripts in 43 different fonts. (Admittedly, several are losers). Enjoy!

digraph s {
  rankdir=LR 
  subgraph cluster_1 { label="arial"
    node_1 [fontname="arial" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_2 { label="AvantGarde-Book"
    node_2 [fontname="AvantGarde-Book" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_3 { label="AvantGarde-BookOblique"
    node_3 [fontname="AvantGarde-BookOblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_4 { label="AvantGarde-Demi"
    node_4 [fontname="AvantGarde-Demi" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_5 { label="AvantGarde-DemiOblique"
    node_5 [fontname="AvantGarde-DemiOblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_6 { label="Bookman-Demi"
    node_6 [fontname="Bookman-Demi" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_7 { label="Bookman-DemiItalic"
    node_7 [fontname="Bookman-DemiItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_8 { label="Bookman-Light"
    node_8 [fontname="Bookman-Light" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_9 { label="Bookman-LightItalic"
    node_9 [fontname="Bookman-LightItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_10 { label="calibri"
    node_10 [fontname="calibri" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_11 { label="courier"
    node_11 [fontname="courier" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_12 { label="Courier"
    node_12 [fontname="Courier" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_13 { label="Courier-Bold"
    node_13 [fontname="Courier-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_14 { label="Courier-BoldOblique"
    node_14 [fontname="Courier-BoldOblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_15 { label="Courier-Oblique"
    node_15 [fontname="Courier-Oblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_16 { label="doxfont"
    node_16 [fontname="doxfont" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_17 { label="helvetica"
    node_17 [fontname="helvetica" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_18 { label="Helvetica"
    node_18 [fontname="Helvetica" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_19 { label="Helvetica-Bold"
    node_19 [fontname="Helvetica-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_20 { label="Helvetica-BoldOblique"
    node_20 [fontname="Helvetica-BoldOblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_21 { label="Helvetica-Narrow"
    node_21 [fontname="Helvetica-Narrow" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_22 { label="Helvetica-Narrow-Bold"
    node_22 [fontname="Helvetica-Narrow-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_23 { label="Helvetica-Narrow-BoldOblique"
    node_23 [fontname="Helvetica-Narrow-BoldOblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_24 { label="Helvetica-Narrow-Oblique"
    node_24 [fontname="Helvetica-Narrow-Oblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_25 { label="Helvetica-Oblique"
    node_25 [fontname="Helvetica-Oblique" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_26 { label="monospace"
    node_26 [fontname="monospace" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_27 { label="NewCenturySchlbk-Bold"
    node_27 [fontname="NewCenturySchlbk-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_28 { label="NewCenturySchlbk-BoldItalic"
    node_28 [fontname="NewCenturySchlbk-BoldItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_29 { label="NewCenturySchlbk-Italic"
    node_29 [fontname="NewCenturySchlbk-Italic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_30 { label="NewCenturySchlbk-Roman"
    node_30 [fontname="NewCenturySchlbk-Roman" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_31 { label="Palatino-Bold"
    node_31 [fontname="Palatino-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_32 { label="Palatino-BoldItalic"
    node_32 [fontname="Palatino-BoldItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_33 { label="Palatino-Italic"
    node_33 [fontname="Palatino-Italic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_34 { label="Palatino-Roman"
    node_34 [fontname="Palatino-Roman" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_35 { label="Sans-Serif"
    node_35 [fontname="Sans-Serif" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_36 { label="Symbol"
    node_36 [fontname="Symbol" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_37 { label="Times-Bold"
    node_37 [fontname="Times-Bold" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_38 { label="Times-BoldItalic"
    node_38 [fontname="Times-BoldItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_39 { label="Times-Italic"
    node_39 [fontname="Times-Italic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_40 { label="Times-Roman"
    node_40 [fontname="Times-Roman" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_41 { label="verdana"
    node_41 [fontname="verdana" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_42 { label="ZapfChancery-MediumItalic"
    node_42 [fontname="ZapfChancery-MediumItalic" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
  subgraph cluster_43 { label="ZapfDingbats"
    node_43 [fontname="ZapfDingbats" label="A⁰¹²³⁴⁵⁶⁷⁸⁹ B"]
  }
}