"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.
–
DA01Jan 29 '14 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.
–
sawaJan 29 '14 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?
–
DA01Jan 29 '14 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.

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 ﬁt.

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 ﬁrst 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.