11 Replies Latest reply on Jun 19, 2009 2:08 PM by pixlor

    Best way to export sharp, clear serif type?

    upstart1762 Level 1

      I have some navs which have fairly small type. When I export and preview, it looks REALLY poor (see attachment). What's the key to really sharp type? Here's what I've tried: 1. set type to "no anti-alias", "crisp", and "smooth" 2. tried as GIF and PNG of various settings. There must be a trick I'm missing. I know there's going to be some degradation, but I've seen much better than this!

        • 1. Re: Best way to export sharp, clear serif type?
          pixlor Level 4

          Your image is queued, so I can't see it yet. (If an image is small enough to show inline, it's better to use the Insert Image function (camera icon in the compose window) to add an image to your post.)

           

          However...

          When you say "fairly small type," what font and size are you using? Serif fonts don't look good on screen at small sizes simply because you don't have the pixels to represent the serifs. San serif fonts are better.

           

          One trick you can try, though, is to create your images at 2 or 4 times the eventual size you want and then reduce to 50% or 25%. Use the

          Modify > Transform> Numeric Transform

          menu item to resize.

          1 person found this helpful
          • 2. Re: Best way to export sharp, clear serif type?
            upstart1762 Level 1

            It is a serif font, but it is 16 pt. Small, but not tiny. I'm not expecting miracles, but I think it could look better. So when you say "create larger and then reduce" - at what point do you reduce? Do you slice, reduce and export? Or reduce and then slice and export? Thanks! Picture 1.png

            • 3. Re: Best way to export sharp, clear serif type?
              pixlor Level 4

              Ooh. Yeah, that looks bad.

               

              Try smooth anti-aliasing; anything but none. I would make an image for your whole nav that is 2 or 4 times the size it shows now, produce a reduced version, and slice the reduced image. Make sure you have plenty of extra grey pixels around the text. Use an image size that is evenly divisible by 2 or 4 (depending on what factor you go for). You may need to tweak the positioning of your text right or left to get maximal crispness after reduction, too. You might also try adding some letterspacing, as what you have now is awfully tight - the letters actually touch.

               

              Are you using the same serif font as is in the logo? (Same as in identical font from the same foundry.) If you're using the same font, then it will match and your design will look unified. If you are simply using another serif font, then the fonts will not match and your design will not look unified. If your nav font isn't the same as the logo font, then you should use a clean sans serif. A sans serif font will contrast, rather than clash.

              • 4. Re: Best way to export sharp, clear serif type?
                Linda Nicholls Level 4

                Type the text in Dreamweaver. Do a browser preview and make a screenshot of the preview. Crop the screenshot in FW and place it where you like.

                • 5. Re: Best way to export sharp, clear serif type?
                  pixlor Level 4

                  Linda, I disagree. Browsers are not graphics programs and their rendering abilities are weak.

                   

                  Here's a comparison. Palatino Linotype at 16 pt in Fireworks; at 64 pt, reduced to 25%; and a browser (Firefox) rendering at 16 pt. Palatino Linotipe has a curved serif as in the H&S logo. The browser renders it completely flat, there is none of the delicate character of the serif font displayed in the browser rendering at all. The reduced 64 pt only gets that serif as fuzzy, but it's still a slight improvement over the direct 16 pt rendering. For comparison, I added a 200% zoom in.

                   

                  Sorry to have to attach the file. When I inserted it, the system resized it.

                   

                  (Edit: Seven hours later and the image is still queued. Here you go: http://drop.io/FWpixlor/asset/hsflat-png. The view is resized, it has to be downloaded to see it full size.)

                  • 6. Re: Best way to export sharp, clear serif type?
                    Linda Nicholls Level 4

                    Do you work on a Mac? Palatino is not a Windows font. :-) On my machine, an HP Pavillion notebook running Windows Vista, text is rendered far better by browsers than it is in Fireworks. It is much cleaner and sharper, so I have begun using screenshots of text in my Fireworks mockups.

                     

                    Here's a comparison:

                     

                    http://www.playingwithfire.com/rendering.html

                    • 7. Re: Best way to export sharp, clear serif type?
                      pixlor Level 4

                      Nope! I'm on Vista.   Vista has some good text smoothing capabilities, but browsers are not as good as graphics programs.

                      I'm not sure where the Palatino came from, if it came with Vista or if it came with a piece of software (Office, perhaps).

                       

                      Georgia was designed for screen work, it's been carefully designed and hinted to look good on screen. I'm not surprised, then, that a screen cap of Georgia doesn't look too bad. However, if you look at an H in Georgia at a large point size, you'll see that it has a flat serif, rather than the curved one of the H&S logo that Upstart posted. Georgia is also heavier than Palatino. I don't know what font Upstart is trying to use, but I suspect it may be the one in the logo. (If it isn't it should be.) The delicacy and detail in that font, similar to Palatino, is just not rendered by the browser.

                       

                      Try experimenting with a script font, something that hasn't been optimized for the screen. Try your browser screen capture method, then my 4x/25% reduction method and see which one looks better.

                      1 person found this helpful
                      • 8. Re: Best way to export sharp, clear serif type?
                        Linda Nicholls Level 4

                        The reduction method works well for large text that will be exported as graphics. I find that it doesn't work well at sizes smaller that 18 pixels, depending on the font. It is pretty much usless at normal reading text sizes, like 12 or 14 pixels. Since most of the work I do is for the Web (100% of what I do in Fireworks), I use fonts designed to work well on the screen.

                         

                        I really miss the old FW system anti-alias.

                        • 9. Re: Best way to export sharp, clear serif type?
                          upstart1762 Level 1

                          Thanks for the inputs / theories. Good options to explore. As for the font, it's Hoefler Text (same as logo and other brand communications). I would like to use it on the main nav for brand consistency, but if it can't be done, I will switch to sans serif font.

                          • 10. Re: Best way to export sharp, clear serif type?
                            upstart1762 Level 1

                            You guys have been so helpful, I thought I'd share what I discovered: It occurred to me that this might be caused by the fact that the sidebar graphic is a separate background GIF, so my transparent button slice was being exported without "knowing" what background it was being placed on, so OF COURSE it couldn't provide a smooth blend. So I placed a grey box in the button symbol behind the type (same grey as background graphic) and that fixed it (See attached). Sorry, I'm learning as I go. Thanks for your help. Still good things to know about and consider.

                            Picture 2.png

                            • 11. Re: Best way to export sharp, clear serif type?
                              pixlor Level 4

                              Oh, yeah. That would do it!

                               

                              The new version definitely looks better. Your nav images appear to have a light color at the left and right sides.  You might want to check that, possibly edit the gifs. I am not sure what might have caused it.

                               

                               

                              (I see my image from yesterday is still queued. I wonder if the forum admin whose job it is to approve queued files has gone on vacation and not handed this task off to anyone else...?)