Typography in responsive web design – How to choose the right font

By , April 24th, 2015 , Tags: , , , , , , , , 0 Comments

Typography in responsive web design – How to choose the right font

Typography in responsive web design For a successful and coherent web design are typography and overall typeface design important. Therefore, this series of articles you support in selecting the right font for your web project and also shows what is important in the use of reactive typography. You will learn also how support for web fonts can be used in modern browsers to use fonts of your choice for the award of text. In the first article in this series dealing more specifically with the selection and integration of the correct font.


Choosing the right font

One of the most important aspects of web design is reactive reactive typography.When it comes to reactive typography, there is something more to be done to change as the container of the text in its size. From the choice of font and color and the converting readable font sizes on line spacing to the line length to different output formats – There are several ways to implement liquid and reactive texts for your site.

Make available Text

Typography in responsive web design Before we start with the techniques to adapt texts for different screen sizes, we need to ensure that your text can be with sufficient color contrast and an easy to read font quickly detected and read fluently. Here you need to consider three points to make sure that your text is easily accessible and easy to read:

1. Choose a readable font

If you choose a font for your site, it is important to be sure to choose a legible font for the main content. Not all types of fonts are suitable for the main text. Some fonts, such as artistic script fonts can be a good choice for use in headings. When it comes to the main content, but you should make sure to always choose a font that is very easy to read.

Typography in responsive web design. There are a lot of fonts to choose from. Services like Google web fonts and Typekit offer a wide selection of fonts. The user-friendly implementation of these services, you will also quickly helped in deciding the right font.

In addition, you allow the CSS3 @ font-face Rule, involve individual fonts in your web pages; now with very good cross-browser support and fallback fonts for older browsers. Due to the variety of supported formats of the browsers, you should at least three font files in the @ font-face rule into account in order to ensure cross-browser compatibility: EOT, WOFF and TrueType.

After you have your own font now declared, you can use it, just like you already do it with other writings. Here you should have a fallback font for browsers define that your on the @ font-face can not read Scripture defined rule.

Note not to use too many different fonts for your web pages. This can have a negative and also confusing effect on the reader, especially for those with dyslexia or attention deficit.

Tips for writing combinations  Joshua Johnson shows in an article on designshack.net a list and find out which combine Google Fonts well together .  Douglas Bonneville treated on Smashing Magazine best practices for font combinations ,

2. Font Color in regard to accessibility

Content of a web page are primarily there to be read. Low-contrast font colors can usually only be read very tedious. Avoid large therefore compromising the readability of your text. This is not just a design tip – it’s a necessity if you are creating content for the Internet.

Contrast between text and background

In one experiment, an investigation was carried out on various websites on readability , This shows the importance of a sufficient contrast between text and background.  Another experiment confirmed that the reading time is smaller when a high contrast between the text and the background. More Find out more on this contrastrebellion.com ,

Lyrics are so much easier to read if there is sufficient contrast between the text and the background. To measure the degree of contrast of your designs, there are several tools. Contrast-A is one of these tools, with which you can find suitable color combinations, in accordance with the formulated by the W3C guidelines for accessibility of Web content ,

Different lighting conditions

To emphasize the importance of the readability of text and accessibility and also to underline the fact that the responsive web design is about more than just the adaptation of layout to fit different screen sizes, I would like to briefly point out that the W3C a new Media Query concept in the Media Queries Module Level 4 introduced. It act this is the “Environment Media” feature , Specifically to the “light-level” Media function.

This light brightness feature is used to enable designers to adapt the style of the document depending on the ambient light of the device. In this way, maximum readability of web content on mobile devices is ensured. The user apparatus only has to be equipped with a light sensor in order to trigger this new function.

Basically, Typography in responsive web design you allow the media query for light brightness, CSS styles within themedia rule to include, just like you normally do it with already known media inquiries, if you define new styles, depending on the screen size. In this case, however, you would define based on the value of the device sensor new styles. The following values ​​can be used to determine the luminosity of the environment: dim ,normal , washed .

To change the background and font color in different lighting conditions, the CSS code would look like this:

However, let us not go into too much detail of these very media query for lighting conditions, after all it is still a draft and is not supported by any browser. I’ll just wanted to show that it is in the design of reactive Webdesign by more, across all devices adjust as texts within their assigned layout positions. Of course, the “light level” -Medienabfrage is limited in its capacity not only to adapt font colors in terms of ambient light. However, this will probably be the most obvious application for this query.

Reading Tip: If you want to learn more about the “light level” -Medienabfrage, I suggest you read an article by Jordan Moore ,

3. Use real text instead of text as a graphic

Text can be converted by the voice synthesizer in screen readers in sound. Text can also be increased using screen magnification or magnification software – without loss of quality. These are the two main reasons why the provision of content in text format for the accessibility is so important. Although it is possible to provide an alternative text for graphics, it is not possible to enlarge text in most graphics without sacrificing quality. One exception: The graphics are vector-based, such as Scalable Vector Graphics (SVG) or Flash.

However, Typography in responsive web design is a different site of potential problems related to the accessibility of web content. When you create a responsive web design that will meet different devices and users, you should also consider disadvantaged users and to ensure that they can easily access your web content also.

I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.