Skip to main content
Home Forums Silverlight Design Designing with Silverlight Why do Fonts Look so Horrible in Silverlight?
29 replies. Latest Post by moemeka on April 6, 2009.
(2)
Geminiman
Member
32 points
27 Posts
08-05-2008 12:04 PM |
(Sorry if this has been asked before!)
Fonts look like crap in Silverlight. Doesn't matter what font I use, if I embed it or what, they look like crap. Even companies like DevExpress, Telerik and Componentone's samples for their new controls look like crap because of the fonts.
This is just imbarrassingly bad. Is there a way to make them look like they should? Is this going to be fixed?
It sure should be fixed for the final version, cause otherwise Adobe and company are going to laugh you out of the room.
codeblock
Contributor
4060 points
716 Posts
08-05-2008 12:19 PM |
Like other platforms you have to handle the alignment of the fonts with the pixels. In a later post on Silverlight 1.0 I showed that you have to put objects (not only fonts) on .5, .5 to have them rendered sharp. I think it is the same in Silverlight 2.0 (but I did not have a try).
you may also use pixel-fonts to improve fonts readability like in flash.
bye
party42
Participant
1076 points
329 Posts
08-06-2008 2:45 AM |
Silverlight actually uses anti-aliasing quite a lot, sometimes not correctly. I haven't heard from that .5 trick though, Ill see if that works. Its not only fonts that Silverlight renders weirdly. Even normal images (png etc) are rendered differently than expected. Named colours (RGB) end up differently in a silverlight app as you would expect them (like i.e from photoshop).
ami.aviel
2 points
1 Posts
08-06-2008 3:53 AM |
I used this .5 trick on Silverlight 2.0 and worked great.
mmanzoor
35 points
24 Posts
08-06-2008 4:19 AM |
What is .5 trick for Silverlight Text, I am using constraint base layout, means all the text is not on absolute position it will depend on screen as the container of Text Elements are Stretchable
Topher
08-06-2008 3:46 PM |
I am also curious about the .5 trick. Can someone please elaborate on it.
Jonathan...
All-Star
23562 points
2,304 Posts
08-06-2008 11:30 PM |
Hi Geminiman,
Does your application works properly on other machines? If it doesn't work, please share a repro here so we can investigate it in your shoes.
Best regards,
Jonathan
slyi
810 points
247 Posts
08-10-2008 4:26 PM |
Im curious about this .5 trick as well, do you mean scale a larger font 18pt to half the size
<TextBlock FontSize="18" Text="Scaled Text"> <TextBlock.RenderTransform> <ScaleTransform ScaleX="0.5" ScaleY="0.5" /> </TextBlock.RenderTransform></TextBlock>
08-11-2008 6:39 AM |
anybody know about .5 trick for fonts, please describe here?
08-11-2008 3:28 PM |
Sorry, I' away for some days and did not know the big amount of reply to my post.
The .5 trick (as someone called it) was described in my blog last october, applied to lines traced on integer coordinates. (sorry but my post is italian)
http://blog.boschin.it/archive/2007/10/19/Silverlight-Come-ottenere-linee-esenti-da-Antialias.aspx
I found that the silverlight engine consider the lines at integer coordinates positioned across two pixels and not on one single pixel. So adding half a pixel on every coordinate (eg. 10 -> 10.5) position the lines entirely into a single pixel and the antialias does not modify their aspect. In my blog post there is a sample image that illustrate the tecnique. The same tecnique also apply to fonts expecially if the fonts are pixel fonts.
08-13-2008 1:24 AM |
I tried the .5 trick in my application but it is not working
I am using embedded font in my application like FontFamily="DINPro-Medium.otf#DINPro-Medium" and position of text is x=100.5 and y=100.5
But still it is displaying distorted and jaggy edges. What am i missing here? does this trick only work on pixel fonts?
08-13-2008 2:33 AM |
you have to calculate the real position on the screen. check the position of the container.
Also if your font is not "pixel" probably it is already antialiased.
08-14-2008 11:38 AM |
FYI: Something that i often forget, that Silverlight font size are done in pixels rather than PT.
So you must alway multiply your PT value by 1.333 to get the desired valued in pixels
08-26-2008 11:13 AM |
Sorry for not replying. The email notification of replies isn't working for me in this forum so I didn't see it. Go to any of the samples from any control manufacturer: www.devexpress.com www.componentone.com www.infragistics.com www.telerik.com All of them have silverlight samples up and without exception EVERY SINGLE ONE OF THEM LOOKS LIKE CRAP in the font department. And does so ON EVERY SINGLE COMPUTER I HAVE TRIED SILVERLIGHT ON, Vista, XP, Mac, they all look like crap. A .5 work around to make them look passible is not an acceptable solution to the problem. Fonts should look good and consistant (i.e. they should render exactly the same way that they do in a Win Forms application) no matter where they are placed on the screen, and no matter the font size. I can't be the only person that is looking at every sample of silverlight and saying to myself "god this looks ugly!" It's imbarrassing that it's that bad and no one at MS is taking responsiblity and promising for this to be fixed for the final release. I show flash developers silverlight apps and they all laugh and how hideous it looks. Brutal and it makes it almost impossible for us to push silverlight development instead of flash.
08-26-2008 11:18 AM |
BTW, it's impossible to change your private email address on this site in any browser, you get a file not found error on submit.
08-26-2008 11:29 AM |
I show flash developers silverlight apps and they all laugh and how hideous it looks. Brutal and it makes it almost impossible for us to push silverlight development instead of flash.
I'm also a flash developer and I know that fonts show bad also in flash. This is why flash developers introduced pixel-fonts many years ago and this is why the same flash developers position text at entire coordinates to achieve the better fonts rendering. I think they have to stop laughing. (...and probably start crying :D )
bye.
08-26-2008 11:40 AM |
Geminiman:Brutal and it makes it almost impossible for us to push silverlight development instead of flash.
And if you evaluate only the rendering factor to decide if you have to move from flash to Silverlight probably you are doing a bad mistake. I saw many applications (and many application I made) and all applications looks good and have nothing to envy to flash. So if you consider the code reusability, the better code structure, the real object model, the separation from programming and design, the hundreds of other thing better than flash you understand that there is no reason to continue using flash... IMHO.
trungnd
08-27-2008 7:17 AM |
Here are demos and let’s compare Text in SilverLight and Flash, which one is better?ilverLight: http://community.netikatech.com/demos/silverlight/toolstrips/Flash: http://community.netikatech.com/demos/flash/toolstrips/I also try to make some samples and adjust the text in SilverLight but they are the same (not better than Flash). The words are not clear and little cloudy.I love SilverLight’s strength and hope Microsoft can improve the SilverLight better and better.Bye
Digitall...
09-08-2008 2:32 AM |
Fonts do look crap in Silverlight. I'm very keen to use it and it would be such a powerful tool for building decent web applications but I can't because the standard fonts look so different to how they are usually rendered on Windows. I'm amazed more people haven't raised this as an issue. How are we meant to get silverlight objects to blend in with an HTML page if the font is so different. Even if it was different in a good way that would be OK.
bruce.de...
6 points
3 Posts
10-03-2008 9:45 AM |
I couldn't agree more. Just heard from Bill Reiss (see: http://www.bluerosegames.com/SilverlightBrassTacks/post/Silverlight-2-RC0-text-rendering-quot3bimprovedquot3b.aspx ) that MS does recognize the problem (thank goodness), and is reported to be working on a new text engine to fix this typographic fiasco. This info comes from Scott Guthrie himself (from another blog post). So I hope it means MS understands the problem and is giving it priority. We'll see.
jeffferson
10 points
5 Posts
11-09-2008 4:47 AM |
is MS really going to do anything about this? Otherwise adobe has nothing to worry about.
jseaver
14 points
14 Posts
12-02-2008 11:14 PM |
Recently, I began working on a project where font quality was an issue. So, I thought I would look into it. I wrote a quick little Silverlight app that disabled UseLayoutRounding and printed a sample text string repeatedly at 0.1 pixel boundaries. Indeed, I found that the font quality improved somewhere around the 0.5 sub-pixel level discussed above. To demonstrate this, here are three separate renderings of the same phrase:
The uppermost rendering is from Internet Explorer using 10pt Verdana. The middle rendering is from Microsoft Word, also using 10pt Verdana. The bottom rendering is from Silverlight 2.0.31005 using the Portable User Interface font at size 13.333 beginning at a 0.5 pixel boundary.
The striking similiarities in the renderings, especially the aliasing, kerning style, etc. suggest that Portable User Interface is (at least) derived from Verdana as I have read elsewhere in the forums.
The font quality issue is not caused by poor rendering. It is caused by monochromatic rendering. Notice that the top two samples alias in color, while the Silverlight version at the bottom is in black and white.
In fact, regardless of the foreground color or background color, Silverlight always aliases in black and white. The best quality can only be achieved with a black font on a white background....the more the rendering scenario deviates from black on white, the worse the font appears. Whether this occurs deep in the rendering engine or when the font is rasterized, I do not know.
The same font with a white foreground and black background looks absolutely terrible.
This needs to be fixed. Would someone from Microsoft like to address this issue for us please?
Please don't say 'we are looking into it'....we always get that answer. If someone is really looking into it, then someone is responsible for it, and they have a pretty good idea about when it will be resolved. It doesn't matter if that is 1 month from now, or 6 months from now....we need to plan our projects, just give us a fairly solid date.
5 months since this thread was started and the fonts still look pretty bad...especially if you put Silverlight text anywhere near text rendered by the browser...
12-03-2008 8:34 AM |
Excellent Analysis! This verifies my anicdotal evidence completely!
Here, here! And Microsoft, Version 1 shouldn't have been released with this problem, and now you've got V2 with the same issue. You should be embarassed! This destroys an otherwise amazing product and makes it essentially unsable because customers always say "It looks horrible!" and they're always referring to the fonts, no matter how much everything else looks fantastic.
Please give us a usable Silverlight and we will go forth and build amazing apps. Until then, Silverlight is just a proof of concept that can't be used in the real world.
12-08-2008 10:33 PM |
Now this is priceless!
The previously undisputed king of horrible looking interfaces, Java, can get fonts right: http://arstechnica.com/news.ars/post/20081207-hands-on-building-rich-internet-apps-with-javafx-1-0.html
Why in god's name can't Silverlight? Are you embrassed yet MS? If not, note, JavaFX is on Version 1, not Version 2 and they got it right first try.
SAD is the word for this. Maybe even PATHETIC.
Adobe and Java are looking better all of the time as alternatives. I can't wait much longer for MS get this crap sorted out. It's time for a rushed service pack for Silverlight 2 that fixes this mess before you lose more customers.
12-09-2008 6:38 AM |
you dont think you're overreacting a bit here? you dont have to use Silverlight, use it at free will please. Please do switch to java if you please. dude, relax, they will fix it sooner or later. no need for flaming.
12-09-2008 6:55 AM |
The point is that Microsoft has made every indication that they think that the current state of affairs is just fine and dandy and wonderful. They honestly think that their font rendering is good! (just check all of the blogs by MS people on it, it's sad)
The reason I'm anoyed is because Silverlight has so much potential and it's all being **** away because of some lame decision that the people have been complaining about for > a year at this point and MS isn't listening, instead they're making excuses and justifying themselves.
If they would come out, own it, and tell us how they're going to fix it and give us at least a plan for how they're going to fix the horrible rendering, then I'd be fine with it. But that's not what we're getting and that's the really anoying part.
Step up to the plate Microsoft. Do the right thing. Tell us how you're going to fix this fatal flaw, and give us a plan. Stop denying the problem. Then you're developers will be on your side and will wait, and if we know a fix is coming in a reasonable amount of time, then we'll even develop for Silverlight. Until then you're just alienating the people that made Microsoft Microsoft in the first place (Visual Basic won the OS wars for Microsoft!)
So how about we get someone from MS to respond with a plan in this forum, or do a blog article up and link to it here for us? That would be a really great step in the right direction.
Explain to us how you're going to fix it so that you dont' have to align fonts to .5 pixels to make it look marginally passible. Explain how we're going to be able to put fonts on a color other than white and have it look marginally passible. Explain how you're going to allow us to disable the font smoothing ourselves if we want to.
I'm not asking for the world. I don't care if you impliment cleartype entirely, although it would be nice. Just give us something that people don't look at and immediately say "YUK" and I'll be happy.
*off soapbox*
vincentr...
4 points
2 Posts
02-26-2009 2:37 PM |
In fact color anti-aliasing makes sense because of the way LCD monitors are built!
On the upper example, pixels are made of a Blue/Green/Red pattern, that's why the left part of the glyphs is red and the right part is blue, because the red part of the next pixel on the left is red and the left part of the next pixel on the right is blue!
So, if you do gray anti-aliasing you have to use the three colors of the adjascent pixels to produce gray which makes your text look bolder and ugly:
######### > #####
######### > #########
jeetAbhi
424 points
81 Posts
02-28-2009 5:55 AM |
hi i am very curious about the trick you are talking about..i tried but couldnt get through ..so do you mind if i ask you to ellaborate the trick a little?
03-13-2009 10:02 AM |
This page should be a good starting point: Subpixel rendering (http://en.wikipedia.org/wiki/Subpixel_rendering)
moemeka
146 points
69 Posts
04-06-2009 9:03 AM |
Geminiman:The previously undisputed king of horrible looking interfaces, Java, can get fonts right: http://arstechnica.com/news.ars/post/20081207-hands-on-building-rich-internet-apps-with-javafx-1-0.html
I looked at this. I dont see where it says that fonts are better here than in silverlight. None of the samples seem to be text centric either. Also JavaFX is seems to use the ENTIRE JVM. It's obviously just a rebranding of the antiquated Applet technology.
The white font one black background looks just about as bad as it doesn in silverlight even. Which sample were you referring to when you posted the link. I was not remotely impressed with what they has to offer. I'm not sure why anyone would use a technology that had no design tools from a company that is notorious for not delivering.
Why do Fonts Look so Horrible in Silverlight?