On a website I made, one person sent me a screenshot which shows that my subtitle font is too large.
I've checked the site on two machines (Vista) with FF, IE6, IE7, IE8, Safari/win, opera/win.
I can increase the font size of the browser, but the subtitle stays the same size (since it is 8pt as shown below) which is what I want (so it doesn't extend under the logo).
It checks out fine on 34 browsers screenshots at http://browsershots.org.
What could be causing the font to be larger on this one person's machine (windows XP, IE7). He says "all other websites look fine". Is there something about Windows XP that enables the operating to change the font size in browsers, etc.? Or perhaps a problem with arial/italic on Windows XP?
Here is the CSS for it:
#subtitle {
position: absolute;
top: 78px;
left: 40px;
width: 738px;
text-align: right;
font-size: 8pt;
font-style: italic;
font-family: arial;
}
ANSWER:
I changed "8pt" to "10px" and it works now for him. I assume that he had changed the DPI on his machine.
You used ‘pt’ as a size unit. Don't do that. The CSS ‘physical units’ (pt, mm, in...) only make sense for physical output (ie. a print stylesheet).
On-screen, points are mapped to pixels using the system's ‘dpi’ setting, which can vary arbitrarily across machines. Macs/Windows/Linux all default differently, and can be reconfigured. Many Windows users increase the dpi setting in order to resize the fixed-point-size system dialog box (shell) font.
If you must use non-relative units for some text, the unit you want is ‘px’.
There are other reasons font sizes can change (eg. different font availability, minimum font size settings, deliberate font zooming), which is why you should never completely rely on them being what you expect, but this is almost certainly the cause in this case.
This is perhaps a stupid question, but has the user inadvertantly changed their browser's font size? In IE6 onwards, holding down CTRL and scrolling the mousewheel forwards/backwards will increase/decrease font sizes.
Three possibilities:
The user has changed their DPI settings for their machine. In some versions of Windows this manifests as changing fonts to "Large" or "Very Large";
The user has changed their default font in their browser (from, say, Tahoma/12 to Tahoma/16 in Firefox); or
The user has disabled CSS/HTML font sizing in their browser. This is an accessibility setting. Some people also use it for when they have, say, 1920x1200 resolution on a 15" laptop and some Web weenie has set font sizes on their Website to 8 pixels high.
Sorry, bobince and Diogenes, but I must disagree with you in the strongest way possible in regard to not using pt sizes and always using pixels:
A designer wanting a font size to be relative to the default size specified in browser or OS settings, which should be the standard, should use % or em. A designer wanting an absolute size (on screen) should use pt to keep the font size constant regardless of the screen's DPI setting, and here's why:
Modern laptops and mobile devices' screens have much denser pixels than desktops', up to approximately 150dpi of natural (default) resolution compared to the desktop's 72. Medical and other specialized screens go even higher. And the user has the ability (if not always the knowledge) to raise or lower the logical dpi to customize the display according to his preferences and sight ability.
Any image or text sized in pixels will be too small to read on a dense-dpi device, making your good-sighted users struggle and rendering any users with less than perfect sight unable to read the text. More importantly (and one can argue if this is correct behavior or not), some browsers do not resize pixel-sized text even when the user commands it, making the situation unfixable.
Unlike paper medium, where position to the precision of 100ths of an inch is possible and everyone reading a designer's work sees the same-sized paper, the diversity of devices used to access the Net invalidates the entire concept of pixel-perfect design, which looks good only on the one device it was targeted at. The point of the design on the Web is to make the site accessible to the target audience, which usually should be as large as possible and would be using a range of devices and settings.
Operating systems are already going there with vector UI elements or, at the least, large source bitmaps that are scaled smoothly. So should you, forgetting about the arbitrary unit of measure called "the pixel" and making your designs compatible with the widest array of access devices possible.
Addendum - to additional points raised by Diogenes
Unfortunately, the real-world situation with DPI awareness (and thus with proper support for pt-sized text) in currently popular operating systems is, for the lack of a stronger printable word, a clusterfail, as summarized by the CSS-Discuss Wiki:
Unfortunately, most computers don't know [the display's DPI], so the browsers don't either... In the absence of this knowledge, operating systems and browsers typically just make assumptions, and these assumptions are usually wrong.
So, while in theory points would be the best unit for fixed text, in practice using them today produces inconsistent results in many OS/browser/screen configurations. Thus designers often have to give up and revert to pixels to achieve fixed font sizes. Personally, I use percentages and ems, avoiding fixed sizes altogether.
The CSS-Discuss archives have a great summary of the font sizing issues, and numerous links to details and various approaches.
On IE7 there is a zoom level and a text size. The most likely scenario is that they've changed one of these settings inadvertently. Have them click the "Page" button and look at the "Zoom" and "Text Size" settings.
As 2 other answers have suggested, the DPI settings may be giving you trouble. I have found that mixing pt,ex,em with px sizing can be a real challenge once you consider DPI settings and different browser default fonts.
So now I just use px for font sizes. Most of the problems go away.
P.S. Don't force that single user back to the regular DPI. I willing to bet that they are older, need reading glasses and the new high res monitor they got was harder to read because the print was so small. Someone adjusted the DPI and now the fonts are the same size as the old monitor, so now they really do like the new monitor better. The problem now is some web pages are messed up. That's where you come in.
Another thing you might want to look at when changing monitors from a CRT to flat screen is the digital font smoothing setting. Fuzzy characters become sharper. Fortunately, This does not affect your web pages.
Addendum - to address point raised by MaxVT
MaxVT makes some excellent points in his answer. Context certainly matters.
My answer was a bit lazy and incomplete. The reason I use px is because of the inconsistency across browsers. To my way of thinking, specifying a point size should specify the physical size of the character to the user on the device he is using, but in practice it does not.
For example, suppose you font-family: cursive; font-size: 11pt
In most browsers under windows, this defaults to the much maligned MS-Comic font. IE7 decided to use some other default and that font seems smaller and less readable in the same point size. The same can be said of Arial vs. Verdana fonts. Specify the same point size, and your whole layout changes. Throw in DPI settings on setup and it is chaos.
The dots-per-inch (DPI) setting is a bit of an anachronism. Your monitor or phone has a fixed DPI. You can only change it if you get a new monitor or phone. Having a dialog box to change the DPI is there only because the device does not report to the operating system what the DPI is. It's an imperfect world.
So I leave you with this suggestion - use px for now to specify the font size, but only use it once. Make all other sizes relative to your base font.
Then, when you have to port everything over to the latest BlackBerry or iPod that does a better job of everything, switching from 11px to 11pt will be easy. And test out your software so it does look nice as you boost the font size.
Related
I'm designing a web page. I set the title font size :"24". There are no problems in my computer, but when I use my school computer, the font is set to a maximum size of "12" and can't be edited by Notepad ++. In my pc there are never problems of this kind. I think this problem is caused by browser settings, but I have no idea how to modify them.
the second PC is an HP G5 255 Notebook. RAM 4GB. Software version : Windows 10
It's difficult to know what restrictions are being imposed by your school computer's browser so we may not be able to help you. You might be better off asking someone at the school. The only thing I can suggest is using a text-size percent instead of a specific "pixel" sized font (24px) Font sized with percent or "em" units are much more flexible.
So, instead of: font-size: 24px
Try: font-size: 200%
Check out this link: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
So I'm reading using pt as a screen font size is bad as it's an absolute measurement and can render differently, but mostly these are old articles.
I've tried outputting text in 18pt/12pt/9pt alongside 1.5em/1em/0.7em and using various browsers' built in zoom capabilities the output adjusts consistently and similarly for both.
Additionally, when I'm reading the WCAG2 guidelines everything it says about font sizing is based on pt (e.g. 18pt for large text).
I guess the question is as the title, is pt really such a bad idea, and why and where does it fall over outside of my simple test?
thanks.
Advice against pt and other physical units is still valid from the accessibility point of view. The reason is that different people need different font sizes, and physical units fight against that, in the digital medium where font sizes would otherwise be adjustable.
It is true that all modern browsers have zooming capabilities, which work around some of the problems caused by physical units. But zooming is different from changing font size.
You can see this by testing with a page that sets some font size in pt and contains an image, too. When you zoom, all dimensions get changed. But when you change font size, using the browser controls for the purpose, IE 11 still refuses to adjust a size set in pt units. And this is, maybe arguably, correct behavior. And generally, when people want increased font size, they want just that—not zooming. Everything should work as otherwise, just with a larger size set for text. This works well when you, as an author, don’t set font size at all. If you set font size in pt, it doesn’t.
We have a standard j2ee application written using jboss richfaces 3.3.x. we have several style classes to decide the size of the font family and size.
Some of the end users who use our application have their own font settings (in Mozilla under Tools-->Options-->Content-->Default Options-->Advanced. It has the checkbox "Allow pages to choose their own font, instead of my selections above".
Some have minimum font size set to None and some have it set at 18. In such cases the buttons get rendered bigger in size and it exceeds the button size resulting in a unusable UI.
Is this an issue with Firefox, we can't advice the customer to modify these settings. How are we supposed to handle these cases.
For sure, it is not an issue with Firefox. I would rather say it is an issue with your application. You don't have to force customers to modify their browser settings just to use your application. Instead, you have to adapt. Gladly every well-known browser let specify the accessibility settings you cannot override, like the colors, fonts or font sizes.
The magic rule every person working with UI must keep in mind is that if you force your customers to adapt to your app, they would go away and buy another application, which respects them and instead of imposing something, adapts to their needs, takes in account their disabilities and matches their habits.
Remember some customers may have difficulties reading small text. If they change their settings to set text larger or to set the minimum font size, it's often because they just cannot read tiny text on a high resolution screen.
Now, what can you do to ensure your application displays correctly? The most obvious solution is to test it, to see what happens, and to adapt the design. Increase the font size. Run your app. If text overlaps buttons, you may want to increase the size of the buttons.
It's always possible that they will have different font settings. Different size, different faces (with different height/width/kerning). Browsers have their defaults. OS's have their defaults (Win vs. Linux vs. Mac, even Win XP vs. Win 7). Users can override them with their defaults...
It can be an issue even with desktop apps.
The only way is to design the app in such a way that it looks nice and is fully usable regardless of font face and size. UI and widgets should scale relative to font size.
I've just gotten into web development seriously, and I'm trying to make a page that appears the same physical size ( in inches ) across all browsers and platforms
I believe a combination of percentage values and inch values can make a consistent UI.
my own system is a 15.4 inch screen with 1920x1200 pixels i.e. 144 DPI.
Here is the most simple HTML code that fails to appear the right size on any browser except FireFox (Tried on Chrome 3, 4, Opera 10.5, IE7)
<html><head>
<body>
<div
style="position:absolute; width:2in; height:1in; border:1px solid" >
hello world</div>
</body></html>
Chrome, Opera and IE render a .67 inch box ( They seem to be assuming a 96 DPI screen )
I am running Windows XP, but I see no reason why that would make a difference. Similar incorrect rendering on other machines I have tested.
I thought when I say "1in" in HTML it means one actual inch in the real world....
How do I handle this?
Thanks in advance,
Vivek
Edit :
in 2006 I developed an activex control which did live video editing for a website, in 2008 we started seeing lots of Vista use and higher DPI screens which made the UI unusable, I reworked the application so that everything scaled according to DPI, since then everyones happy that they don't need glasses to use the feature....
The whole reason that Win7 and Vista have this "DPI scaling" mode is to allow non-DPI aware apps to display ( but since it basically scales up the app's canvas, the apps look blurry ).
I can't believe that calling GetDeviceCaps() or the X-Windows equivalent is harder than hardcoding 96 DPI. Anyway it wouldnt affect any page that measures in pixels....
Can't be done. Period.
Screens are a grid of pixels and that is the only unit recognized by the physical display. Any other measurement must be converted to pixels for display.
This conversion is done by the operating system's graphics subsystem, which has an internal "DPI" setting - quoted because it's arbitrary and does not necessarily correspond to the actual physical DPI of any real-world device. Windows, for example, defaults to 96 DPI regardless of the display that it's connected to.
When you look at a page with something with a height of "1in", your machine looks at it, calculates that, since it's set for 144 DPI, "1in" means 144 pixels and makes it 144 pixels tall, regardless of the physical distance that those 144 pixels will occupy on your display.
When the typical Windows user with the default 96 DPI setting looks at it, their computer calculates that "1in" = 96px and makes it 96 pixels tall, again regardless of the physical distance that will correspond to those 96 pixels.
And you know what? This is a good thing. It means that a user with poor vision can lower their video driver's DPI setting and everything sized in inches, cm, point, em, or other 'real-world' units (i.e., basically anything other than percent or pixels) will get bigger so that they can see it more easily. Conversely, those of us who don't mind small text can artificially increase our DPI settings to shrink it all and get more onto our screens.
The tyranny of the printed page, forcing things to be a certain size whether we like it or not, is no more. Embrace the power this gives your users over their experience. Don't try to take that away - you won't succeed and you'll just annoy people in the process.
Instead of giving the size in px you just give it in percentage . so that it can fit on any screen based on the percentage .
I don't really think you can, to be honest.
The DPI of the screen is determined in hardware, i.e. a 15.4" Screen with 1920x1080 resolution = 144DPI.
Why do you need the site to appear as the same physical dimensions? Surely the same size, proportional to the screen is enough? i.e. if my resolution is 1920x1080, your site should take up 50% of the wide. If I'm using 1600x1050, it should take up 60%?
In short — you can't, at least for use on screen.
Using real world units depends on having clients knowing the correct DPI for the system. Between clients that don't bother, and systems which are not configured correctly, it is a hopeless situation.
If you want something to scale so it is a reasonable size for the users system, then you are likely best off using em units to scale based on the user's font size. This still has problems where the defaults are not suitable and the user hasn't changed them, but it is right more often than physical units.
What is the best value for font size and line height where readability is concerned?
I myself prefer huge font size and greater line height like the one used in Dive into Python 3.
As with every other "what's the best" question in the world, the answer to this is "there is no 'best'" :-)
For font-size, arguably the 'best' is whatever the user has chosen themselves, either as the default or the minimum. In other words, leave the font size alone for main body copy, and only increase it for headings. You might consider decreasing it by a very small amount for non-critical content. 16px is generally the browser default.
For line-height, values between 1.3 and 1.5 are typically recommended for good readability, although this varies with font face and line length.
According to what W3C recommended, always use relative font size (em).
use
h1 {
font-size: 2em;
line-height: 2.5em;
}
instead of
h1 { font-size: 24px; line-height: 30px; }
So that user can always override the default font size.
There is no "best" font size and line height.
It all depends on the type of a site.
If it's mainly a WEB SITE with articles as the main content then bigger fonts and line heights may be better.
If it is an WEB APPLICATION then huge font sizes will prevent you from building a compact and functional interface. So you'll have to resort to typical OS font sizes.
It all depends.
Actually, there [is] a best font size and line height as far as “paragraph readability” on a web page is concerned. The objective of the question above is clear: readability. They did not ask for the best music or dressing style or something else that tolerates variety and different tastes; they did not ask for the best font color, or font size for my or your taste, or for old people, but the best font size and line height for specifically [readability], and there are most certainly guidelines for the best practice for that purpose. This is not a matter of taste, but a matter of optics and the mechanical how of reading; and it requires knowledge of typography too. Simplifying this to “whatever you and I like” is a gross confusion between taste and efficiency, color and health.
And I'm going to assume that the question is not asking about font sizes for titles, but for paragraphs on screen (because that's what we read mostly here on the web).
Even if we would politely label the existing guidelines as “recommendations”, they still pretty much provide an answer for the quest for “Best”. And before I share what I know, please realize that if you are not a typography designer by trade or at least very well researched in the field, then you are hardly qualified to answer the question above. And sometimes people do need excellent professionals to show them what they never realized was available, possible or existed; sometimes people are not sure what will feel or seem “best” until you actually show it to them and ask them to try it and see if they like it or if it grows fast on them. Sometimes people get used to wrong, unhealthy, or counter-productive practices, like sitting with a slouched back or reading web pages in small Times New Roman, until the wrong practice actually feels [comfortable] to them; it becomes their comfort zone! Does that mean that the “best” for them is what they habitually choose? Obviously not; not necessarily at all. And sometimes the problem is [not] even in the font size! Meaning, the user who chooses to increase the font size does not do so because of the font size, but because the line length (paragraph or column width) is way too long, or the line-height is way too tight, or there are no paragraphs at all (!) and it is just a wall of text, or the paragraph and background colors are too similar, so they increase font size to compensate for such bad-design issues, when they would've been perfectly happy with the same font size on a properly designed web page.
Now, regarding font size of paragraphs, and specifically for readability on the web, the best or recommended range is from 12px to 16px. This may change slightly if you're choosing non-conventional fonts, but that is not recommended anyway for websites. And specifying the size in px is probably preferable to pt (which is the unit used in Microsoft Word, for example) due to higher consistency in display across browsers when the size is specified in px (pixels); px for screen, and pt for print.
The argument of “whatever the user has chosen themselves” is invalid, because it assumes that the typical user changes the default font size in the browser settings at all; such an assumption is very misleading, and definitely does not represent actual data about the majority percentage or the typical Internet user who never bothers to change default browser font settings.
I respect the W3C recommendations, but today most browsers are perfectly capable of increasing the size of fonts on the screen anyway with Ctrl+(+), even if the size was specified by px, and Ctrl+0 to get the page back to original sizes. And in most cases, an informed designer is actually going to specify the font size of the paragraphs, line height, and width column so that they all compliment each other and enhance readability. So having [only] the font size of a well-designed page changed by an unaware user may actually compromise readability rather than enhance it, especially for long paragraphs. It is understandable that accessibility is important, and sometimes required for some governmental websites, but that can still be accounted for by the designer, so that column width increases as the font size is increased by the user; and in such cases, you would use the em unit instead of px, and the range would be from 0.75 em to 1 em (unless the base font size was hacked by a “body {font-size: 62.5%;}” CSS statement, then the range is 1 em to 1.6 em).
Regarding line height of paragraphs, the absolute minimum recommended is 150%. And in most cases, you should not need to go above 175%.
And again for web readability, sans-serif fonts (like Verdana) are much more highly recommended for paragraphs than serif fonts (like 'Times New Roman'). For printing, it is the opposite.
The two most recommended fonts to use on the web are Verdana and Georgia. For the best results, contrast them: best combination is Verdana for paragraphs and Georgia for titles.
You should also consider your content column width: it should fit from 75 to 85 paragraph characters (13 to 18 words) per full line in average. If lines are longer than that, web readability is compromised or slowed down; narrower than that, and your paragraphs look awkward.
Justify? No, pass on it; it slows down reading a bit, thus compromises readability, especially for fast readers (and you want fast readers to like your site!). Stick to align left for English.
The reasons for all these recommendations can be found in any popular web typography book and can be explained by most typography designers, should you really want to understand the wisdom behind in detail in order to feel convinced that these recommendations (or “best” practice guidelines) have very good reasons. Too big (or huge) a font, and readability is actually [not] enhanced, but compromised for most normal readers; too tiny a font, ditto. Why? Again, you can research that with the keywords I shared.
To summarize, for web readability of paragraphs: Verdana (sans-serif), 12—16px (not pt, and 0.75 em to 1 em when accessibility is super important), with line-height 150%—175%, 75—85 characters per line (control column width).