locked
FONT CONVERSION ISSUES BETWEEN FP2003 AND EXPRESSION WEB 4 RRS feed

  • Question

  • 1) Originally composed/published web site in FP2003.

    2) Switched over to Expression Web 4.

    3) In FP2003 used Arial 18-pt. in many tables, etc.

    4) When I use Arial 18-pt. in Expression Web 4 it SOMEHOW doesn't publish at the same size as the prev. published Arial 18-pt. fonts published in FP2003. To get the Expression Arial font to publish at the same size as the 18pt published in w/ FP2003, I have to use 24pt.

    5) I'm baffled. How can two presumably identical font sizes publish differently in the two programs? Are there any compatibility settings I'm unaware of to coordinate FP2003 and Expression?

    Monday, December 5, 2011 11:22 PM

All replies

  • The issue is this: Why are you using measurement units designed for print on a Web page?

    Seriously, points are print measures—72 points per inch, 12 points per pica—and are essentially meaningless to a computer monitor. Upon encountering such a specification, a browser can only do its best to try to approximate the number of even pixels required to come as close as possible to the physical measure represented by the point size. Nicht gut ist.

    Points, like pixels, are also not advised because they are fixed-size units, which the browser family with the greatest market share, Internet Explorer 6/7/8/9, cannot resize. So, all sites with text sizes specified in those units are automatically inaccessible to vision-impaired users of those browsers, which is illegal in some jurisdictions, subject to civil litigation for damages in most, and inadvisable for any site which seeks to appeal to the widest audience possible.

    You are best advised, instead of seeking a resolution for this issue, to specify your font sizing in ems. Experiment a bit, sizing the same words, side-by-side, using both points and ems, until you find the equivalent em sizing to your 18pt measure. To help out, I tested "Now is the time for all good men" in Arial Normal and found that 18pt is equivalent to 1.5em on my machine. Unless your default system font setting is different than mine (some are, on small netbooks, for example) you will probably find the same result. Just use Find & Replace to correct your point sizing to ems and you're done.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Tuesday, December 6, 2011 1:40 AM
  • Thanks for reply. Having always used the Fonts toolbar in FP2003 and now Expression 4, I don't know how to specify font sizing in EMs. I've looked through Expression 4 options/choices and see no EM alternative to POINTS.

     

    Can you lead me step-by-step in Expression 4 how to convert/size text fonts to EMs?

     

    Stuart

    Wednesday, December 7, 2011 11:56 AM
  • Stuart,

    Here's a little math for you. Under Windows default 12pt is equal to 1em. So divide the point size by the number 12 and that will give you the em equivilent.

    18pt = 1.5em
    12pt = 1em
    10pt = .84em (okay it is actually 8.333333 - always round up)

    You may want to spend some time with the learning resources section of the FAQ so you can learn how to use EW without just clicking buttons or at least know what code clicking the buttons generates.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Wednesday, December 7, 2011 6:54 PM
  • I still don't know what to do in Expression 4 to convert points > ems, where to go to make the changes, etc.

    Thx.

    Wednesday, December 7, 2011 8:16 PM
  • You edit your code and styles, wherever you've used pts.

    If you are not considering cleaning up the code - removing FP's inline styles at every turn, and creating a few styles that apply to everything instead - use a series of Find and Replaces to make the changes.  (Make a backup of your site if you are planning to try mass markup Find/Replace, in case you make mistakes.)

    Wednesday, December 7, 2011 8:23 PM
  • What am I looking for? Here's an example of a font and size on my web --

    "<font color="#FFFF00" face="Comic Sans MS" size="5">"

    How does this convert to EMs?

     

    Thx, Stuart

    Wednesday, December 7, 2011 8:30 PM
  • Use keywords - that's basically x-large.

    Instead of using buttons on the format toolbar open your styles from the Apply Styles panel by right clicking (or use the dropdown) and selecting "modify styles". There you will see all the options availabe including ems and keywords.

    If you step back and work through the basic website tutorial linked in the FAQ by downloading the video and asset file so you can work along these sort of basic questions will be answered for you. That tutorial was created with FrontPage users in mind. It uses Expression Web 2 so there are a few interface differences primarily to do with site management. In EW 4 you use Site > New Site or Site > Open Site instead of File > New > Web site or File > Open > Web site.

    All the important bits like creating styles remain the same.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Wednesday, December 7, 2011 9:10 PM
  • If you want to use EW's visual interface, look in the bottom-right and find the Apply Styles panel. (If it is not visible, click menu item Panels|Apply styles to ensure it is checked). Here's what you are looking for:

    From Forums and Lists

    Note the separator labeled "Current Page." As you might expect, that displays the location where the styles below are declared. Since they are in the current page, they are not available for use in other pages, as they would be if they were declared in an external style sheet (in which case that bar would display the style sheet's filename, e.g. "mysite.css"). It is to your advantage to declare styles like these, which will probably be used in multiple pages, in an external style sheet, which can then be referenced by all pages which use them, establishing a single place where you can make modifications which apply to all pages, instead of having to visit each individual page to modify each one.

    The green arrows are indicating the styles which have already been defined in the site. Although I've only created these two local styles for this simple illustration page, a more complex (i.e. real ;-) site would probably have one or more external style sheets, and possibly some page-local (current page) styles. If you have already defined styles in your page, you can simply highlight the object(s) in Design View, usually text, to which you want to apply the style, then click the style name in the Apply Style panel to apply it.

    To create a new style using the dialog, click the New Style... link indicated by the red arrow. That will open this dialog:

    From Forums and Lists

    If you are creating the style to apply to text that you have already selected in Design View, be sure to tick the checkbox indicated by the yellow arrow, or the style will be created, but not applied to anything, which can be confusing if you have selected text expecting the new style to be applied to it. The Category box indicated by the red arrow allows you to choose the kind of characteristics you wish to change; font is selected for this illustration.

    Note the "Selector" box indicated by the cyan arrow. This is important. To avoid having a bunch of anonymous, and possibly duplicate, styles, name each style with a meaningful name when you create it. Note that it is a dropdown combo box, and if you wish to apply a new style to all elements of a given type (e.g. paragraphs (p), heading 1 (h1), list items (li), etc.), instead of text you have selected before invoking the dialog, you can select that element type from the dropdown. Also note the "Define In" box directly below the "Selector" box. This allows you to create the style only for the current page, as shown, or for an existing or new external style sheet. Again, universal styles which will be used on multiple pages should be added to an external style sheet.

    Finally, note the dropdown list indicated by the blue arrow. This is where you select the measurement unit to be used for font-size specifications, with em currently selected (this is the dialog as specified for my comparative testing of pixels vs. ems). Above it you will see the font-family dropdown, which allows you to select from a number of predefined font-families, or from any font installed on your system (NOT recommended). EW ships with several sets of known Web-safe font-families defined, and you are advised to stick with Web-safe fonts, or risk having your chosen font not display on the visitor's computer, because it is not installed there.

    If you wish to create your own font-family, perhaps based on one of the Web-safe families, click Tools|Page Editor Options|Font Families tab and you will see this dialog:

    From Forums and Lists

    To create a completely new family based upon fonts on your system (BAD idea), leave (New Font Family) selected and start selecting fonts and clicking "Add." As soon as you add the first font, you will see the new family created, and any additional fonts added will become part of the new family.

    To create a family based upon one of the existing Web-safe families, I have, unfortunately, found no obvious way to do so other than to select your desired font(s) and add them first to a New Font Family, then select and add the fonts listed in one of the existing Web-safe families in the list above. Doing this will place your new font first in the font-family, which will mean that it will be used if the font is installed on the visitor's machine, but that you will have a list of Web-safe fonts to fall back to if the preferred font is not installed.

    I kinda hope that I have missed a less inelegant method to do this, and someone who has figured it out will see this and fill us in. Unfortunately, because selecting one of the supplied sets and adding a font adds it to the end of the font-family list, not the beginning, where it would be used if available on the visitor's machine, I could find no easier way to simply add a preferred font to the beginning of a Web-safe family than to build it font by font.

    So, anyone know an easier way to add a preferred special font to the front of a font-family?  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.


    • Edited by paladyn Thursday, December 8, 2011 4:19 AM
    Thursday, December 8, 2011 2:35 AM
  • Interesting. I have edited that link twice to ensure the correct screenshot was linked, but picasaweb seems to be providing the same each time. Investigating...

    <edit>
    Hmmm... got the issue with the duplicated Font Families dialog fixed, but now the formerly working image inserted using the Insert Image icon in the editor, which created this code,

    <img src="http://social.microsoft.com/Forums/getfile/41237/" alt="" />

    is not working. When it first failed, it was simply refusing to allow selection of a file for upload, like so:
    </edit>

    <edit>
    Interesting. Edited the HTML to add the picasaweb image link, but the forum software added it following the signature(?? see below), and did not display the image. OK, trying again with the alternative code...
    From Forums and Lists

    OK, that seems to have gotten the job done. Allrighty, then... curiouser and curiouser. This forum software just continues to amaze. Now to try to get the Apply Styles pane image to display in the previous message. Wish me luck...
    </edit>

    <edit>
    OK, finally got it. It shouldn't have taken two hours and multiple sessions to get this posted, but with this travesty of a forum software application, there you have it. BTW, if no one reports in with a better way to ad a preferred font, I'll go ahead and suggest it at User Voices. So, I'll ask again—anybody know a convenient way to do it?
    </edit>

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    https://lh4.googleusercontent.com/-Qww9fJ7VTV8/TuAHL3AkGWI/AAAAAAAAAF4/7if1IymtGBA/s640/image-upload-not-authorized.jpg




    • Edited by paladyn Thursday, December 8, 2011 4:40 AM
    Thursday, December 8, 2011 2:44 AM