SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 97
  1. #26
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    For now my favorites are:
    font-family:"Lucida Grande", Arial, sans-serif; (for small scale < 9pt) or
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; (for larger > 9pt)
    I would have to agree with you there. Those are basically what I have come to like the most with my recent designs. I do use Arial quite a bit, too. Although anything to avoid Times New Roman and Georgia. ;P Those are fonts that I cannot stand anymore.

  2. #27
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never consider different host system use different style

  3. #28
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    My first experience with Calibri was rather unnerving; I didn't know that it required ClearType to render properly, and I became rather fond of the almost-primitive, rough-hewn appearance it had on my LCD monitor at work, though I was confused by Microsoft's apparent step backwards. Looked like tuppenny hell on my monitor at home, though. Then I realized CT wasn't enabled, enabled it on my machines, and the font snapped into focus, so to speak. Same problem with Segoe UI, except it lacks all charm in its non-aliased form.

    Leave it to Microsoft to create perfectly excellent fonts and then monkeywrench them by requiring their questionable (at best) CT rendering system for them to appear properly. I don't use a Mac or a Linux machine, so I can only imagine how Calibri, Segoe UI, and the other fonts look in "alien" rendering systems. The whole issue makes it very difficult to justify using them in a "mass-market" design.

  4. #29
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClayDay View Post
    I would have to agree with you there. Those are basically what I have come to like the most with my recent designs. I do use Arial quite a bit, too. Although anything to avoid Times New Roman and Georgia. ;P Those are fonts that I cannot stand anymore.
    LOL, you're not a serif fan. Understandable, though they certainly have their place (take a look at the linked Georgia article from an earlier comment, there are some brilliantly done sites featured in that article). I'd like to see more people coding with the Lucidas. And you might consider using Helvetica over Arial....

  5. #30
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    I'm on the fence for using pt or px for font-size but it seems to me that px works better for crossbrowser consistency.we take for granted like standard web fonts every now and again. Thanks!
    As I understand it, unless you're coding primarily for print, you should avoid pts. There are strong arguments for and against coding with pixels.

    Quote Originally Posted by awasson View Post
    Great articles recently about font stacks... It's a good practice to rethink what we take for granted like standard web fonts every now and again. Thanks!
    I'm enjoying seeing the entire subject of fonts and typography become frequent topics of discussion on these boards. People tend to forget about the fonts out there, and just use plain-vanilla serif and sans choices without any real thought. A well-thought out set of typographical choices is, to my mind, as important an element of a design as a color scheme or navigational layout.

  6. #31
    SitePoint Zealot nepalsites's Avatar
    Join Date
    Mar 2008
    Location
    Nepal
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have "Helvetica" font. verdana still is the best for paragraphs i think.

  7. #32
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awasson View Post
    I'm on the fence for using pt or px for font-size but it seems to me that px works better for crossbrowser consistency.
    Black Max,
    I actually try to use ems when setting font sizes as there are rarely any issues with sizing between browsers.

    I thought that pt was only every used for print design at least that's what I was taught by one of my lecturers in print design, I have never yet come across a website that actually uses pt - but please correct me if I'm wrong here.

    My understanding of px sizing for web pages is that it can lead to some very serious issues with smaller font sizes especially as MS IE seems to have different ideas as to what we actually want as designers. Through experimentation I have found that I get truer consistency in font size with ems, I wonder what others think of the use of ems compared to px with relation to fonts.

  8. #33
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bloodofeve View Post
    I thought that pt was only every used for print design at least that's what I was taught by one of my lecturers in print design, I have never yet come across a website that actually uses pt - but please correct me if I'm wrong here.
    Though it is not often used, pt is an acceptable form of measurement within the W3C Specification. You can use the following when marking up your CSS for text sizes (in relation to lengths). Lengths: em (based on font size), px (fixed pixels), ex (based on x-height), &#37; (relative percentages), in (inches), cm (centimeters), mm (millimeters), pt (points - 1/72nd of an inch), pc (picas - 1 pica is equal to 12 points).

    So as you can see... though not often used, there is a variety of available length variables you can work with in CSS.

    Source: http://www.w3.org/TR/CSS21/syndata.html#length-units

  9. #34
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,037
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nepalsites View Post
    I don't have "Helvetica" font. verdana still is the best for paragraphs i think.
    Typically, you'll find Helvetica on Mac computers and for the PC the knock-off is Arial. True typographers will be quick point out the poor quality of the Arial font compared to Helvetica but for 99% of the web browsing public, there isn't much difference. There is also an Arial for Mac and a Helvetica for PC but straight out of the box Arial is PC, Helvetica is Mac.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  10. #35
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Though it is not often used, pt is an acceptable form of measurement within the W3C Specification. You can use the following when marking up your CSS for text sizes (in relation to lengths). Lengths: em (based on font size), px (fixed pixels), ex (based on x-height), % (relative percentages), in (inches), cm (centimeters), mm (millimeters), pt (points - 1/72nd of an inch), pc (picas - 1 pica is equal to 12 points).

    So as you can see... though not often used, there is a variety of available length variables you can work with in CSS.

    Source: http://www.w3.org/TR/CSS21/syndata.html#length-units
    Alex
    Thanks for this really useful piece of information I'll read the W3C info, as I think my lecturer was behind the times.

  11. #36
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good post

    Is there a definitive guide here or are we all guessing?

  12. #37
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,037
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Though it is not often used, pt is an acceptable form of measurement within the W3C Specification. You can use the following when marking up your CSS for text sizes (in relation to lengths). Lengths: em (based on font size), px (fixed pixels), ex (based on x-height), % (relative percentages), in (inches), cm (centimeters), mm (millimeters), pt (points - 1/72nd of an inch), pc (picas - 1 pica is equal to 12 points).

    So as you can see... though not often used, there is a variety of available length variables you can work with in CSS.

    Source: http://www.w3.org/TR/CSS21/syndata.html#length-units
    Thanks for linking to that. It's a very informative document which really leaves nothing to chance.

    In my own experience, I find that setting my base font size in px provides the best overall cross browser/platform consistency and if you think about it, it should. Screens are made up of pixels so if you set you font for 12px, it shouldn't matter what screen, operating system or OS is in use... 12px = 12px.

    I use em for letter spacing and percentage for line height.

    The only time I find pt is handy is if I'm replicating a layout which needs to be 100% accurate. pt sizes tend to allow for a greater degree of adjustment as in 9.25pt or 10.75pt values.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  13. #38
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mkoenig View Post
    Is there a definitive guide here or are we all guessing?
    I don't think there can be a definitive guide, considering the plethora of operating systems, browsers, monitor displays, distributed fonts, etc etc etc all impinging on the way a page displays.

  14. #39
    SitePoint Guru jessiejames27's Avatar
    Join Date
    Mar 2008
    Posts
    627
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For me, the best is Georgia.
    I remember a great article about Georgia here in SP but I can't find it right now.

  15. #40
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Kara, websafe is just a term used in web design to state that the item in question is safe (within reason) to use, knowing that it will be shown the same across a series of devices, platforms, resolutions and varied user base. Essentially a web safe font is a typeface which you can bank on the majority of users having installed, therefore the visual impact of your design will remain intact.
    Thanks a lot Alex, know it's all clear for me.

  16. #41
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I myself had forgotten about some of the acceptable forms of measurements, some of the things you must take into account when using width is IE’s ability to resize text (along with the OS’s default DPI – dots per inch ratio), the browsers zoom function (which artificially boosts or decreases the maximum width / height available), the browsers default implementation of what equates to a “point”. By default this should be 1/72nd of an inch, however browsers can render inconsistently and of course using percentages can often have issues within IE as its ability to successfully calculate percentages is inhibited. Because of this and other reasons the consistency ratio is very hard to determine.

    To get a very accurate (point by point) measurement, absolute length’s exist – this is where known lengths such as inches, centimetres, millimetres occur, and to a certain extent, point (pt) and picas (pc) which are based on them. However because these two rely on user agents (browsers) rendering 1/72nd of an inch to equate to a point, and there is some small margin of inconsistency in older browsers, this can cause issues. This is possibly why pt is rarely used except for print in which the end result (being printed) is fixed and equal across all documents.

    Then there are the relative units... these are better suited for layouts when you require more flexibility as it allows better scaling within the document as they are calculated to include parent elements and take into account their surroundings. This means if for example, overflowing occurs, the height would recalculate itself to take into account any child elements if the parent is requires to inherit the childrens height. (of course this becomes more theoretical then fact when you take into account browser inconsistencies such as IE putting border within the box model rather than surrounding it).

    The reason em’s are more popular then PX is because they take into account the font size and use that as the base measurement for the height and width... therefore on text resizing they will scale. Pixels remain the same regardless of font-size, and trigger what we call a fixed layout and because they treat things more strictly then em’s, it is why we suffer fewer bugs in relation to layout flow when using them. Percentages are not a browsers best friend... IE really hates trying to do the math when it comes to calculating width, it seems to have major issues with this part of the box model and often mistakes 100&#37; for 101%, as you can imagine, that can cause overflow and scrolling issues.

    Essentially, nothing is 100% (or 101% if you use IE) but if you make sure to do your math right and keep in mind that everything contributes to the width and height, parent and child alike to how your items will be calculated the design will work fine... though sometimes it makes me get a headache and I choose to just “use the force” when making sure my items scale correctly.

  17. #42
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Verdana fonts have been very good for on-screen reading.

    Regards

  18. #43
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's good to know that we have some cool new set of text to use for webdesign. Thanks for sharing these information.



    ____________________
    Do you want to earn $1000/month, visit us at: Affiliate Marketing

  19. #44
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many people have no knowledge about font of web safe 2009? but your tip solve many web designer problems I'm currently redeveloping my own site and just gave 'Century Gothic' a run. many thanks Alexs so much

  20. #45
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alex, im gonna redo my site now. thanks for the tips.

  21. #46
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    Posts
    1,232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    I don't think there can be a definitive guide, considering the plethora of operating systems, browsers, monitor displays, distributed fonts, etc etc etc all impinging on the way a page displays.
    I agree. Diggin those Celtic Knots in your avatar
    Last edited by mkoenig; Feb 23, 2009 at 08:30.

  22. #47
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, this article is just what I was looking for!

  23. #48
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mkoenig View Post
    I agree. Diggin those Celtic Knots in your avatar
    Thanks! If I ever get brave enough for a tattoo, it'll be that. Here's its source. (Best band ever, by the way, but some disagree.... )

  24. #49
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Though it is not often used, pt is an acceptable form of measurement within the W3C Specification. You can use the following when marking up your CSS for text sizes (in relation to lengths). Lengths: em (based on font size), px (fixed pixels), ex (based on x-height), % (relative percentages), in (inches), cm (centimeters), mm (millimeters), pt (points - 1/72nd of an inch), pc (picas - 1 pica is equal to 12 points).

    So as you can see... though not often used, there is a variety of available length variables you can work with in CSS.

    Source: http://www.w3.org/TR/CSS21/syndata.html#length-units
    Quite. And just as you would never dream of specifying the dimensions of an object on screen in centimetres, you should not in a million years specify the size of a font (or anything else) on screen in points.

    When working on screen, you can use %, em or px - it depends on exactly what you're doing as to which is better. Technically it does not break the specification to use units of physical measurement such as cm, pt or in, but it doesn't make sense.

    Similarly, when working on print.css, it is absolutely appropriate to use %, em, cm or pt, but doesn't make sense to use px.

  25. #50
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,037
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    ^ I think you're oversimplifying it. Of course you wouldn't ever use px for print. Pixels never enter the print equation however all fonts have point sizes regardless of the medium (print/screen).

    90% of the time I find pixels provide enough accuracy but there always seems to be that one in ten times when I need a little more accuracy between 11px and 12px; Browsers don't understand half pixels but they do understand .25pt or .75pt.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •