And one more question: the basic font size for body text is for all 3 devices the same? I think you use 16pt. The steps for headline or title are +2pt or +3pt? What do you suggest? Thank you.
Mr. F.
Oooo @Mr_Fozzie, there is not an easy answer here because there are varied schools of thought out there. I go on what is visual and functional for the User because they are the ones that will make the difference to an online business.
On a desktop HD I go for 17pt or 18pt (dependant on the font style used) for the paragraph text.
On tablet I go for 16pt or 17pt (dependant on the font style used) for the paragraph text.
On mobile I go for 16pt or 17pt (dependant on the font style used) for the paragraph text.
Again the headings are subjective but I add at least 10pts making it roughly 28pt minimum - it can be more if it needs to be more impactful.
With the page title again it depends on the design and the impact you want to make but I have it at a minimum of 24pts more than the paragraph text making it roughly 42pt and it also depends on the font being used so at times it can be more.
These are not hard and fast rules but my experience and the years of insightful statistics! 
Thank you Greenskin.
That was helpful. Most of my work was for printing. I used InDesign and now Affinity Publisher. A printed brochure is always responsive 
. It looks the same, no matter who has it in hands. But paper becomes more and more obsolete and i try to make the transition to web based pages.
Have a nice weekend.
Mr. F.
1 Like
Let’s change the discussion…
Moving from print to the web is confusing, difficult, and barbaric. What I mean by this is print (text and images) is beautiful and can flow like poetry at the hands of a good designer. Web browsers (CSS specifically) capabilities for text layout and flow are years behind what software such as Affinity Publisher and inDesign can output.
For a perfectionist like me, coming from print and video is unbelievably painful on a daily basis. I do not like designing for the web. I can only accomplish a fraction of what I do in video.
As I previously wrote, points don’t exist on the web. It’s all pixels. Ignore the font size number in Sparkle (and really all software) and use the slider with your eyes to judge proportion and placement. If the font, its size, weight, and placement look good, then it is.
Apple and all device manufactures present their device “resolution” in ways that are true, but confusing and not really useful for web design. Apple for example, shows the device screen resolution in X pixels x Y pixels and pixel density in PPI (pixels per inch). Great, but for web design we need the browser resolution that is rendered (drawn) on the screen at various web widths (breakpoints) as determined by the user, thus the calculations I presented. Yet these calculations seem contradictory and senseless. Which, in web design implementation is true. Your “hmmm” response is exactly right.
So the takeaway is to learn to trust our eyes and listen to users feedback. Apple’s Retina screens have surpassed what the human eye with 20/20 vision can see at a normal distance anyway. Ignore points, the formulas, and calculations we think we need to do. It takes years of practice to produce beautiful design in print. The same is true for web design. Design, create, publish. Iterate, iterate, iterate. My first few iterative designs in any medium is ugly to be polite. It’s not unusual for me to redesign a web page 10 times before I get a result I like.
I stopped the experiment of abandoning the 320 layout in favor of 480 for the exact reason you mentioned. The scaling down was horrible. I’m back to designing each page for each device.
A final note specific to browser width…I would prefer no default breakpoints, meaning unlimited freedom to set my own. Fixed breakpoints create boundaries that limit how design elements flow. That seems okay for today’s web, but I am working with animators and illustrators who want to bring their craft to the web and fixed breakpoints is a wall. The freedom of no fixed breakpoints is one reason Apple has such cool and fluid animation on their website.
Other than hand coding, Sparkle is one of only two web design Apps advancing the true art of design on the web.
4 Likes
Not a problem @Mr_Fozzie!
No, paper / print isn’t obsolete just going through adjustments and fitting in with our digital world. At the moment I’m experimenting with presenting print on the web. I mean it can’t be exactly the same but Sparkle has been a fantastic platform to experiment with. Sparkle with its fixed breakpoints allows for this because you can create (fixed in place) what you want per breakpoint instead of it slipping, sliding, moving, and adapting to fluid breakpoints.
You noticed I didn’t fix everything down with the text sizing because in the end we design on a fixed width canvas which is the closest thing to print design. Most of the online web design platforms work by a layer of CSS mathematics taking most of the designers out of the picture as they let the system do a lot of the work allowing for mis-alignments, fonts over fonts, non-legible fonts sizing, far to small images and icons, etc, etc, etc… most of the time on mobile.
You can alway tell a Print Designer who has transitioned over to the web in how they layout their elements, use the fonts, play with the colours, and lead our eyes to feel satisfaction. Don’t forget you can do that as well!
Great discussion. Mostly I’m from print design, and most times I can achieve what I want on the web. The exceptions being break points of course. I wish we could set our own device sizes. I also design my own device pages.
Here’s an idea. Let’s say setting a device size of 1200 and 320 for an iPhone. Each page would have two views toggled by a tab. One tab the 1200, and another would be the 320. You can easily go back and forth between the two. I’ve seen this done in many other apps. By I’m blathering on.
Back to the subject at hand. I use 18-20 point fonts for iPhone, and 14 point size for the 1200. I don’t design for portrait iPad. I don’t design for landscape iPhone.
-Bill
Hello.
Happy Mother’s Day (at least in Germany)! Treat your parents well and spoil them today.
I really enjoy this discussion here. The breakpoints in Sparkle are certainly well chosen for the different devices. But my impression is that these gadgets are now getting bigger and bigger and accordingly have bigger screens.
What would happen if in an upcoming version of Sparkle the breakpoints are adjusted upwards? Would all projects created with an older version become a construction site and have to be adapted to the new situation? This is surely not possible automatically, without destroying the layout.
That would drive some people crazy, or not? So let’s do the best with what we have.
Mr. F.