Why in the preview mode fonts look low resolution?

[Hubert Flow]

Hi,

I'm new to xara and to this forum. So first of all hello to all of you

I'm still learning using this software and it's capabilities. I'm in the middle of making my first webpage in xara designer pro x and I have encountered a problem. Im not sure if there is an open thread on this but I have spent hours on searching for some answers. So now I'm here and my problem is:

When I'm in the edit mode everything looks crystal clear. The problem starts when I go to preview mode (I checked on few different browsers and it's exactly the same). All the fonts lose their properties. They look like the resolution of the screen has turned low. I'm not using any fancy, rare fonts. In my case it's Arial. Additionally bigger fonts look a bit better but the small ones (between 14 - 24) look just horrible. If this is how my website will look like than it means that I have done something really wrong and at this point I have no idea what.
I have tried to add some feather to the text layer and it worked like anti-aliasing. It helped, but still I don't think this is right thing to do. It has also slowed down the performance so now I don't even consider that trick.

There are also few other similar glitches. The nav bar for example doesn't look in the preview mode like in the edit mode. There is a line missing and the fonts also look worse than during the edit.

Anyways, please let me know if the effect I get is normal and what shall I use to make my website look better.
I attach screen shots.


If I get this wrong please tell me. I am aware that it may be normal and what I need to do is wisely choose fonts/sizes and constantly check their look in the browsers. But if there is a way to make everything look better (some export options, converting fonts into pictures etc) please let me know.

Thanx
Hubert

[Acorn]

Hubert, I'm sorry you are having such a problem. I can't seem the issues you have raised from your supplied screenshots.

Have you grouped your text box with its panel? You may have created an image rather than text and a box behind.
An image is then relying on the browser's rendering and your computer's screen resolution. To check, try and click and highlight any sentence. If instead you get a drag effect, you have an image. Try ungrouping the text from its bounding box.

Your edit view doesn't show the NavBar so I can't comment directly but a NavBar usually creates the button text as images.

Seems to be a screen resolution issue or you have scaled the browser view away from 100%.

You can always upload your Xara file using the Go Advanced button in a Reply box here.

Acorn

[Lily Locket]

I have always had the same problem, and it's carried over when published to the web too, especially on Nav Bars. I've come to the conclusion that if text is grouped (as in navbars or in 'grouped-non-standard fonts') the sharpness is degraded somehow. Even if you view a standard web page from the design gallery the navbars seem unsharp in preview. Xara haven't really explained why it happens but I guess from the replies I have had from them it's something we just have to live with! Navbars produced by other software companies don't seem to suffer with this problem though.

[gwpriester]

Welcome to TalkGraphics Lily and Hubert

Do you have your zoom quality set to 100% (1:1)?

When you group text with or without a rectangle, the text is exported at 1:1 which is 96dpi. The text is anti-aliased (the edges are smoothed) to provide the appearance of sharpness.

If you can give us a web address instead of a screen shot it will be more helpful.

That said, I have noticed that many of the Google fonts, do appear less than sharp. Are you using Google fonts and if so which ones?

[Hubert Flow]

OK Guys, thank you very much for your help. Now I can tell that my question was very lame :P

All I needed to do was group the text with the background rectangle. Now it looks perfect!

Hope this helps some other rookies.


Thanx again!

[gwpriester]

Excellent.