登录查看更多内容

How do you balance aesthetics and functionality when selecting fonts and colors for RWD?

由人工智能和领英社区提供技术支持

Fonts and colors are essential elements of web design that affect the mood, readability, and accessibility of your website. But how do you choose the right ones for your responsive web design (RWD) project? RWD is a design approach that adapts the layout and content of your website to different screen sizes and devices. In this article, you will learn some tips and best practices to balance aesthetics and functionality when selecting fonts and colors for RWD.

此文章中的业界达人

由社区从 7 条内容中精选。了解更多

Sue Jenkins, MFA
Chris Armstrong

Design/Founder @ Niice

1 Know your audience and purpose

Before you start picking fonts and colors, you need to have a clear idea of who your target audience is and what your website's purpose and message are. Different fonts and colors can evoke different emotions, associations, and expectations in your visitors. For example, a playful font and a bright color scheme might work well for a children's website, but not for a professional or serious one. You also need to consider the cultural and contextual meanings of fonts and colors, as they can vary across regions and industries.

添加您的观点

加载更多内容

2 Choose fonts that are legible and scalable

One of the main challenges of RWD is to ensure that your text is legible and readable on different screen sizes and resolutions. You want to avoid fonts that are too small, too thin, too ornate, or too similar to the background color. You also want to avoid fonts that have too many variations or styles, as they can make your website look inconsistent or cluttered. Instead, opt for fonts that are simple, clean, and versatile, and that can scale well without losing quality or clarity. You can use tools like Google Fonts or Adobe Fonts to find and test fonts that are web-friendly and responsive.

添加您的观点

Sue Jenkins, MFA
(已编辑)
举报内容
Consider pairing a sans-serif typeface with a serif or readable display type for added personality and interest. In general, stick with one typeface for titles, one for text, and one for accents throughout to create a sense of unity and harmony. Despite what some might say, it's ok to use serif typefaces for body text, so long as its set in a readable size and color. To add contrast to your type, consider playing with color, scale, letter case, and style.

已翻译

赞
Chris Armstrong

Design/Founder @ Niice
举报内容
Using a variable font can allow you more versatility. For example, if you find the type gets a little illegible at smaller sizes, you can bump the weight up to 450 or 475, or whatever number optically matches larger text around it.

已翻译

赞
Chris Armstrong

Design/Founder @ Niice
举报内容
In general it’s better to create responsive layouts from the type outwards. Start by choosing your main body typeface, then define your layout using units that directly reference the font metrics (like ch and ex*). For example, instead of giving a text block a width of 600px, giving it a width of 70ch will ensure it always has a readable line length of around 70 characters per line. This helps you to create a layout that is always a perfect fit for your type choices, rather than feeling like your text is squeezed into an ill-fitting suit. If you want to bump your font size up on larger canvas sizes, the layout will naturally grow along with it! *em units don’t reference the typeface, they relate to the box the typeface is rendered inside

已翻译

赞

3 Use colors that are contrastive and harmonious

Another important aspect of RWD is to use colors that are contrastive and harmonious. Contrast is the difference in brightness and hue between two colors, and it affects the visibility and readability of your text and images. You want to use colors that have enough contrast to make your text stand out from the background, but not too much that it hurts the eyes or distracts from the content. You can use tools like WebAIM or Contrast Checker to check the contrast ratio of your colors and ensure that they meet the accessibility standards. Harmony is the balance and compatibility between two or more colors, and it affects the mood and appeal of your website. You want to use colors that complement each other and create a coherent and consistent look and feel. You can use tools like Adobe Color or Coolors to find and generate color palettes that are harmonious and suitable for your website's theme and tone.

添加您的观点

Michael Mahrt

Accessibility Software Developer
举报内容
According to the World Health Organization (WHO), approximately 2.2 billion people globally have a vision impairment or blindness, and this number is expected to increase. Therefore, ensuring that websites and digital content are accessible to everyone, regardless of their abilities, is crucial. Color contrast is especially important for readability and distinguishing important information. Meeting accessibility standards for color contrast improves inclusivity and provides a better user experience for everyone. Non-compliance could result in legal consequences and damage to a brand's reputation.

已翻译

赞

4 Limit the number of fonts and colors

A common mistake that many web designers make is to use too many fonts and colors on their website, thinking that it will make it more attractive or interesting. However, this can have the opposite effect, as it can make your website look messy, confusing, or unprofessional. A good rule of thumb is to limit the number of fonts and colors you use on your website to avoid visual overload and maintain a clear hierarchy and structure. A typical website can use two or three fonts: one for the headings, one for the body text, and one for the accents or highlights. Similarly, a typical website can use three or four colors: one for the background, one for the primary color, one for the secondary color, and one for the accent or call-to-action color.

添加您的观点

Drew Lettner

Experience Design Leader ? Curator of Solutions ? Wisecracker
举报内容
Avoid using serif fonts for body copy, which may prove difficult to read on digital devices. When choosing a color palette, try to stick with hex values or contrast values versus naming the colors with cutesy brand terms.

已翻译

赞

5 Test and adjust your fonts and colors

The final step in selecting fonts and colors for RWD is to test and adjust them on different devices and browsers. You want to make sure that your fonts and colors look good and work well on various screen sizes, resolutions, orientations, and platforms. You also want to check how your fonts and colors affect the performance and loading speed of your website, as some fonts and colors can be heavier or slower than others. You can use tools like BrowserStack or Responsinator to test and preview your website on different devices and browsers. You can also use tools like Google PageSpeed Insights or GTmetrix to measure and optimize your website's speed and performance.

添加您的观点

Cristoforo C.
举报内容
There are many tools out there to ensure fonts and coloring are readable to as wide an audience as possible on any browser and device. Use multiple tools as they measure accessibility differently. Worth noting while a large number of users do use Chrome (on desktop and mobile), many are stepping away from Google due to privacy concerns. Wouldn't hurt to ensure everything displays as it should on all major browsers. Final note on performance, I recommend to everyone with a website to embed your web font directly into your CSS. Google has been fined heavily for GDPR privacy violations in Europe for their web fonts. This removes risk to you and that's one less server call your website makes, meaning, it will help improve performance and SEO.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Responsive Web Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you balance aesthetics and functionality when selecting fonts and colors for RWD?

1

2

3

4

5

6

1 Know your audience and purpose

2 Choose fonts that are legible and scalable

3 Use colors that are contrastive and harmonious

4 Limit the number of fonts and colors

5 Test and adjust your fonts and colors

6 Here’s what else to consider

Responsive Web Design

给文章评分

感谢您的反馈

更多Responsive Web Design相关文章