Optimum Page and Font Pixel Size for Viewing Website

[Gibsonriver2]

Hello:

When deciding on what page size, pixel size for major titles, minor titles, text size, is there some rule of thumbs that one needs to look at before starting the build of the website.

My situation is that I design on a 49 in. screen and preview. Then I will publish to my laptop to see what it looks like. For me I have my browser set at 50 % zoom. I am aware that designing on a big screen can create a viewing bias and I did fall into that trap so now I have to make all my pictures smaller so that the entire picture is viewable at 100 % zoom.

I realized that it seems most people have the default zoom set for 100 % which makes everything on my website too big, unless people change the scale of the browser. I suspect most will not change the zoom and thus leave my website.

I tend to change the zoom when I am browsing to suit my taste, but that is my bias.

The Xara manual suggests to make the page size no bigger than 990 pixels wide but more common is typically 800 pixels. I built my site using 1280 pixels.

Since there are so many screen sizes out there, how does one create a strategy on picture proportions, font proportions, to make the site a pleasurable viewing experience?

Sincerely,

Ingo

[bwood]

Welcome @gibsonriver2 and Ingo!

My sites for desktop and laptop are 1100 px. I find that 1100 also provides optimal tablet viewing in landscape and portrait. My mobile is the suggested Xara 750, but I’ve seen some sites for mobile that are 600 px.
I think the Xara suggested site settings for laptop and desktop are safe sizes for most consumer monitors. 1250px might be stretching for most at home monitors. I have a very large monitor but I do photo production as well

Nowadays my prime concern is mobile and tablet. The mobile viewing stats are very high.

Font sizes for myself are 12-14 px for desktop and tablet. 16-18 px mobile.

In regard to your viewing ratios that’s above my pay grade but many will chime in.

Hope that sheds a little light.

-Bill

[Gibsonriver2]

Hi Bill:

Thanks for your input and experience. The text sizing is very close to what I use and my range is between 16-20 px for text on mobile. I use 22-26 for big screens.
It seems there are no hard and fast rules for sizing but more general ones. I am thinking when I start a project to do some quick testing on sizing based on what I see in a browser before I do too much work.

I am interested in the mobile page width of 750 px. I may have read incorrectly in the Xara manual, but they when you create a variant it defaults to 480 pixels. If 750 pixels works fine then I would prefer to use that. Would there be any performance issues in a mobile variant when the website is loading with a bigger page size or a smaller page size. I have noticed that a 480 px page loading in a mobile will do some resizing to get a fit to screen, so there is a small delay.

I have done extensive experimentation on sizing and what I should do is a little spreadsheet on what I have learned hoping that it may help out others who have that same question.

Ingo

[ss-kalm]

Coming from someone who uses reading glasses, because of old age ... Those text sizes are massive!

Do you use font sizes that big in a word document?

From my point of view, I use bigger screens to be able to view more ... not to make things bigger, and view less.

Just my two cents.

[Egg Bramhill]

Hi Ingo and welcome to TG. One thing you may have overlooked is the fairly recent 'fit to width feature' that scales the webpage to fit the browser width (you can set a maximum width such that it doesn't become ridiculously large).

... unless people change the scale of the browser. I suspect most will not change the zoom and thus leave my website.

The majority of users have no idea to do this so avoid it like the plague

[Gibsonriver2]

Hi ss-kalm:

Thanks for your two cents.

When I started using Xara, I came from a world of Word etc. and font points were all I was familiar with. Xara taught me to use pixels instead.

There is a conversion factor of pixels to points of 1.32.
So for example, if I use a pixel count of 22, I divide this by 1.32 =16.6 points.

Conversely, if you want to find out what pixel size is represented by a point size, multiply the points by 1.32. For example, I like to use a 12 point font in all my documents. Therefore, 12 X 1.32 = 15.8 pixels which is in the suggested range most website builders seem to use for legible text. Xara recommends 15 pixels.

Ingo

[Gibsonriver2]

Hello Bramhill:

You are a lifesaver and yes most people do not know about browser scaling.

When I started using the latest version of Xara, I did find and was using the “fit to scale” feature. I had assumed it would remain the default setting after having toggled in on. Apparently not since this whole topic started as a result of my website scaling turning wonky whereas before it worked perfectly.

It will be on my cheat list of things to do before one gets started on a website build.

There is an excellent example of a Xara created responsive website design explanation which I came across while learning more about “fit to scale”.
http://previews.xara.hosting/FitToWidth/index.htm
Xara made this example website that has a very good explanation of responsive websites and how one can resize the browser window in real time to observe the response.

I think Xara should put the ‘fit to scale’ in the introduction page so people do not forget about this powerful feature. It also allows me not to be concerned about the page width as long as the range of sizes is reasonable(900-1280px) for anything bigger than a mobile phone and 480 pixels for a mobile, the browser fit the website perfectly.

Ingo

[ss-kalm]

Apologies, I didn't read PIXELS, I automatically assumed Points (even though you did say PX) ... my brain automatically assumes fonts are point sizes.

I always have Xara fonts set to points.

[Gibsonriver2]

Hopefully other users can see the simple calculation to get some rules of thumb on the size comparison of points to pixels.

Trust me I had the same mindset problem of points and pixels. It took awhile to get used to the difference of conversion. Being a fellow Ontarian, do you remember when Canada changed from Imperial units to Metric. At that time I had to work with both. Ended becoming a engineer. Boy were those conversions fun, but eventually came around to a Metric mind.

Ingo

[bwood]

Hello Bramhill:

You are a lifesaver and yes most people do not know about browser scaling.

When I started using the latest version of Xara, I did find and was using the “fit to scale” feature. I had assumed it would remain the default setting after having toggled in on. Apparently not since this whole topic started as a result of my website scaling turning wonky whereas before it worked perfectly.

It will be on my cheat list of things to do before one gets started on a website build.

There is an excellent example of a Xara created responsive website design explanation which I came across while learning more about “fit to scale”.
http://previews.xara.hosting/FitToWidth/index.htm
Xara made this example website that has a very good explanation of responsive websites and how one can resize the browser window in real time to observe the response.

I think Xara should put the ‘fit to scale’ in the introduction page so people do not forget about this powerful feature. It also allows me not to be concerned about the page width as long as the range of sizes is reasonable(900-1280px) for anything bigger than a mobile phone and 480 pixels for a mobile, the browser fit the website perfectly.

Ingo

Ah yes. I remember that link now. I admit I overlooked that feature. Now I have a little private space of my own I’m going to mess with that. Many thanks for the reminder Ingo.