Art Styles in Graphic Design

Creating a living, breathing brand, built entirely through typography. Designed by FutureBrand São Paulo, this is far from a conventional rebrand. It’s a powerful example of what culturally grounded, locally driven, and sustainable branding can look like when done right. The Amazon rainforest holds the largest concentration of trees on Earth, over 390 billion, interconnected by one of the world’s longest river systems, spanning nine states and supporting more than 28 million people. Rather than simply represent this scale, the identity translates it. Using real geographic coordinates from the Amazon River and its tributaries, the designers studied satellite imagery to uncover letterforms embedded within the landscape itself. The result: an alphabet shaped by nature, forming a logotype constructed from the actual curves of the basin’s 25,000 kilometers of navigable waterways. But the system doesn’t stop at a static mark. The identity evolves into a living typographic tool, an interactive platform where users can generate their own compositions, extending the brand through participation and artistic design. “More than a visual representation, the brand is a living identity, creating a seal for Amazonian products while fostering the local economy and celebrating everything produced across the nine Amazonian states.” "Created by people, written by rivers" this stands as one of the most compelling intersections of branding, typography, and place making I've seen so far. Link to the site: https://lnkd.in/e8-79NtA #branding #typography #type #design #Sustainability #logotype #identity #logo #Amazonforest #nature #tourism #cultureidentity #Brazil #Rivers #graphicdesign

Responsive font sizing used to be a headache. Now it’s one line. If you’re not using it, you’re doing too much. If you’re still doing: @media (max-width: 768px) {  h1 {   font-size: 2.5rem;  } } @media (min-width: 769px) {  h1 {   font-size: 4rem;  } } There’s a better way. This one line replaces all that: font-size: clamp(2.5rem, 6vw, 4rem); - 2.5rem: the minimum font size - 6vw: scales with viewport width - 4rem: the maximum font size It gives you fluid typography with hard boundaries: no more jumpy breakpoints, no more testing on every screen width manually. Modern CSS isn’t about hacks or helpers anymore. It’s about writing one line that does the job of ten. If you still think CSS is "just styling," you’re missing out on how powerful it’s become.

Still using just px, %, or em? CSS has a whole toolbox of units you might not be using yet. These lesser-known units can help you write more responsive, elegant, and typographically-aware styles without extra hacks. Here are a few worth knowing: - ch: Measures the width of the “0” character in the current font. Useful for setting text widths based on character count.     - lh: Equal to the element’s line-height.    Perfect for vertical spacing that scales with your text.     - cap: Based on the height of capital letters. Great for aligning UI elements with uppercase headings.     - ex: Height of the lowercase “x”. Can be unreliable across fonts, but helpful for fine-tuning text alignment.     - cqi: Scales with a container’s inline size. Makes container-based responsiveness much more intuitive.     - vmin / vmax: Relative to the smallest or largest side of the viewport. Ideal for fluid layouts that scale proportionally on all screen sizes.     Individually, these units solve small layout problems. Together, they help you build cleaner, more adaptable interfaces. Which ones are new to you? *** I’m working on an ebook called “You Don’t Need JavaScript”. To get notified when it launches 👉 https://lnkd.in/eytryeaj

Responsive font without media queries: Meet clamp()—Your New Best Friend for Responsive Typography 🎉 No more writing multiple media queries just to make your font sizes adapt across devices. Instead, use the clamp() function to handle it all in one line! How Does clamp() Work? clamp() takes three values: 1️⃣ Minimum size (the smallest font size). 2️⃣ Preferred size (based on the viewport width). 3️⃣ Maximum size (the largest font size). Example: h1 {   font-size: clamp(1.5rem, 2.5vw, 3rem);  } What it does:    The font will never go below 1.5rem.    It will grow dynamically based on the viewport width (2.5vw).    It won’t exceed 3rem, no matter how large the screen gets. Why Use clamp()? ✅ Cleaner code: No extra media queries! ✅ Perfect control: Maintain readability across devices. ✅ Super versatile: Use it for margins, paddings, or even widths! Pro Tip: Test different combinations of values to find the perfect balance for your designs. 🚀 Would you give clamp() a try? Let us know your thoughts below! 👇

Writing Better CSS! Here’s How Modern CSS enables us to write less code while enhancing our layouts' robustness and accessibility. Here’s a breakdown of these upgrades: CSS Variable Fallbacks: By adding a fallback value like var(--color-text, black), your text remains visible and styled even if the custom property fails to load or isn't defined yet. Fluid Widths Without Media Queries: Hardcoding width: 300px can lead to horizontal scrollbars on smaller screens. Using width: min(300px, 100%) allows the element to maintain a maximum width of 300px while shrinking fluidly on smaller screens. Accessible Pseudo-Elements: Icons or symbols added via CSS content are invisible to screen readers. Adding a "Alt text" after your content provides built-in alt text. Responsive Typography : The font-size: clamp() function allows your text to scale dynamically between a minimum and maximum size based on the viewport width, ensuring it's responsive and readable everywhere. Smarter Grid Packing: If you have awkward empty spaces in your CSS Grid, grid-auto-flow: dense; instructs the browser to look for smaller items and fill those gaps, keeping your layout perfectly packed. #css #webdevelopment #Front #CodingTips #cssvariables #WebAccessibility #cleancode #moderncss

Maintaining typographic consistency across various screen sizes presents a significant challenge in design. Traditional methods often rely on static font size ratios, making it difficult to accommodate client feedback without compromising overall design harmony. To address this, I have developed a streamlined workflow that leverages the power of data-driven design. By calculating precise font size ratios in Google Sheets and integrating them into a Figma design system using the Sheet to Variable plugin (https://lnkd.in/gbufduSD), I have achieved dynamic typography that adapts seamlessly to different screen sizes. This approach ensures typographic consistency and empowers designers with granular control over font sizes, facilitating efficient design iterations and client collaboration. Resource: 📦 Exploring Responsive Type Scales - https://lnkd.in/gCYfHdrx) 📦 How to Make Spacing Feel "Perfect" - https://lnkd.in/geexXY2P 📦 Some typography variables advice by luis - https://lnkd.in/gQRQmQwX --- PS: In my next post, I will delve into how I built a Design System centered around the concept of coherence. This approach focuses on creating a seamless integration between existing and new design elements, ensuring overall harmony. In essence, it's about developing design systems that are both adaptable and cohesive. #designsystem #typography #variable #designtoken #googlesheet #typescale #typescaleratio #typeratio

Most developers are still overcomplicating responsive typography. Here's a simpler approach. Instead of writing multiple media queries just to resize text across different screen sizes, use CSS clamp(). It lets your typography scale smoothly with a single line of code, making your stylesheets cleaner, easier to maintain, and more responsive. font-size: clamp(1.5rem, 2vw + 1rem, 3rem); Why use clamp()? - Less code to maintain - Smooth scaling across screen sizes - Fewer media queries - Better readability and consistency Small CSS improvements like this can have a big impact on the quality and maintainability of your frontend projects. What CSS trick has saved you the most time recently? Share it in the comments.

💡 𝐂𝐒𝐒 𝐓𝐢𝐩𝐬 𝐟𝐨𝐫 𝐁𝐞𝐭𝐭𝐞𝐫 𝐑𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞 𝐃𝐞𝐬𝐢𝐠𝐧𝐬 ⁣💡 ⁣ In the world of responsive web design 🌐, small decisions can have a big impact. One common mistake I see is using pixels (`px`) for properties like font sizes, margins, or paddings. Here’s why that can be problematic and how to improve your CSS game! ⁣ ⁣ ⚠️ 𝐀𝐯𝐨𝐢𝐝 𝐓𝐡𝐢𝐬:⁣ Using `px` for responsive designs, like this: ⁣ font-size: 16px; /* Fixed size */⁣ ⁣ 🤔 Why? ⁣ - Pixels are rigid and don’t scale well across devices. ⁣ - They don’t adapt to user preferences (e.g., browser font scaling). ⁣ ⁣ ✅ 𝐃𝐨 𝐓𝐡𝐢𝐬 𝐈𝐧𝐬𝐭𝐞𝐚𝐝: ⁣ Use `em`, `rem`, or `%` for scalable, flexible designs: ⁣ font-size: 1rem; /* Based on root font size */ ⁣ ⁣ 🧩 𝐖𝐡𝐲 `𝐫𝐞𝐦` 𝐚𝐧𝐝 `𝐞𝐦` 𝐀𝐫𝐞 𝐁𝐞𝐭𝐭𝐞𝐫⁣ 1️⃣ `rem` (Root EM): Scales relative to the root element (default font size). ⁣   - Great for consistent scaling across your site. ⁣   - Example: ⁣    font-size: 1rem; /* Equals 16px if the root font size is 16px */⁣ ⁣ 2️⃣ `em`: Scales relative to the parent element’s font size. ⁣   - Useful for nested scaling. ⁣   - Example: ⁣    font-size: 1.5em; /* 1.5 times the parent font size */⁣ ⁣ 3️⃣ Percentages (`%`): Flexible for layouts like widths or paddings. ⁣   - Example: ⁣    width: 50%; /* Half of the parent element’s width */⁣ ⁣ 🌟 𝐁𝐨𝐧𝐮𝐬 𝐓𝐢𝐩: 𝐂𝐨𝐦𝐛𝐢𝐧𝐞 𝐟𝐨𝐫 𝐌𝐚𝐱𝐢𝐦𝐮𝐦 𝐅𝐥𝐞𝐱𝐢𝐛𝐢𝐥𝐢𝐭𝐲! ⁣ - Use `rem` for global font sizes to ensure consistency. ⁣ - Use `em` for nested elements or components to allow proportional scaling. ⁣ ⁣ 🚀 𝐊𝐞𝐲 𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲 ⁣ Responsive designs aren’t just about media queries 📱 — they’re about scalable units that adapt seamlessly. Make your CSS future-proof by avoiding rigid units like `px` and embracing scalable ones like `rem`, `em`, or `%`. ⁣ ⁣ 💬 What’s your go-to CSS unit for responsive designs? Let me know in the comments below! 👇 ⁣ ⁣ #CSS #ResponsiveDesign #WebDevelopment #FrontendTips #Networking #LearnCSS #LinkedIn #LinkedInPost #LinkedInComment #Like #Repost #Responsive #Design #UX #UI #Developer #CSSTips #CSS3 #Connections

Let’s talk about font sizing and accessibility - px vs. rem. When it comes to typography on the web, how you size your text matters just as much as how it looks. Here’s why 👇 ✨ Relative font sizes = accessibility-friendly design. Using relative units like rem or em allows users to scale text according to their personal browser settings - essential for people with low vision or reading disabilities. When you use px (pixels), you’re locking text sizes to a fixed value. That means if someone tries to enlarge your text from their browser or operating system… it may not change at all. Quick example: 16px = fixed text size (doesn’t scale) 1rem = relative to the browser’s default font size (usually 16px by default, but user-adjustable) If someone has increased their default browser text size to 20px, your 1rem text will respect that and grow - your 16px text will not. 💡 Best Practice Tips: ✅ Use rem for font sizes, spacing, and layout consistency. ✅ Set your base font size in your root (html { font-size: 100%; }). ✅ Test zoom behavior — make sure text scales up and stays readable. ✅ Pair flexible font sizing with relative line heights and container widths for true responsiveness. Accessible typography isn’t just about contrast and legibility — it’s about giving users control. 💬 Have you ever tested your website at 200% zoom or with custom browser font settings? Try it - it’s an eye-opener. 😉 #Accessibility #A11y #InclusiveDesign #WebDesign #Webflow #Typography #UXDesign #GracefulWebStudio #BloomWithGrace

Brand visual identity for SigmaAi by Unleash Studio The brief sounded simple: build us a visual identity. The real problem was different. SigmaAi had a genuine point of view: rigorous, anti-hype, intellectually demanding. But nothing about how they showed up communicated that. A founder landing on their site had no way to know they were dealing with something different. The brand was doing the opposite of its job. So we started with positioning, not pixels. Before a single logo sketch, we worked through the strategic territory: · Who is SigmaAI actually for, and more importantly, who is it not for? · What does an AI research firm look like when it refuses every category default? · What should a founder feel in the first 10 seconds of encountering this brand? The answers shaped everything. Colour: The palette was built to feel like nothing else in the AI space. Near black as the foundation. It sets a tone: serious, uncompromising, no softening edges. Warm parchment and burnt signal orange pull the brand into unexpected warmth. Cold mint as the precision accent. Deep teal as the bridge, grounding the palette, sitting between the warm and cool registers without resolving either. The result is a colour system that doesn't read as AI. It reads as considered. In a space of gradients and glows, that's exactly where SigmaAI needed to be. Typography: ditched the geometric sans-serif every AI brand defaults to. Used a serif for that editorial, slightly etched quality. The kind of type that belongs on a research journal, not a SaaS landing page. Voice: direct, dense, no softening. Built to filter, not to appeal to everyone, but to immediately resonate with the right founder. The result is a brand that earns attention without asking for it. For an early-stage company, that's exactly what brand has to do: it has to make the company look like it already knows where it's going, before it can prove it. If you're building something in the AI space and your brand isn't keeping up with your thinking, I'd like to hear about it. → http://ahmed-creatives.com #BrandIdentity #BrandStrategy #AIStartups #TechBranding #StartupBranding #Branding #LogoDesign #VisualIdentity #AIDesign #FreelanceDesigner #DesignThinking #B2BSaaS #LogoDesign