Font sizing

All things being equal, just what is considered the current "best common practice" in regards to font sizing for web design?  I read somewhere recently that many designers prefer using the "em" measurement to set font size instead of choosing specific point sizes.  And then of course there are the H1 thru H6 measurement options  to deal with.  After recently upgrading to Dreamweaver CS5 I want to get more deeply involved in understanding and utilizing CSS to control layout.  With all the choices I am just not sure how to approach the font sizing situation in order to assure good design results.  Any guidance from the experts will be greatly appreciated.

This is an interesting link that Murray posted recently
http://snook.ca/archives/html_and_css/font-size-with-rem
Gary

Similar Messages

  • Font sizing best practice in 2014

    Decided to obtain a better working knowledge of font sizing best practice, read until my eyes bled, and find I continue to have questions. So much posted is old (older than few years) and change happens fast.
    To the point; Since use of em units (or percentages) is often preferred, I now see that rems (root em) is another option, which leads me to ask:
    Should I consider using “rem” sizing?… or, do browser zooming capabilities of modern browsers mean I do not have to obsess over how precise I must be in guesstimating how viewers actually see my written content as they have better control at their end? Is em compounding of sizes something that must be considered?
    Thanks-

    Use a mixture of what is best suited.
    For document level I use pixels as in
    /* Document level adjustments */
    html {
      font-size: 13px;
    @media (min-width: 760px) {
      html { font-size: 15px; }
    @media (min-width: 900px) {
      html { font-size: 17px; }
    Then for the modules I use root level ems as in
    /* Modules will scale with document */
    header {
      font-size: 1.5rem;
    footer {
      font-size: 0.75rem;
    aside {
      font-size: 0.85rem;
    Then the size that will scale with the modules
    /* Type will scale with modules */
    h1 {
      font-size: 3em;
    h2 {
      font-size: 2.5em;
    h3 {
      font-size: 2em;
    Using this method I keep each scenario under complete control.
    A List Apart has a nice article on the subject.

  • Restricting Broswer Controlled Font Sizing

    Hi Gang,
    I'm a bit new to Dreamweaver (have CS3) and have a question
    about font formatting and sizing.
    I have a tables / cell-based text column layout using CSS. It
    looks great when I have the type size set on "normal", but when the
    type is enlarged by using the browser view controls, it...well
    shall we say, looks like crap.
    I know CSS in older versions of Explorer used to override
    this function, but not in other browsers. Is there a current
    script, trick or procedure that has addressed this annoying issue?
    I am aware that the best way to avoid the problem is not
    create such a type dependent design in the first place, but I have.
    And no, I'm not ready to make my type JPEG images.
    Thanks for all the help you have given everyone!

    > I know CSS in older versions of Explorer used to
    override this function,
    > but
    > not in other browsers. Is there a current script, trick
    or procedure that
    > has
    > addressed this annoying issue?
    No. It's impossible to prevent.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "schulzcreative" <[email protected]> wrote
    in message
    news:ffb67o$g06$[email protected]..
    > Hi Gang,
    >
    > I'm a bit new to Dreamweaver (have CS3) and have a
    question about font
    > formatting and sizing.
    >
    > I have a tables / cell-based text column layout using
    CSS. It looks great
    > when
    > I have the type size set on "normal", but when the type
    is enlarged by
    > using
    > the browser view controls, it...well shall we say, looks
    like crap.
    >
    > I know CSS in older versions of Explorer used to
    override this function,
    > but
    > not in other browsers. Is there a current script, trick
    or procedure that
    > has
    > addressed this annoying issue?
    >
    > I am aware that the best way to avoid the problem is not
    create such a
    > type
    > dependent design in the first place, but I have. And no,
    I'm not ready to
    > make
    > my type JPEG images.
    >
    > Thanks for all the help you have given everyone!
    >

  • Font sizing and Encoding information are reset each time

    I am using iSql*plus against a UTF8 database to view multilingual text .. I found that I have to reset the encoding and the size information on the IE browser each time I execute a SELECT statement ...
    For example I have select ename from emp ... Now change my encoding to UTF8 and Font size to Large ... Next amend the statement to select one more column say deptno, the sizing and encoding information is reset and I need to set them again .. Is this a known issue ?
    null

    Peter,
    We've managed to reproduce the problem in-house. It doesn't seem to occur in Navigator, but does in IE. I suspect it may be a problem with IE, but I'm not sure. I've logged a bug and it will be looked at.
    Thanks for reporting it.
    Alison
    iSQL*Plus Team

  • Textfield font sizing and metrics is broken in the Chrome beta (32.0.1671.3 beta-m Aura)

    When using device fonts in the latest Chrome on beta channel (32.0.1671.3 beta-m Aura) the metrics are often way off the expected values. This causes Textfields that are auto sized to size incorrectly. The most frequent bug is that the text height is measured as 0, although sometimes very large values are returned. The bug does not happen for every font, or at every size or style, _sans seems to be immune.
    This bug does not occur in the release version of Chrome, or in any other browser/player version.
    I made a quick example here:
    http://betterstatistics.org/bugs/chrome/flash/fonts/as3.html
    I filed a bug:
    https://code.google.com/p/chromium/issues/detail?id=308632
    If this goes into the release version of Chrome it will cause major problems on many projects that I have worked on, and I suspect many others.
    We estimate that Chrome 32 will be released on Nov 7.
    Is there a work around?

    Dominique,
    Thank you for the detailed problem description. Although you posted it some ten hours ago I have just now finished reading it.
    Form pages must be built so they can operate correctly when inline validation errors are displayed. The assumption (by the engine) is that session state (and package state) as it exists at the point the validations are performed is sufficient (and correct) to support the redisplay of the page without the need to fire on-load processes or computations. Session state or package state changes made by after-submit computations or after-submit/before computations/validations processes that prevent correct page behavior on the "validation redisplay" must be avoided.
    The condition types Inline Validation Errors Displayed/No Inline Validation Errors Displayed can be used for on-load events/controls (processes, computations, regions, items, ...) for which you need finer control over this behavior.
    Also, you can forgo the use of after-submit computations when the resulting alteration of session state would be inimical to proper "validation redisplay" behavior and use On Submit - After Computations and Validations processes instead.
    I hope I have understood your situation and that this answer adequately answers your questions.
    Scott

  • Font smoothing, font sizing, sub-pixel tuning, OS X vs Windows

    I have a query regarding font the font smoothing implementation in OS X.
    Having just come from the Windows world (using ClearType) naturally comparisons will be made. I am trying to get fonts looking as readable as possible on my Mac. I have 19" LCD connected via DVI so would expect no issues there. It seems difficult to get fonts looking... crisp. I am starting from the basis of using font smoothing across the board as recommended. Turn off smoothing is set to font size 8 or smaller.
    I note with respect to tuning of font smoothing (anti-aliasing) that there is not a 'fine tuning' tool like as made available on Windows...
    http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx
    for the Mac. At least I can't find anything Googling. And I am not thinking of TinkerTool as that is not a fine tuner. The Windows ClearType tuner can really make a noticeable difference by adjusting the sub-pixel tuning. Is there any equivalent tool/configuration option available for Macs?

    You must have extremely good vision to be able to
    tell the enhacement made by ClearType on XGA or
    better displays. I wish my eyesight is as good as
    yours.
    Well by your own admission you must be half blind, and I think you must be if you can't see the difference between - and let's be precise about this - no anti-aliasing vs. anti-aliasing +- sub-pixel rendering. Whether on Windows and/or OS X. There is.
    Subpixel rendering is a trick used when resolution of
    displays are challenged and small font readability is
    crucial.
    Today, the only place this makes sense is on
    cell phones when you are trying to render small type
    like a webpage.
    I believe the website links I posted show that I have a reasonable grasp of what sub-pixel rendering is, that was not the purpose of my question. Also, actually, you are incorrect when you state that sub-pixel rendering is relevant/necessary only for small fonts. The exact opposite is true - usually sub-pixel rendering (including in OS X) is turned off for small fonts because it tends to make them more unreadable.
    On desktop displays today at XGA or greater resolution,
    the tradeoff in enhancing a bit in resolution is
    outweighed by the added computation cycles needed to
    filter the entire display so the eye sees "grey" on
    average rather than red or green or blue.
    Well you better rush and tell Apple to rip it out of OS X... because they seem to disagree with you as both anti-aliasing and sub-pixel rendering are included, and encouraged to be used, in OS X!
    I'm sorry, but your statements are just plainly wrong and unconsidered.
    Back to my - still unanswered, factual and valid question. The implementation of anti-aliasing + sub-pixel rendering in OS X does not appear, and I am stating this unbiasedly, to be as good as it could be (as I have seen in Windows). BTW this is not solely my finding as a number of very experienced Mac users have pointed out:
    Here...
    http://www.michelf.com/weblog/2006/subpixel-antialiasing-achilles-heel/
    and here...
    http://www.betalogue.com/2006/01/24/pages-20-does-not-fix-font-smoothing-issue/
    and here...
    http://mjtsai.com/blog/2006/02/04/font-smoothing-in-pages/
    I gather from the replies I have received thus far, and from research on the Internet, that there is currently no way - going into Unix config files or by some utility - to address this issue. Hopefully it will be improved in a later version of OS X.
    BTW - this does not stop me loving my new Mac!

  • Font sizing issues with JTextPane

    Hello all,
    I have a question which I hope won't be too difficult. Here is some background. I have created both a swing application that is a text editor. The user can cut, copy, and paste text. The user can also change the "font style" and "font size" through a series of combo boxes. When the application is launched there are 2 user inputs which indicate the size of the JTextPane area. For example, the user would type in: >java texteditor 2.5 3.0
    and the editor launches with a JTEXTPANE width of 2.5 inches and height of 3.0 inches. This is to be a WYSIWYG type editor which will eventually print what is contained in the JTextPane.
    Finally my question. When the user decides to change the font size, I have noticed that the font size does not appear to be the correct size as compared to a MS Word Font Size. For example, I type a phrase in MS Word and set the font size to be 12, and I type the same phrase in my JTextPane to be 12, the text in the JTextPane is much smaller. I actually have to set the font size to be 16 in the JTextPane to match the MS Word Font size. I have used many differnt fonts and in every single case the in JTextPane I have to add 4 to the font size to make it match the font size of the same phrase in MS Word. Does anyone have any idea what is going on here? Does Java (I am using JDK118, it's REQUIRED on my part and swing 111) have it's own font rendering engine that is different than what I see in MS Word? Why would 2 fonts, 1 in MS Word and another in a JTextPane, appear differently? The JTextPane is always 4 too small. I can compenstate for this by adding 4 but that does not tell me why it is happening.
    joberoni

    Thanks for your response Eric. I have made sure that the view I am looking at in Java is in fact 100%. I realize what represents, for example, 3 inches in ms word according to thier "rulers" does not actually represent 3 inches. That actually depends on the screen resolution and pisels per inch. And while I realize that the font I see on the screen is not the same font that is printed, I still expect to see in Java and in ms word, 2 fonts b appear to be the same size if both are being rendered at 100%. I even did the same experiment in Notepad which and a paint program and I get the same result. I can't help but think if I define a 3 inch area in any program, be it any word processor or graphics program, that the font sizes for a given font should appear the same size. And while the printed font is something completly different, I still still don't understand why the screen fonts appear in a smaller size in a Java JtextPane and probably other controls as well. I just don't get it.
    joberoni

  • Second Display Menu Font sizing bug...

    A bug that's been around far too long has to do with menu text on the second display screen not adjusting when the custom identity font is changed (reduced in our case).  It would make sense for the font size to be the same on both displays.  The font size always stays the same on the second display.  Please fix this in version 3.

    I was able to reproduce the behavior on my machine and I will report it to R&D. Hopefully this issue gets fixed in one of the next releases.
    Best regards,
    Jochen Klier
    National Instruments Germany

  • Font sizing in IE for windows

    I made a web page for our church and while the pages look good in all of my browsers (Opera, IE, Safari) when I look at them on an IE windows browser the fonts are not scaled correctly and they look as if they are bit-mapped. Is there a set of fonts that I can design in iWeb that will look good on IE windows?
    Also, my pictures are much darker.

    Font sizes will always be one third larger when viewed on a Windows PC compared to a Mac. Is this the problem you saw? This is not an iWeb issue its just websites in general. Also were the font sizes in the PC browser set higher than the default setting as this would increase the problem. Maybe worth checking. If they were set higher it would move the layout around. Again this is not a iWeb problem, just a general one.

  • Notes font sizing?

    Hi! In 10.8.2 Notes i tried to change the font size. From the dropdown menu i can see that there is text bigger/text smaller key command avialable CMD +
      ..anyway it doesnt seem to work, only way it works is- it ype the text, then select all and size in Font panel. This is not the ideal way, i need the text to bigger, its bad already that rmbp doesnt get bright enough...tnx in advance

    You can't change the default font size for new notes.  There are only 3 font options.  Note that Helvetica as a default is probably the largest and most readable font.
    To change it after the fact you can select all and change the text.  Or you can bring up the fonts panel (command-T) to change it at the beginning of a note and everything you type will be in that font.
    The retina MacBook Pro gets pretty bright...

  • Font Sizing Bug

      Hey Guys,
    I appear to have come across a bug after updating Photoshop to latest version. This has happened on two of my machines.
    Basically, if I set my font size to say, 12px and then scale this bigger with transform tools making it huge in size. When I click back on it with the type tool, it still tells me the size is 12 px. Even if I then change this to say 6px, it will downsize the huge font to half of its size and not down to 6px.
    Hope this makes sense and any idea on a fix as its prooving to be very difficult to work with.
    Update:
    Just an addition to this, I just reinstalled Photoshop, tried the above before updating and it worked as you'd expect. When scaled the type up using transform and then clicked on the type it would say it was 152.8 for example. If changed it back to 12, it changed back to 12.
    Updated my Photoshop to latest update, scaled it up and clicked, said it was still 12pt. Very confusing, but has to be an issue with the update.

    Sure
    However, viewing this thread
    http://feedback.photoshop.com/photoshop_family/topics/font_style_size_problems
    This is an issue that has been apparent since CS6 was released and something that Adobe are simply ignoring.

  • Title Font Size in Final Cut Pro 6 for exhibition on movie theater sized screen

    When editing a documentary and creating title cards (that play as part of the movie - text center of screen on black b.g.), lower thirds identifying speakers, and end credits (both single card and scrolling) are there some standard fonts and font sizes people use so the end result will not look too large when projected on a movie screen?
    The titles are all from Final Cut Pro (a few from the Boris plug-in for FCP6) and there are no titles that move or that are created in Motion.
    I will be able to make additional edits with the fonts sized for tv, streaming, DVD distribution etc. if I'm lucky enough to end up needing those as well.
    Thanks!

    If the titling is properly composed for the frame size, it will look correct when projected. That is, if it looks font is legible and in decent proportion in your 1080 timeline, it's not important whether the display is 30 inches or 45 feet; the proportion will not change.
    In terms of font selection, medium or bold sans-serif fonts work well on all screens.  "Plain" fonts like Helvetica, Ariel, or Lucinda tend to work better than the more stylized fonts, but if style is part oif your message, be my guest...
    hope this helps

  • Print Module - Set Explicit Font Sizes

    In the Print Module Identity Plate can Lightroom set font size explicitly instead of using only a % scale factor?
    The scale factor is a great idea but it would be a lot more convenient at times to set the font size explicitly to 10 or 12 or whatever so it could carry over to other titles if you want all your titles to print in a specific font size (e.g. 12 points). That's already possible with Vibrance, Recovery and a host of other settings (including the Identity Plate scale factor itself!) and it's very valuable to be able to have those exacting controls.
    Thanks,
    Robert

    Ian,
    I'd be very pleased if I'm doing something wrong. From what I see the Identity Plate supports only one font size, and only for the most recent photo. When I choose Edit and type in a new title of a different length Lightroom changes the size of the font (the longer the title, the smaller the font and vice versa). Try this:
    1) Open Identity Plate and title the picture "Hello".
    2) Change the title to "I just love Adobe Lightroom so very much!"
    The title will be smaller. Lightroom seems to disregard the Identity Plate font size.
    I just tried your recommendation and no matter how I changed the Identity Plate font size in the Print module (e.g. from 38pt to 8pt) the photo's title text size barely changes, I have to use the Scaling slider every time. That font sizing functionality only works for me in the Library module when I'm creating my actual Identity Plate.
    Every time I change pictures I have to re-do this step. The way I'm dealing with this is changing the scaling factor (or with your recommendation, the font size) every time for every different-length title and/or enlarging/shrinking the title box for each photo.
    As I explained in my other reply to your other post, this is very time-consuming when you're printing 50-100 titled photos in a single day/weekend (not to mention the fact that it's physically impossible to set every scaling factor so all titles print exactly the same size font).
    It would be a lot better for Lightroom to automatically save all the print parameters the way it saves all other of the picture's metadata.
    If you could share an easy way to make that much faster I'd be quite grateful.
    Robert

  • After I downloaded Maverick my tabs have went to a smaller font and can't get them back.

    After i downloaded new Mavericks operating system I've had problems. The first one is fonts on menu tabs changed to a very samll size and i can't figure out hiw to increase the size. We have had the Mac a couple of years now but I still haven't caught on to it yet. still use a pc most. Please help if you can.

    Can't help with the font sizing, since that didn't change here when I installed Mavericks.
    For the other stuff, see these:
    Switching from Windows to Mac OS X,
    Mac Basics—Tutorials on using a Mac,
    Mac OS X keyboard shortcuts,
    Apple How-To Guides for Mac OS X,
    Anatomy of a Mac,
    MacTips,
    Switching to Mac Superguide, and
    Switching to the Mac: The Missing Manual, Mavericks Edition.
    Additionally, *Texas Mac Man* recommends:
    Quick Assist,
    Welcome to the Switch To A Mac Guides,
    Take Control E-books, and
    A guide for switching to a Mac.

  • Font size won´t stay the same size after I save the form

    Hello!
    I need to set up a form with fonts sized 15.5, 9.5 and 7.5px.
    Acrobat allows those sizes but once I save the file the form I´m filling has sizes 16, 10 and 8.
    Is there any way to solve this issue?

    Hi,
    I have had this problem.
    It seems that iChat is more sensitive to small breaks in the network link. Web Browsers and Mail just don't show them as they make new connections each time they download mail or change pages.
    If wireless try it wired for elimination purposes.
    Check the time any DHCP server renews the leases.
    8:49 PM Monday; February 26, 2007

Maybe you are looking for