Why do Arial Unicode MS characters use such weird spacing?

Posted on 2007-08-03
Last Modified: 2013-11-05

I am trying to rid my web pages of all Wingdings, since non-M$ browsers don't like them.  Most of these are bullets I use.  It is easy enough to find Arial Unicode MS characters for most of my Wingding characters but there is a problem.

When I use these to replace bullet-points in my tables, they seem to have a large blank margin above them.  This causes the sizing of my tables to be screwed up pretty badly.  What is causing this useless and painful "whitespace" above the symbols and can I get rid of it?
Question by:MitchellVII
    LVL 13

    Expert Comment

    I can't test now, so don't have opportunity to look into your problem. But as a suggestion, you could create images of the bullets (via a screenshot), then use list-style-image in your css to set this image as the bullet, with a fall-back on the standard list-style-type, like square or circle.
    LVL 5

    Author Comment

    I want to stay away from the using images thing.  Many ofd these webpages are just Resumes saved as HTML/Filtered from Word.  I want to keep the reformatting at a minimum.

    One thing I've found is that you can reduce this extra "margin" Unicode Characters add by setting the Paragragh at and exact height.
    LVL 12

    Accepted Solution

    I recommend using a CSS style to set your line height. This will ensure your heights remain constant throughout.

    LVL 5

    Author Comment


    Yes, that's what I have done.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now