Script Capital H looks very different from chrome and firefox in internet explorer to the point that its almost illegible. Is there anyway to have it look the same or at least improve the legibility of the character?
Here’s an example of the character. You can see the difference if you open the link in both ie and firefox/chrome.
http://graphemica.com/%E2%84%8B
Character rendering is the same regardless of whether i am using unicode encoding or simply pasting the actual character in the markup.
The reason is that different browsers have different default fonts, and script capital H has rather different designs in different fonts. Script letters are supposed to resemble handwritten letters, and handwriting varies a lot.
If you page declares some font(s) to be used, in CSS, then browsers will anyway be forced to use other fonts if the character is not included in none of your declared font(s). Therefore, you should write a list of fonts known to contain the character in acceptable shape and declare that list for an element containing the character. E.g., you might use
with the CSS code
perhaps with a much longer list; cf. to font coverage info (not exhaustive, but useful): http://www.fileformat.info/info/unicode/char/210b/fontsupport.htm
The page you mention has
font-family: "Times","Times New Roman","serif","sans-serif", but since neither of the specific fonts contains the character, fonts named serif and sans-serif are used (these names must not be in quotes so that they will be taken as CSS-defined generic names!), so a browser falls back to its rock bottom default font. This varies, and may depend on browser settings.Remember to set
line-heightfor all elements, to avoid problems caused by characters from different fonts on the same line being each rendered with its own default line height.More info: Guide to using special characters in HTML.