User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Font size (and font) and the layout (width, height, etc.) of DOM elements affect each other. If they were to be done within different phases in web design process, which should be decided first?
My observation and experience in the field says MOSTLY layout(Skeleton) comes first before deciding font and font size. But its not exactly necessary.
According to J.J.Garret, in his 'The elements of User Experience', he suggests the five planes model to support user experience project journey. Surface (look and feel, visual design, color, font type, font face, size and other details), Skeleton (Layout, wire frame, placement of buttons, navigation elements), Structure (IA), Scope, Strategy are these five planes which come into existence in the below order from bottom to top.
He mentions,
Each plane is dependent on the planes below it. So, the surface depends on the skeleton, which depends on the structure, which depends on the scope, which depends on the strategy. When the choices we make don't align with those above and below, projects often derail, deadlines are missed, and costs begin to skyrocket as the development team tries to piece together components that don't naturally fit.
But he also adds further that,
That does not mean, however, that every decision about the lower plane must be made before the upper plane can be addressed. Dependencies run in both directions, with decisions made on upper planes sometimes forcing a reevaluation (or an evaluation made for the first time!) of decisions on lower planes. At each level, we make decisions according to what the competition is doing, industry best practices, and plain old common sense. These decisions can have a ripple effect in both directions.
Ultimately, it comes to the context of other relevant things and then go ahead with the design decision, if it does not suit, its an iterative process, come back to earlier plane, make sure that the decisions for the place are well in place and then re-think of the above plane again.
Understand you don't have complete control over the size of the font (or you shouldn't impose complete control over the size of the font). People can set the default size of their browsers font, and to overrule their preferences by setting the font to a specific pixel size is bad UX. Also, it's very possible you won't have complete control over the fonts used unless the page downloads all the fonts it needs.
With that in mind, you should design layouts that are flexible enough to accommodate (look and function well with) a range of font sizes. This is a learned skill, designing without complete precision like one has when designing printed material.
Many web designers these days design iteratively: rough layout, then address the typography, then tweak the layout, then back to typography, with rounds of testing on various devices or emulators between iterations. Conceptually the layout comes first, but is revisited and fine tuned throughout the process.
