Vertical text direction in web design – good use cases

Home »Web Design» Typography »Vertical Text Direction in Web Design – Good Use Cases
Vertical text direction in web design – good use cases

Ordinary standard and template web projects are few who impress, so many want to create something truly unique. You will find some interesting ideas in the selection of colorful website designs. Someone uses variegated images on the main one for this purpose, animation or some original approaches to the layout of elements. One of these methods is the vertical arrangement of text on the screen.

In fact, such an orientation of labels / content in web design is not often seen, here the horizontal rhythm “rules”. However, in last year’s article about current typographic trends, we already mentioned this chip. One of its advantages is that you don’t have to take any extreme measures or difficulties – even an insignificant “dose” of the vertical text is enough to achieve an effective result. And with today’s examples we will prove it to you …

Here, the developers changed the main navigation, deploying it 90 degrees and flipping horizontally. You have to read from the bottom up – this is a rather unusual, but intriguing decision. As a result, the welcome screen catches without a flashy central object / picture. In addition, pay attention to the header: it creates a feeling of spaciousness, and the logo attracts the eye, standing out from the general background without any effort.

There are other good examples where the vertical inscription becomes a kind of cherry on the cake. Lydia Amaruch, the web designer’s online portfolio, is great proof. As in the case of Archi Graphi, the technique is not used very actively, but very successfully. The elegant traditional horizontal menu covers the most important points, its other elements overlap with the corresponding stripes in the background, creating a harmonious perception.

The authors of the project adopt the same approach. The main menu items are hidden behind a special hamburger menu, links to the home page and social networks remain visible. Again, pay attention to the overall picture. The vertical direction of the text is visible only in individual small details, such as the navigation element on the right, divided into three translucent objects with elongated characters.

In these resources, the approach we are considering applies to all navigation as a whole. As it turned out, she not only catches the eye, but also just comfortable. Note that these two examples have different themes, mood and atmosphere, but such a non-standard solution looks perfect in both cases.

The personal portfolio of Ivan Ibanez is built on the principle of the square. There are empty blocks, a split layout, ultra-thin lines and plenty of clean space. The vertical layout of the text perfectly complements the design.

The creators who developed the second project posted links around the perimeter of the large center image – each in its own corner. Thus, nothing distracts from the slightly eerie welcome screen. At the same time, all links to sections / pages are in front of the user.

Now consider the use of vertical lettering, which is directly part of the content of the site. Since this solution looks strange for most users, it can be used to emphasize especially important elements, for example, a slogan. It is not necessary to use large Bold fonts for this, the look of visitors clings to the text.

Realized this idea Prime Park Sessions. Here the agency’s brand name plate is shifted to the left, from where everyone usually begins to read. It is a kind of reflection of non-standard navigation on the right. As a result, the entire design feels finished and visually appealing.

The developers of the site also chose a vertical inscription to display the slogan. It is located on a fairly wide background and looks like a separate sidebar on the page. Let there be nothing there, the idea is not bad.

Another implementation method is for web page headers. In both cases, developers prefer to focus the user’s attention on the important, that is, on the content. “Secondary” heading labels are shifted slightly to the right and rotated 90 degrees, which naturally brings the text to the fore.

Kitamura Makura’s title is shifted to the right and looks like part of the navigation.

At the second web resource, the header remains part of the text block.

Both sites look interesting, making vertical text part of the surroundings. Protec demonstrates sweeping large letters, located from top to bottom. Moreover, they are neatly shifted to the left, giving all the same the main priority to the content.