Improving Font Pairing in LSX Design

[ashleyshaw]

Improving Font Pairing in LSX Design

Introduction:

Typography plays a crucial role in a website's design and overall user experience. Currently, LSX Design offers a selection of fonts, but the pairing of fonts could be improved to enhance readability and aesthetic consistency across various layouts. By implementing better font pairing, we can give users more visually cohesive options and improve customization capabilities.

Problem/Opportunity:

LSX Design offers fonts, but the current font pairings are somewhat limited and may not always provide the best combinations for specific use cases. Users are seeking more flexibility in choosing fonts that harmonize well together. Additionally, not all font combinations offer optimal readability, particularly in sections like headings, body text, and CTAs.

Proposed Solution:

We propose updating LSX Design with a pre-defined set of well-curated font pairings that work harmoniously across different sections of the site, such as headings, body text, and buttons. These pairings can be based on typography best practices, ensuring consistency and readability. The following steps will be part of the solution:

1. Curate Font Pairings: Research and select a combination of serif, sans-serif, and decorative fonts that pair well together. The curated pairings will cover different styles, such as modern, classic, and minimalist themes.

2. Add Font Pairing Presets: Implement font pairing presets that users can select in the global styles or customize within the block editor. These presets would be available alongside existing typography settings.

3. Test for Readability: Ensure that all font pairings provide high readability across different screen sizes and contrast levels, following accessibility guidelines.

Alternatives Considered:

An alternative approach would be to allow users to manually pair fonts, but this can lead to inconsistent design choices and poor readability. Providing curated presets ensures a higher level of design integrity while giving users a starting point for customization.

Challenges:

• Ensuring compatibility with various font families and weights.
• Testing font pairings across different screen sizes to ensure optimal legibility.
• Keeping performance in mind when adding more font options to avoid increasing page load times.

Call for Feedback:

What are your thoughts on offering curated font pairings in LSX Design? Do you have specific font pairings that you have found effective in your projects? Feedback on preferred combinations or specific challenges you've faced with typography would be appreciated.

Next Steps:

Once feedback is gathered, we will proceed by curating a set of font pairings and integrating them into LSX Design’s global styles. A prototype of the font pairing presets will be shared for review and further testing.

• @ZaredRogers test out font pairings in Figma and them we speak again.
  An Idea would be to have a couple of pairing per website style, here are a few options:

1. Fun/Playful Websites

Fonts:

Heading: Pacifico (a casual, hand-drawn typeface that feels fun and inviting)
Body: Quicksand (a modern sans-serif with rounded edges, complementing the playful vibe)
Alternative Pairing:

Heading: Baloo 2 (a bold, rounded font that's friendly and easy to read)
Body: Poppins (a versatile sans-serif with geometric shapes to balance the fun feel)

2. Business/Corporate Websites

Fonts:

Heading: Montserrat (a clean, professional sans-serif that exudes trust and authority)
Body: Roboto (a neutral, modern font that's highly readable and suits corporate environments)
Alternative Pairing:

Heading: Lora (a serif font with a modern touch, perfect for formal business tones)
Body: Open Sans (a popular sans-serif with great legibility, offering a professional look)

3. E-commerce/Shop Websites

Fonts:

Heading: Playfair Display (an elegant serif with high contrast, ideal for creating a luxurious feel)
Body: Lato (a clean sans-serif that balances the more ornate headings with simplicity)
Alternative Pairing:

Heading: Raleway (a sleek sans-serif with thin lines that feels modern and fashionable)
Body: Roboto Slab (a geometric serif that provides contrast and makes product descriptions stand out)

4. Serious/News or Magazine Websites

Fonts:

Heading: Merriweather (a serif font designed for legibility in long-form reading, creating a serious tone)
Body: Roboto (a versatile sans-serif, great for text-heavy content and user readability)
Alternative Pairing:

Heading: Libre Baskerville (a classic serif font with a modern twist, perfect for editorial content)
Body: Source Sans Pro (an excellent sans-serif for body text, offering a professional, readable flow)

5. Creative/Portfolio Websites

Fonts:

Heading: Oswald (a bold, condensed sans-serif, adding creativity and impact to titles)
Body: Karla (a quirky sans-serif, perfect for creative portfolios that need personality)
Alternative Pairing:

Heading: Abril Fatface (a display font with dramatic contrast, great for making a bold statement)
Body: Nunito (a well-rounded sans-serif that pairs nicely with bold, artistic fonts)

6. Minimalist Websites

Fonts:

Heading: Josefin Sans (a geometric sans-serif with a vintage feel, perfect for minimalist designs)
Body: Crimson Text (a classical serif font, bringing elegance and simplicity to text-heavy pages)
Alternative Pairing:

Heading: Bebas Neue (a bold sans-serif with sharp, clean lines that work well in minimalist settings)
Body: Muli (a sans-serif that is both neutral and minimal, allowing for a clean design)

Figma Resources

• LSX Style Guide
• Raleway Pairings
• Open Sans Pairings
• Lato Pairings
• Lora Pairings
• Ubuntu Pairings
• Josefin Sans Pairings
• Nunito Pairings
• Montserrat Pairings