I am working on some UI controls and wondering if I should use pt for the widths, heights, border sizes, margins, paddings, and font sizes? I want the controls to be scalable and look the same on every screen and projector.
Is there something else I should worry about when designing for scalable user interfaces? I am already using non-raster based graphics (colors and SVG).
No. pt's are fixed size. You should be using em's and/or ex's (maybe %'s) if you want scalability.
If you want scalable, then you don't want pt, which resolve to 1/72th of an inch (but only if the computer is correctly calibrated to know what DPI to use).
If something is sensible at 72pt (1 inch) for a screen that you sit right in front of, then it isn't going to be sensible when projected (still 1 inch tall) on a screen 10 feet away.
Yes, you can use pt or em. 12pt = 1em. This is the size that is adjusted when you choose a smaller or bigger font in your browser. Elements marked up with pt or em are sized along with the font (I think).
Modern browsers however (even the latest FireFox and IE), prefer to zoom the entire page instead of only the font, although it's still an option to zoom fonts only. In that case, it doesn't matter much whether you choose px or pt.
As has been mentioned, 1 point is 1/72 of an inch. The screen I'm using has 1200 pixels on a height of 20cm. If I project it, those 1200 pixels spread to 3 metres.
There are many measurements in the w3c CSS specification, many are used but few properly.
Your best bet is to use em's for layout which is related to the font in use. Percentages can also be used.
However, you'll need to 'nudge' some browser layouts by "a gnat's tadger", particularly when looking at buttons, dropdowns and text boxes. Often these are setting something to position relative to nudge it up/left/down/whatever. Typical examples are when IE and Firefox have slight differences.
It's quite ambitious to have your forms rendering "the same on all screens and projectors", implying different browsers all look the same.
Related
Let's say I want to use the pt unit to make sure that my html pages look consistent across device/browser/os. My understanding of the pt is that it's supposed to be equal to 1/72 of an inch on the screen.
Codepen
HTML
<html>
<body>
<div></div>
</body>
</html>
CSS
div {
background-color:black;
height: 72pt;
width: 72pt;
}
This produces more or less what looks like a 1" x 1" square on my screen (this is just a screenshot of what I see). However, I can physically put a ruler up to my display and measure it, and the result is more like 1 3/16".
My browser zoom level is 100%, so that is not affecting things. I'm using Chrome on Windows 8.1 with the default font size set (16 in Chrome). My OS scaling level is 100%. I have a 24" monitor set to 1920x1080 resolution. Also of note, Chrome reports that the square is exactly 96x96 px.
This leads me to believe that what I have have heard, that 72pt = 1 physical inch in the real world on any given display/browser/OS combo, is NOT accurate. Is this correct?
Given this behavior, I assume that if I had a 22" monitor with the same resolution, the pixel density would be greater, and thus the square would appear smaller (perhaps closer to being exactly 1" as measured by a physical ruler).
How do Retina displays work with all of this? I assume the square will not appear twice as small (that would be silly). Is the browser doing some kind of internal handling of super high DPI displays? For instance, Chrome seems to have some concept of "device pixel ratio (DPR)" so that it can treat an iPad with a "true" resolution of 2048 x 1536 (DPR 2) as a more standard 1024 x 768. So I assume DPR ends up somewhat normalizing screens of drastically different DPI, but after that has been accounted for, different devices with different DPI/PPI will still see slightly different physical sizes of our square.
Is it true that the pt unit will ALWAYS physically measure consistently?
No, CSS abandoned that requirement in 2011 as most ignored it anyway.
https://www.w3.org/Style/Examples/007/units.en.html has more detailed explanation
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.
In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.
CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.
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.
What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.
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.