4 Replies Latest reply on Sep 15, 2010 12:40 AM by Budo Cat

    A question on type

    Budo Cat Level 1

      OK, at risk of exposing myself as a complete doofus, I have to ask a question about type.


      I am using Fireworks CS4 to design a website of 40-50 pages. Most of the site is made up of a dozen or so stories, each one taking up two to five pages of the site. I am using photos and ghraphic to break up the gray type and illustrate the words. I'm planning on using 14pt Arial for my font. The text will appear on a "unique" (ie, non-repeating) texture.


      I have layed out my pages with the photos and other graphics, and I have pasted the type of the original stories around the images. (I didn't use Lorem ipsum for placeholder text because I wanted an exact measurement of the words vis-a-vis the pages. That is, I wanted to be sure everything fit, and left no awkward space at the end.)


      I know that I do not export the type with the images to Dreamweaver. I will delete the text in Fireworks when I export, then paste it into Dreamweaver so the pages appear as I originally designed them.


      My question, though, is this: If a reader opens up one of my pages with his computer default set to, say, 12 pt Verdana, will it screw up the layout of my page? As I said above, I've designed the pages to Arial 14 pt. So will the type spill off my pages -- or will the type come up inches short on a page -- if the reader's browser is set to another font and point size? If yes, what can I do to make my pages expand (or contract) to adjust to the reader's reading preferences?


      Thanks again for your help. Sure glad I'm not using my real name on this.

        • 1. Re: A question on type
          Linda Nicholls Level 4

          There is no such thing as pixel perfect layout in Web design. Everything -- color, type, images -- will look different on every computer. As you get more practice at designing web pages, you learn to keep the page layout as open and flexible as possible. That's especially trrue of the length or height of columns. To keep text flexible and flowing properly, use em's or % to size it rather than pixels. While you can force a browser to display text at a particular size by using pixels, it can create difficulty for folks with visual imparements, for example, who set up thir browsers to display larger text sizes for readability.

          • 2. Re: A question on liquid design
            Budo Cat Level 1

            Thank you, Linda. I read a bit about using em and percentages in type (in pace of pixels) a couple days ago, but didn't explore it enough. So I guess the crux of my question comes down to this: Can I use a non-repeating background designed in Fireworks for a liquid page I will build in Dreamweaver?


            If yes, then I think my type problem is solved. The pages will expand or contract to accomodate the type I've placed on them. But I've googled this question and can't get a clear answer. One blogger, reveiwing Fireworks, says "Automatic slicing does not allow for liquid design."


            Is this true? Would this mean that I can't use my design, non-repeating or therwise, on a liquid site?


            Again, any help is very much appreciated.

            • 3. Re: A question on liquid design
              pixlor Level 4

              When you write the HTML, you place the images next to the paragraphs they're associated with so if the font or viewport changes size, then the whole document reflows, but everything stays logically in its intended place. This can be frustrating for people who are used to setting exactly where images appear with respect to text and even kerning and spacing to make a line look "just so." You will have awkward gaps somewhere. Let it go...let the medium free you from that worry.


              Everything's in a box, though. In that box you can put repeating or non-repeating images. So yes, you can put a non-repeating background image behind the text on each of your pages and you should be able to define the box so that any overlap of the background image won't show if it is wider than the current box. (I think that would be in the CSS overflow property on divs...you'd have to check.)

              Here are a couple of tutorials using large, non-repeating background images for the page. You could adapt the technique to a content div:

              http://line25.com/tutorials/basic-web-page-background-techniques-with-css (scroll down)



              On the other hand, however, text lines that are more than 2-2.5 alphabets wide are difficult to scan. If your site is intended to be text-heavy, you might be better off with a fixed-width box for your text.


              I think the blogger's comment refers to using Fireworks' page slicing to export HTML, which gives you a fixed, table-based design. The HTML you can export from FW isn't meant for live sites. It's just for prototyping. It's better to use CSS for layout, rather than tables, as the code is easier to maintain. I ran across this nice tutorial (the author uses Photoshop, but any graphics program works if you want to follow along):

              http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/


              (Hope some of that helps you!)

              • 4. Re: A question on liquid design
                Budo Cat Level 1

                An enormous help. Thanks so much.