• How to make a font more contrasting. Skinny fonts make the Internet unreadable. Choose contrasting colors

    One of the latest trends in web design is the use of high-resolution images as backgrounds. It is very important here that the text placed on top of such a background looks sufficiently contrasting. Clarity and ease of understanding is a very critical aspect of information conveyed through a website.

    This Photoshop tutorial will teach you five ways to optimize contrast when placing text over images.

    1. Color overlay
    The text in the image below is very difficult to make out, and this is due to the complex, heterogeneous background. The background contains a significant amount of detail, especially in the menu area. Also, due to the specifics of the background, the interesting texture of the “Buffalo Wings” font used is almost completely lost. It's clear that the contrast in this image needs some work.

    First of all, we need to create a new layer and call it “Color Overlay”. Next, take a color sample from the surface of the shirt shown below (press and hold the I key to do this), and using the Shift + F5 keyboard shortcut, fill the created layer with the selected color.

    Finally, reduce the Opacity of the filled color layer to 50%, and move it below the text layer.

    As you can see, the contrast has become noticeably better. In addition, the details and texture of the “Buffalo Wings” font have become clearer.

    2. Shadow
    Imagine a situation where a client wants you to place thin, elegant text on top of a highly detailed area of ​​a photo. This also happens sometimes, and you have to look for ways to achieve an acceptable contrast between the background and the text.

    In such cases, first of all, you need to choose the right text color.

    Obviously, a light color will look best. For example, white.

    The next step is to apply a layer style Shadow (Drop shadow). Reduce Opacity to 52%. Then set the Spread: 16% and Size: 10 pixels. The angle should be approximately -144 degrees.

    As you can see, applying a simple layer style has noticeably improved the contrast.

    3. Lini
    This is one of the easiest ways to improve contrast. Simply add two white lines below and above the inscription, thus visually separating the text and background.

    Added two lines...

    ...provide an improved perception of two design elements.

    4. Shading
    Another way to improve the perception of text by increasing contrast is to add a shaded figure under the text. To make it easier for you to understand what I’m talking about, I’ll show you with an example.

    In the example below, the inscription is almost impossible to read because it blends into the background. The separator between lines of text gets lost among the details of the building in the background.

    To improve the readability of text, select the Custom Shapes Tool, or simply press the U key. Select any shape you like. There are no rules or recommendations here.

    Fill the shape with black and give it a 3 px white stroke.

    Move the layer with the shape under the layers with the text and its separator, then reduce the Opacity of this layer to 57%.

    The result looks more professional and is perceived much better

    5. Blur the background
    The fifth and final way to improve contrast is to apply a subtle blur effect to the background.

    In the original image, the text is quite difficult to discern.

    Friends, let's talk about an equally important topic - the ease of using a computer, namely the clarity of the fonts displayed on the monitor.

    Many of us work at the computer all day long. And of course they know how tired the eyes are. But do many of us do special exercises every day to relax our eyes? I think not.

    Let's help our health at least a little and determine the necessary clarity of fonts.

    Microsoft has already thought about our eyes and is offering us its technology ClearType. This technology is designed specifically for LCD monitors and provides font smoothing, thereby improving readability. ClearType displays words on your monitor screen as crisp and clear as if they were printed on a piece of paper.

    Now let's adjust the clarity of the fonts

    • 1. Go to the menu “ Start”, then to the section “ Control Panel”, then select “ Design and personalization” (you can use windows search for other operating systems, see below)

    • 2. In the window that opens, find the section “ Fonts” and click on the link below “ Setting ClearType Text" A new window will open.

    On Windows 10 it will be located in the same section.

    • 3. Check the box “ Enable ClearType”, click on the button below “ Next" A new window will ask you to set the optimal screen resolution. After making the appropriate settings, press “ Next”.
    • 4. You will be asked to select the best option for displaying text in 4 examples. After making the appropriate settings, click the “Finish” button.

    Setting the font size

    If you feel that the font displayed in applications is too small, and you are constantly straining to read something on the screen, then you simply need to increase the default font size.

    To do this, go again to “ Control Panel” –> “Design and personalization” –> click on the item “ Fonts” –> then on the right side of the control window select “ Changing the font size” and select the most convenient option.

    And now we are happy with the result. Our eyes will definitely thank us now.

    The best way to grow your online business is to make your websites easy to read and enjoyable for your customers. Reducing the font size of colored texts makes them very difficult to read, especially against a colored background, as does overlapping lines. But all this is easy to fix! Let's look at five simple ways to make your website easy to read and easy to understand:

    1. Format your text in CSS

    Cascading style sheets are the best way to achieve beautiful and readable text. Use a consistent style and always check how it will display in an Internet browser. Change the style and your site will be transformed! CSS makes life easier.

    1. Make the font size large enough to be easy to read.

    Focus on your potential clients! It's a bad idea to use a very small font, even if your site's main visitors are teenage girls looking for new shoes. This doesn't mean you have to write in huge letters, but a fairly large font is always better than a small font. Verdana 12 points is always better than Verdana 8 points.

    1. Make the font contrast with the background.

    The more contrast, the better. Black on white and white on black are the highest contrast patterns you can and, most often, should use. Use colors you like, but if you look sideways at the page and your text basically disappears, it doesn't have enough contrast.

    1. Separate lines with large spaces to allow them to breathe.

    Do not fence lines one on top of another. Use custom CSS line spacing or simply leave more space between them. Personally, I often set my line spacing to 140% of a typical line height.

    1. Break your text into paragraphs

    It doesn't matter how well you write, people don't want to read endless pages of text. Often use headings that reflect the meaning of paragraphs. By skimming over them, a person can quickly determine whether the text is interesting to him or go straight to the part of the text that interests him. Also use bulleted lists to organize the structure of your material and make it easier to understand.

    And finally (this goes beyond 5 easy ways to make your website readable, but it's very important) check your spelling! Nothing is more annoying when reading web pages than multiple errors. Any, even the most ingenious, content of the text will be ruined if there are many spelling errors in it! Be sure to use the spell checking tools available in each program.

    Making your website materials convenient and easy to read is easy! It doesn't take much time and is mostly based on common sense. The reward will be an effective website that allows customers to receive your message in the most complete form and, as a result, trust you and your business.

    A quote or headline over a photo. Today this is a trend that we see everywhere: on Instagram, on magazine covers, on the first windows of landing pages. But when trying to design a picture in this way, you could encounter a problem with the readability of the text. Below are 7 very simple ways to make photo text easy to read. Their Although this article is about typography, it useless for designers (they know all this without us), but useful for content managers and SMM specialists.

    1. Use the photo space

    Select a photo with sufficiently large fragments of a uniform background. In a landscape, you can place the text against the sky. The photo is from an urban fashion photo shoot - against the backdrop of a brick wall.

    2. Place the text on the background

    This technique not only solves the problem of text readability, but also controls the viewer’s attention. Use a contrasting font to improve readability. The backing most often comes in the form of a geometric figure, plain or translucent. You can use a line-by-line background, for example, simulating text highlighted with a marker.


    3. Try a blurry image

    A charming way in its simplicity. By blurring the background image (or part of it), you immediately bring the title into focus. This, of course, does not free you from the need to find a contrasting color for the font, but it makes the task of readability much easier.

    4. Choose contrasting colors

    You may not need any special effects if the color of your font and the palette of the image have enough contrast.


    5. Darkened background

    You can increase the contrast, and with it the readability of the text, by lowering the saturation of the image. A black layer with 30-40% transparency superimposed on top of the photo will give the desired effect.

    6.Color filter

    By the same principle, you can use color filters



    7. Make the font giant

    Large elements have great visual weight, so if we were unable to achieve the contrast of color and depth, we will “play with fonts”.

    Read more: