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?

  • Decide the layout, and then adjust the font size (and the font) to make the content fit.
  • Decide the font size (and the font), and then decide the layout to make the content fit.
  • 2
    "If they were to be done within different phases" = that would be a mistake. Both layout and typography are integral elements and part of the whole. They play off of each other.
    – DA01
    Commented Jan 29, 2014 at 4:47
  • @DA01 When you do wireframe prototyping, the layout is decided, but I think the font and the font size are decided later in the design phase.
    – sawa
    Commented Jan 29, 2014 at 5:25
  • I guess it depends entirely on your process and the phases you have. IMHO, however, is that phases in a web project are usually what cause a lot of the problems. Are you a waterfall shop? If, so does your UX team handle both the UX and the UI design?
    – DA01
    Commented Jan 29, 2014 at 5:34

2 Answers 2


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.

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.