Web fonts help to add life into designs. They help enhance the typography and design of a site, offering more creative freedom and ensuring consistent text appearance.
Google Fonts is a great choice for web design because it offers a wide selection of high-quality, free, and open-source fonts that are easy to integrate into websites.
With fast loading speeds and global server distribution, it ensures optimal performance across devices and browsers.
Additionally, Google Fonts provides flexibility through variable fonts, allowing for dynamic styling, and all fonts are free to use, making it a cost-effective solution for both personal and commercial projects.
Barlow Regular
Barlow Semi Condensed
Exo 2
Changa
Martel
Montserrat
A web type clamp refers to a technique used in web design to control the scaling of text across different screen sizes, ensuring it remains legible and visually appealing. It typically involves the use of CSS clamp() function, which allows for dynamic resizing of font sizes based on the viewport’s width.
Font size and weight play a key role in establishing content hierarchy, especially for headlines and subheads. Generally speaking, bold, decorative, or more distinctive typestyles command attention and denote importance, but so can an ultra light typeface in the right setting.
The viewer’s eye is usually drawn to the largest-sized type first, then moves on to other elements. A well-designed composition will guide the reader to the headline and other important elements no matter where they are located.
Due to the amount of different fonts used on these projects, I decided to use the “clamp” system only for the general pages to avoid having too many Typography site settings.
H1 XXL clamp(2.1rem, 1.29902rem + 3.37255vw, 4.25rem)
H2 XL clamp(1.5rem, 0.94118rem + 2.35294vw, 3rem)
H3 L clamp(1.25rem, 0.82902rem + 1.77255vw, 2.38rem)
H4 M clamp(1.06rem, 0.78059rem + 1.17647vw, 1.81rem)
H5 S clamp(0.88rem, 0.69373rem + 0.78431vw, 1.38rem)
H6 XS clamp(0.75rem, 0.65686rem + 0.39216vw, 1rem)
Body clamp(1rem, 0.98137rem + 0.07843vw, 1.05rem)
Body XL clamp(1.1rem, 1.06275rem + 0.15686vw, 1.2rem)
Body L clamp(1rem, 0.96275rem + 0.15686vw, 1.1rem)
Body S clamp(0.8rem, 0.76275rem + 0.15686vw, 0.9rem)
Body XS clamp(0.7rem, 0.70000rem + 0.00000vw, 0.7rem)
Adjustment applied to a block of text or paragraph, to increase or decrease the average distance between letters.
Letter-spacing refers to a uniform adjustment to the spacing of a word or block of text affecting its density and texture. Kerning is a spacing adjustment of one or more specific pairs of adjacent characters that.
Tight letter spacing can make text feel compact, while wider spacing can give it a more open and airy feel. It’s important to balance letter spacing to ensure text is easy to read on various screen sizes and devices, helping to maintain an optimal user experience.
Download times: how fonts can make your site heavy.
Custom fonts can significantly enhance the look and feel of your web design, giving your site a unique style and improving brand identity.
However, using custom fonts on the web requires attention to compatibility, performance, and accessibility. Custom fonts can increase the load time of a webpage, especially if they are large files.
To minimize this problem, use modern font formats like .woff2 for better compression and faster loading, and optimize font files by removing unnecessary font weights and styles.
Consider loading fonts asynchronously or using preload to prioritize critical fonts (e.g., the ones used above the fold).
Huge thanks to the photographers from Unsplash for the wonderful images.
Luis “Escorial” Sanz
Creative Director, Art Director
Graphic Design, Print, Web, and Motion Graphics
