What is a standard go to font size to use for desktop and mobile?
Also is there a good font size that works for all devices?
Been looking through the topics and all the discussions are from years ago.
Thank you in advance.
What is a standard go to font size to use for desktop and mobile?
Also is there a good font size that works for all devices?
Been looking through the topics and all the discussions are from years ago.
Thank you in advance.
The neat thing about Sitely is one makes different layouts for different screens. Each screen (phone, tablet, desktop, etc) requires its own size of type.
So no, there isn’t one good size font for all these different devices.
I sort of figured this would be the answer… just thought there was some sort of magic that might be lurking around somewhere!![]()
There is some magic where the type sizes can change automatically when you go from setting the desktop view and then go to doing the mobile view…and then the in-between size views.
The type can automatically be shrunk way down by Sitely and I have to adjust it.
Read up on styles and how using settings can apply throughout the page and on other pages.
Re-size this Sitely Text page to different widths on your desktop computer and you’ll see how badly someone can use type sizes. Some of them are crazy large and other widths are unreadably tiny.
Ahhh yes Styles! I seem to always overlook this… I am going to play around a bit and see if I can master this. Thank you for this advice!
As for the desktop to mobile issues…I am finally learning to unblock the button to show certain elements should be on mobile versions only. This helps a lot!![]()
I’m still learning this stuff, too (or avoiding learning ;-).
Computers demand so much of us everyday…it’s like being slowly devoured by tiny crabs.
OMG yer sooo right!!! ![]()
A good rule of thumb (for body text) is 15pt - 18pt on desktop layouts and 10pt - 12pt on mobile. Using styles is a great way to ensure consistency across devices. Just create a piece of text using Sitely’s body style. With the text selected make any changes, such as font, line spacing and size, then update the style in the style panel. Now switch to the mobile layout. With the same text box selected, adjust the font size and then update the style again. This will allow Sitely to remember your style preferences for both desktop and mobile versions whenever you add more body text. You can use the same procedure to change any of the built-in styles.
mobilde 13 puntonun altında kullanmıyorum. genelin dışındayım sanırım. (:
Oh Fabulous! Thank you so much! ![]()
I’m out of the “norm” as well then!..
For me 13pt is the min. for paragraph text, but dependent on the font used this can go up to 15/16pt. I choose the font size based on eligibility for the end User..
I never go under 16px, because on the cell phone people over 50 can’t read.
I don’t really have much to add to the discussion except an bit of an obscure tip: if you have a form on the page, and have a text i put that has a size that’s less than 16, iOS browsers will zoom the page even on a mobile layout. 16 or more and it won’t zoom. Almost feels like a hint that Apple considers 16 the baseline for mobile.
A very valid point. In fact both platforms (iOS and Android) treat 16pt as the default readable body size. It’s a size designed to be readable at a reading distance of 30-40 cm. But, text size really should take context into account. Text-heavy content, such as large blocks of text and product descriptions often benefit from larger text sizes, particularly when combined with line spacing of 1.4. However, certain applications, such as social media-type apps tend to scale down font size, primarily to reduce scrolling friction (more posts per screen keeps users scanning quickly). It’s a sort of trade-of that places efficiency over comfort.
This can also work for websites where articles and descriptions are short - where attention may be fragmented, rather than presented as a continuous narrative, I.e, where layout blocks may be used to present short bursts of information in topic or subject specific blocks. This is typically relevant where hierarchy is driven more by layout than typography. Ultimately, it’s all about personal preference and audience.
Who is your target audience? How good is their eyesight? These are rhetorical questions, you cannot second guess the minimum readable font size. This really leaves you the only option of making your site readable by everyone with okay sight.
And, we already have contributors mentioning pt (point) when they possibly mean px (pixel). Generally 12pt is equivalent to 16px.
Interestingly, the Chicago Manual of Style (the bible for editors) does not seem to specify ideal font sizes but makes a recommendation that body text is 12pt (16px).
However, font size alone does not affect readability, choice of font, weight, colour, the background colour and the number of characters per line (50 to 75 is an oft quoted range, with some finding 55 the ideal) all play a part. It’s a right old can of
.
Sometimes you find a website that just looks fantastic because proper graphic design principles have been used. For example, apple.com. If you find a site that you like the look of you can use a tool like Fount to discover the font, font size and style actually displaying. This is easier than delving into a web browsers developer tools.
Do you know anyone poorer vision? Get them to review your site for readability. There are also tools that can asses your websites accessibility. W3C has a good list here.
Have fun and mid those tricky
!