I noticed that the horizontal lines of
+ signs are not on the same height for non-monospaced fonts. That looks ugly to me.
What is the design principle or reason behind that?
The vertical alignment of a plus sign and minus sign will be consistent (obviously I can't say for certain for all fonts, but generally). What you are using there (I assume), and the key on your keyboard is actually a hyphen or hyphen-minus.
The vertical alignment of hyphens and dashes are often not the same as the alignment for a minus sign, which will be aligned to the plus sign and other mathematical symbols.
Using Arial and Times New Roman as in your example, you can see the difference in alignment between the hyphen, minus sign and other mathematical symbols:
The design principle behind it is simply, they are used for different things. Hyphens and dashes tend to be more aligned to the x-height (for lower-case characters) whereas mathematical symbols will be aligned for use with numbers.
They look ugly because you are using the wrong character. Use a minus sign.
How you type the correct minus sign (Unicode character U+2212) depends on where you are. In HTML you can use the HTML named entity
On OS X you can access the symbol via the Character Viewer, which is accessible from the Edit menu in most programs (You can also enable access from the menu bar by enabling it under the keyboard system preferences).
On Windows you can use the built-in Character Map utility or use the Alt code:
Alt++2212 or Alt+8722 (must have NumLock on and use the numeric keypad numbers and plus sign, not the numbers above the letter keys, and yes, you must type the plus key for the unicode 2212).