You've probably heard that good typography is invisible to the naked eye, but to be more precise, good typography makes reading pleasant. As the eye moves along a line of text, it makes “jumps” between words and letters. This is a saccadic movement — a conscious, sequential fixation on specific words or phrases, which your brain quickly processes and subconsciously seeks. If the brain is confused by the meaning of what was read, the eyes return to the beginning of the segment to refocus and interpret the text again.
Good typography minimizes eye strain and allows the eyes to move smoothly through the text. While it's a bit easier for web designers to manage this on desktop websites, things become more complicated on mobile. Mobile devices present challenges like limited screen space, ambient lighting, and screen brightness — all of which affect how text is read.
Fortunately, there are certain methods and principles that make web design for smartphones and tablets easier and improve readability. Mobile devices are used everywhere, and websites are either built with responsive design or created as separate mobile versions. Thus, a web designer must keep in mind the specific typographic features for mobile sites.
We’ll explore not only the principles of good typography but also draw inspiration from mobile site examples and responsive designs — learning from what has been successfully used and recognized over the years.
Spacing
Contrary to the popular belief that small spaces should be filled with as much text as possible, that’s not a good idea. The essence of typesetting lies more in spacing than in the number of letters. Take note of the letters “o,” “B,” and “P.”
For easy reading, subheadings from <h1> to <p>, and sometimes <h6>, are used. But there's another level of hierarchy — spacing. The space between letters is typically smaller than between words, and the space between words is smaller than between lines. This is why on mobile devices, the amount of white space is crucial — it helps the eyes navigate through the flow of characters and symbols, breaking text into logical sections, visually into paragraphs, and more.
For instance, projects like Paid to Exist, Mozilla Russia, and Colly clearly demonstrate how minimal text volume contributes to better comprehension without compromising design.
Sense of Proportion
How long should a line of text be? Full width of the screen or shorter? For a long time, 65 characters per line was considered optimal, but it actually depends on font style, letter spacing, font size, use of italics or bold, and other details.
Let’s debunk a myth: there is no standard line length. Mobile devices vary greatly in resolution, and thus line length varies as well. However, mobile media publications generally aim for no more than 39 characters per line — a length that has proven effective over recent years.
The mobile version of Vedomosti, responsive designs of Amy Stoddard and RIA Novosti all stick to short, readable lines — around 39 characters or even slightly fewer.
Scaling
Mobile screens are still smaller than monitors, and when reading articles or news, users often zoom in on the page. It doesn’t matter what model of smartphone or tablet you have — this is a common behavior. That’s why more and more web designers and front-end developers take this into account. So, how do we prevent forced zooming?
A legible text size removes the need for zooming. When there is too little text or it's hard to read visually, users zoom in. One solution is contrast grouping — e.g., different font sizes or styles for subheadings, previews, and body text. Color and clarity also play a crucial role.
A good example is the project Dorigati, which has slightly different designs on desktop and mobile. On smartphones, the text doesn't look small, and the headings are large and readable. The design remains intact but is structured in a way that requires no zooming.
The same applies to the mobile version of Lenta.ru. While the desktop version features a side menu panel, the mobile version uses a hidden “hamburger” menu with slightly different font styling. The text is bold, all-caps, and the registration section has been moved. This makes tapping menu items easier and reading faster. The eye quickly finds what it’s looking for. The article itself remains unchanged in design, but spacing between letters and lines stands out — the text doesn’t turn into a “blur.”
Flexibility
The essence of mobile typography is not in being unique or identical to desktop versions. On the contrary, it must be flexible. Open the same site in different browsers on the same phone, and in 90% of cases, you'll see slight differences in layout. That's due to browser engines — whether it's a “closed” system like WP/iOS or an “open” one like Android. Opera, UC Browser, Chrome, IE, Safari — they all render pages slightly differently.
This is why developers increasingly create responsive websites — flexible, grid-based layouts that adapt to different screens. Compare Fork CMS, Mr. Simon Collison, the familiar online store OZON, and for comparison, Wiggle (shown below).
Some projects replace responsive or mobile versions with apps (usually e-commerce), but typography still plays a key role and follows the same principles.
Left Alignment
Typically, text is aligned left, creating a ragged right edge. Why? Because as eyes move from left to right, the brain picks up on patterns and consistency — making it easier to absorb information and estimate distances and angles. Hence the phrase “scanning diagonally,” or quickly digesting content.
Sometimes, text is justified (aligned both left and right), a trend linked to block design. But this causes uneven spacing between words — or lines with only two words. This makes reading harder, but perhaps it’s a design requirement from the client.
Regardless, mobile content is read in distracting situations — during commutes, while glancing down, then up again. The eyes need something familiar to return to. With justified alignment, the eye tends to “get lost.”
Two examples below illustrate this well. See RBC.ru versus SROportal, where the latter even requires manual zooming.
Text Isn’t Everything
Sometimes designers think typography only concerns articles or news. But it also applies to menus, categories, and text on images. Consider online store Argos. Its homepage highlights promotions with excellent contrast between font and background. Also, menu icons are clear, linear, and spaced well — not too small. There's plenty of white space throughout the interface.
Note: Compared to Lenta.ru’s dropdown, Argos’s menu is easier to tap with a finger.
Another example: travel site Roanoke Outside. It has no separate mobile version but is responsive. Content blocks stack vertically, text is aligned and elements are well placed. Typography on images is readable enough not to require zooming, even though the image size is reduced for mobile.
In Summary
To sum up the points above, here’s what makes mobile typography special:
Final Thoughts
Typography is often called a craft, and some designers dedicate their lives to it. But there are no rigid rules — everything is relative. That’s why we don’t specify exact sizes, margins, or spacing. Every situation, site, and screen size is unique.
If readability is a key goal of your project, remember three principles: smooth flow of text along a line, clear spatial structure and hierarchy, and proper contrast — especially useful when screens are exposed to natural light, which is much brighter than artificial indoor lighting.
There are no absolute rules in mobile typography — except one: how your eyes perceive the text. But principles like these are a good starting point for designing readable mobile content.