Best of Typography — 2024

  1. 1
    Article
    Avatar of uxplanetUX Planet·2y

    The Only 8 Fonts You Will Ever Need

    Typography has evolved significantly, offering an extensive array of typefaces. Despite the abundance, eight fonts have stood out for their unique characteristics: Garamond, Bodoni, Baskerville, Times New Roman, Century Expanded, Futura, Helvetica, and Inter. Each font brings its own historical significance and design ethos, from classics like Garamond and Baskerville that improve readability, to modern fonts like Inter designed for digital interfaces. These fonts are essential tools for any designer, adaptable to various projects from traditional print to contemporary digital design.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    7 Practical Tips for Cheating at Design

    Improve your designs with practical tips that don't require a background in graphic design. Use color and weight to create hierarchy, avoid using grey text on colored backgrounds, offset shadows, use fewer borders, avoid blowing up small icons, add accent borders for visual flair, and consider hierarchy when designing buttons.

  3. 3
    Article
    Avatar of bootcampuxdesignBootcamp·2y

    Understanding the ‘Why’ behind some basic UI design practices

    Understanding fundamental UI design practices helps in creating visually appealing and user-friendly interfaces. Key practices like maintaining consistent padding, using multiples of 8 or 4 for spacing, avoiding decimals, keeping line height to auto, and using a 24px frame for icons enhance design consistency and functionality. Ghost buttons serve as secondary call-to-action elements enhancing visual hierarchy.

  4. 4
    Article
    Avatar of logrocketLogRocket·2y

    Types of fonts and when to use them

    Understanding typography is crucial for creating clean, high-quality websites. Typography affects visual hierarchy, readability, and user experience. Different font types like serif, sans-serif, script, and display serve various purposes and convey different moods. Key considerations include accessibility, font contrast, and pairing techniques. Tools like Fontshare, Fontjoy, and WhatFont can help in selecting and combining fonts effectively.

  5. 5
    Video
    Avatar of kevinpowellKevin Powell·2y

    Improve your reset with these modern CSS additions

    Discover three modern CSS additions to enhance your CSS reset. Learn about the text-wrap balance to improve heading appearance, setting max width on text elements to ensure readability, and utilizing container queries for better responsive design. These tips aim to make your web typography and layout more visually appealing and easier to manage.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    TailwindCSS Ignore Typography

    TailwindCSS has a typography plugin that can stylize content using the `.prose` class, but it also provides a way to override this styling by applying the `.not-prose` class. More information about this feature can be found in the official PR of TailwindCSS Typography.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Fontsource

    Fontsource provides a collection of loaded fonts for web design, including examples such as Roboto, Open Sans, Poppins, and more.

  8. 8
    Video
    Avatar of kevinpowellKevin Powell·2y

    Please, don’t use viewport units for font sizes

    Using viewport units for font sizes might seem like a good idea for responsive text, but it can lead to significant issues such as excessively small or large text and failures in accessibility criteria. Instead, using the CSS clamp function offers a more effective solution, allowing text to grow and shrink appropriately within defined limits. Tools like utopia.fyi can help set appropriate font sizes and scales for flexible, responsive typography.

  9. 9
    Article
    Avatar of webdevbeehiivWeb Developer·2y

    CSS Typography Properties You Might Not Know About

    CSS provides powerful typography tools to improve web design. Discover properties like `font-variant` for font styles, `initial-letter` for stylizing the first letter of paragraphs, and `font-variant-numeric` for formatting numbers. These can enhance the visual appeal and readability of your sites.

  10. 10
    Article
    Avatar of lobstersLobsters·2y

    The Monospace Web

    Explore a minimalist design concept using monospace fonts for web development. The author experiments with a responsive monospace grid for aligning text and drawing diagrams, leveraging Markdown and CSS, along with a bit of JavaScript. The design is reminiscent of terminals and offers various elements such as lists, tables, and media objects, all fitting into the monospace aesthetic.

  11. 11
    Article
    Avatar of codropsCodrops·2y

    Some On-Scroll Text Highlight Animations

    Explore some on-scroll text highlight effects that are inspired by Dribbble shots and videos. The effects can be optimized for one word only and achieved using GSAP Flip.

  12. 12
    Article
    Avatar of figmaFigma·2y

    How to Build Your Design System

    Learn how to build a design system tailored to your goals and challenges. A design system ensures consistency, speeds up workflows, and allows teams to focus on solving user problems.

  13. 13
    Article
    Avatar of svelteSvelte Blog·2y

    The Omnisite

    The launch of Svelte 5 and the new sv CLI comes with a redesigned, unified website under the svelte.dev domain. This consolidation resolves issues such as inconsistent navigation, broken links, and isolated preferences across different sites. The updated site features a calm, cohesive layout, with a simplified color palette, improved button styles, and a new typographic approach using serif fonts to enhance readability and distinctiveness. The site is now open source, inviting community contributions.

  14. 14
    Video
    Avatar of wdsWeb Dev Simplified·2y

    This Tailwind Plugin Makes Your Text Look Beautiful

    Tailwind CSS removes all default styling, which can be problematic for rendering text content like blogs with markdown. The Tailwind CSS Typography extension resolves this by providing easy-to-apply styling through the 'prose' class. It offers out-of-the-box beautiful text styling and is highly customizable for text size, color, and elements.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Design Trends 2024 by Ronas IT

    AI-generated art, expressive typography, holographic design, minimalism and brutalism, and surrealism in 3D are the design trends for 2024 as discussed by Ronas IT.

  16. 16
    Video
    Avatar of kevinpowellKevin Powell·2y

    Don't use viewport units for font-size

    Using viewport units for font size in web design may seem advantageous for creating fluid typography, but it raises significant accessibility and resizing issues. Instead, employing the CSS clamp function offers a better solution, ensuring minimum, maximum, and dynamic growth for font sizes without compromising user preferences. Tools like Utopia can help generate appropriate CSS to handle various viewport and font sizes efficiently.

  17. 17
    Article
    Avatar of communityCommunity Picks·2y

    Web Style Guide

    Web Style Guide is a comprehensive book on web design written by Patrick J. Lynch and Sarah Horton. It covers topics such as strategy, research, process, information architecture, site structure, page structure, interface design, graphic design, typography, editorial style, images, and video.

  18. 18
    Article
    Avatar of lobstersLobsters·2y

    Naming things

    Naming things accurately in programming is as hard as cache invalidation due to the complexity of language and context. Examples like how 'train' can mean different things in a train booking system or how 'glue' is used in TeX highlight the importance and challenge of choosing precise terms to avoid misunderstandings. Creating unique terms, as seen with the word 'stencil' in historical dictionaries, can sometimes resolve these ambiguities.

  19. 19
    Article
    Avatar of css_tricksCSS-Tricks·2y

    Letter Spacing is Broken and There’s Nothing We Can Do About It… Maybe

    Recent discussions within the CSS Working Group revealed a significant issue with how the 'letter-spacing' property is rendered across different browsers. Despite the CSS specification stating that spacing should be applied only between characters, browsers like Chrome, Firefox, and Safari implement it differently, causing inconsistencies and alignment problems, especially in multilingual text. Two proposed solutions include reworking the space distribution or giving developers control over spacing placement. Leaving the current implementation unchanged is also an option, though less likely.

  20. 20
    Article
    Avatar of hcHashiCorp·2y

    Introducing HashiCorp Sans

    HashiCorp Sans is a custom font designed to reflect the evolution of the brand. It replaces the previous fonts used by HashiCorp and features accentuated bridges and slabs, developer-inspired characteristics, sparkle in the letterforms, and humanist letterforms.

  21. 21
    Article
    Avatar of sitepointSitePoint·2y

    Creating Fluid Typography with the CSS clamp() Function — SitePoint

    Learn how to use the CSS clamp() function to implement fluid typography in your projects. Fluid typography allows for responsive font sizes across different device sizes, reducing CSS bloat and improving user experience. The clamp() function takes a minimum value, a preferred value, and a maximum value to control the font size.

  22. 22
    Article
    Avatar of zedZed·2y

    Zed Decoded: Text Coordinate Systems

    The post explores various text coordinate systems used in the Zed text editor, including Points, Offsets, DisplayPoints, and Anchors. It explains each system's purpose and nuances, such as how Points are zero-indexed positions in a text buffer, Offsets represent a position as a single count of characters, and DisplayPoints account for visible text formatting like soft-wrapping and folding. Anchors are unique in their use for maintaining positional consistency even as the document is edited, crucial for collaborative environments.

  23. 23
    Article
    Avatar of frontendmastersFrontend Masters·2y

    Modern Font Stacks

    An appreciation for Dan Klammer's Modern Font Stacks project and the ability to use system fonts instead of custom ones. Highlighting the Geometric Humanist stack and how it renders across different operating systems.

  24. 24
    Article
    Avatar of lobstersLobsters·2y

    githubnext/monaspace: An innovative superfamily of fonts for code

    Monaspace is a monospaced type superfamily with distinct variable axis typefaces and coding ligatures. It offers font installation instructions for macOS, Windows, and Linux. The post also explains how to set the font family and enable texture healing and coding ligatures in VS Code.

  25. 25
    Article
    Avatar of communityCommunity Picks·2y

    Martian Grotesk at Evil Martians

    Martian Grotesk is a typeface with a strong personality that is perfect for web and mobile developers. It has a unique aesthetic and is designed to address the problem of uneven metrics. It is ideal for web development due to its even spacing and legibility. Available for purchase on MyFonts.

See all Typography archives