Ran Segall’s Post

Have you figured out the right way to use FONT SIZES on the WEB?   To talk about the type of font, I’d rather talk about the font size first. Then you’ll see more on typography. Choosing the right font size, line height, and line length—three crucial segments to make Web content easy to read. 𝗪𝗵𝗲𝗿𝗲 𝗰𝗮𝗻 𝘆𝗼𝘂 𝘀𝘁𝗮𝗿𝘁 𝘁𝗼 𝗳𝗶𝘅 𝗶𝘁 𝘂𝗽? ❌ Avoid centering text for long passages. ✅ Font size, line height, and line length are related. ✅ Longer lines need more line height, while shorter lines need less. ✅ Use a type scale for consistency in font sizes. ✅ Ideally, adjust line height based on column width. ✅ For desktop and mobile, a line height of 1.5 is good. 𝗙𝗼𝗿 𝗱𝗶𝘀𝗽𝗹𝗮𝘆 𝘁𝗲𝘅𝘁 (𝗹𝗶𝗸𝗲 𝗵𝗲𝗮𝗱𝗶𝗻𝗴𝘀): ✅ The default size is 40px/2.5em for <h1>. ✅ Increase the size of the desktop, but keep it reasonable. ✅ On mobile, use a smaller size to save space. 𝗙𝗼𝗿 𝗯𝗼𝗱𝘆 𝘁𝗲𝘅𝘁: ✅ Default size is 16px/1em, good for most cases. ✅ Increase size for desktop, but not too large. ✅ On mobile, stick to defaults or slightly smaller. 𝗙𝗼𝗿 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝘁𝗲𝘅𝘁 (𝗹𝗶𝗸𝗲 𝗰𝗮𝗽𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻): ✅ Default size is 12px/0.75em–14px/0.875em. ✅ Increase the size of the desktop, but keep it readable. ✅ Don't make text too small on mobile. And that gives you a head start on what to do and what to avoid. ✳️ Choosing the right typeface(s) and setting a type scale is important. ✳️ Use CSS clamp() for fluid typography based on container width. Still, at the end, there's no perfect formula, but these guidelines can help. When unsure, go for a larger font size. Save this one to refer to later. And if you are a reader, link to the full blog is in the comments. #fontsize #designertips #webdesign #productdesigner #productdesign

Have you thought about the concept behind some part of a design getting your absolute attention before the other parts 🤔. Its called 'hierarchy', this will lead us to the second element we will discuss. The term "hierarchy" in web design refers to the order of importance of the different elements on a page. - Visual hierarchy: This refers to the arrangement of elements on a page to guide the user's eye to the most important information first. The size, placement, and color of elements can create a visual hierarchy. - Content hierarchy: This refers to the order in which information is presented on a page, usually with the most important information at the top. Headings, subheadings, and body text can all be used to create a content hierarchy. HOW TO IMPLEMENT THE CONCEPT OF HIERACHY IN OUR DESIGNS - Use contrast: Contrasting colors or font sizes can help create visual hierarchy. A large heading in a bold font will stand out more than a small paragraph in a regular font. - Create a focal point: A focal point is an element that draws the eye first. This could be a large image or a call-to-action button. - Follow the "F" pattern: Users often scan pages in an "F" pattern, starting at the top left and moving down and across the page. - Use whitespace: Whitespace is the empty space between elements. It can help create visual hierarchy by emphasizing important elements and separating them from the rest of the page. - Use color selectively: Using color sparingly can make certain elements stand out more, such as a button or a call-to-action. - Use typography: Different typefaces and font sizes can also create hierarchy. For example, a large bold font can be used for headings, while a smaller font can be used for body text. #webdesign #webdevelopment

Say it Loud, Say it Proud, Say it in 3D: The Rise of Multidimensional Fonts in 2024 Move over, flat fonts. There's a new sheriff in town, and it's got depth, texture, and a whole lot of dimension. Yes, we're talking about multidimensional fonts, and they're poised to take the design world by storm in 2024. What are multidimensional fonts? Gone are the days of simple 2D letters. Multidimensional fonts are all about pushing the boundaries of typography, using 3D effects, gradients, textures, and even animation to create truly eye-catching designs. Why are they on the rise? There are a few reasons why multidimensional fonts are having their moment: They're attention-grabbing. In a world overflowing with visual content, multidimensional fonts stand out from the crowd. They're like little works of art that demand to be noticed. They're versatile. Multidimensional fonts can be used for everything from logos and branding to website design and social media graphics. They can add a touch of sophistication or a burst of fun, depending on how you use them. They're reflective of our times. Our world is becoming increasingly complex and nuanced, and multidimensional fonts are a way to reflect that complexity in our visual communication. The future of multidimensional fonts Multidimensional fonts are still in their early stages, but they have the potential to revolutionize the way we think about typography. As technology advances, we can expect to see even more creative and innovative ways to use these fonts. So keep an eye out for multidimensional fonts in 2024 and beyond. They're just getting started. #multidimensionalfonts #typographytrends #typography #graphicdesign.

How can #Typography makes me a better designer? The simple changes you can make to your typography can make your #app more Readable and Accessible. It's not about choosing a font that is suitable for your Industry, You've to consider many other elements : - #Readability : People should be able to easily read and understand the text on the screen, regardless of the size or device. Fonts with clear letterforms, good contrast, and proper spacing are essential for readability. - #Accessibility : The font choice should consider users with visual impairments. Fonts with high contrast and clear letterforms are more accessible. - #Scalability : The font should look good at different sizes, from small text in buttons to large headlines. This is especially important for responsive design, where the UI needs to adapt to different screen sizes. - #Contextual design : Different parts of the #UI may require different fonts. For example, you might use a sans-serif font for body text and a serif font for headings. Here's some tips for you : - Start with a limited number of fonts: Two or three fonts are usually enough for most UI designs. Using too many fonts can make the design look cluttered. - Test your fonts on different devices: Make sure the fonts look good on both desktops and mobile devices. - Consider using a web font service: This can make it easier to use custom fonts on your website I hope you found this helpful guys

Fonts are something most of us barely notice. Till they change. And, what we know as fonts are not really fonts... I was reading an article in the New York Times (ungated link in comment) about Microsoft Word changing Calibri, its default font for over 15 years, to Aptos, formerly called Bierstadt. As someone who has been endured by many talented designers to whom I've simply said "that font doesn't feel right, and I don't know why", I feel it when a font feels wrong. But, I have no clue why In an effort to educate myself, I read the article (link below), and was fascinated about how much goes into a font, and how one font is more playful than the other. And how this simple change in font by Microsoft triggered a variety of responses: for, and against. The font on the left is Calibri, and on the right is Aptos. Which one feels more fun? My biggest learning was that fonts are not fonts (I quote verbatim): Technically Aptos and Calibri are typefaces, while a “font” refers to a particular face or size, like italics or boldface. But in practice, “font” is often used as a synonym for “typeface.” PS: thank you Amrinder, Sachin, Akshay from my tech days, and many colleagues from my advertising life for your patience. #design #typography

Have you thought about the concept behind some part of a design getting your absolute attention before the other parts 🤔. Its called 'hierarchy', this will lead us to the second element we will discuss. The term "hierarchy" in web design refers to the order of importance of the different elements on a page. - Visual hierarchy: This refers to the arrangement of elements on a page to guide the user's eye to the most important information first. The size, placement, and color of elements can create a visual hierarchy. - Content hierarchy: This refers to the order in which information is presented on a page, usually with the most important information at the top. Headings, subheadings, and body text can all be used to create a content hierarchy. HOW TO IMPLEMENT THE CONCEPT OF HIERACHY IN OUR DESIGNS - Use contrast: Contrasting colors or font sizes can help create visual hierarchy. A large heading in a bold font will stand out more than a small paragraph in a regular font. - Create a focal point: A focal point is an element that draws the eye first. This could be a large image or a call-to-action button. - Follow the "F" pattern: Users often scan pages in an "F" pattern, starting at the top left and moving down and across the page. - Use whitespace: Whitespace is the empty space between elements. It can help create visual hierarchy by emphasizing important elements and separating them from the rest of the page. - Use color selectively: Using color sparingly can make certain elements stand out more, such as a button or a call-to-action. - Use typography: Different typefaces and font sizes can also create hierarchy. For example, a large bold font can be used for headings, while a smaller font can be used for body text. The picture below explains the concept of hierachy as explained above (though not all) #webdesign #webdevelopment

The psychology of lettering fonts: There are more styles of lettering (fonts) available than you can shake a stick at. Fonts that could evoke feelings of joy, or happiness, or terror, or melancholy. Have you ever thought what the steps were in designing a logo or ad campaign? Imagine the starbucks logo used a Pepper font, or if the Fedex logo used Geo Slab font? Someone thought long and hard of which font was the best to evoke a feeling and portray a message to the public for those logos. There are literally thousands of lettering styles out there. Choosing the right one is important. An auto mechanic shop would not use Embassy BT for their advertising. A ladies beauty shop would not use Folio Extra Bold for their advertising. Besides the thousands of font styles, many fonts have different weights of their font from thin to extra bold - what I call families of fonts. A sign of an inexperienced designer is using fonts that are hard to see and read. Some fonts can be seen far away while others you need be close to see. For instance using all capitals when using old English or a script font is a no-no. Another sign of a inexperienced designer is someone who over-uses the same fonts like Arial, Times Roman or Comic Sans. Designers should not be afraid to experiment with other fonts that show their creativity and versatility. They should know how to change the default font on their computer. Readability is an important factor. The font used should make the design easy to see and understand. If you spend 30 seconds or more trying to read what a design is saying – that is too long. Optimally 5 seconds is the time it should take you to see and understand a design.

Golden Rules of Website Typography. Valuable Techniques to Increase Legibility – from Font Sizes, Line Spacing, and Line Lengths to Small Caps and Ligatures on both mobile and desktop ↑ 🚫Avoid Centered Text- it is not advisable for more than 3 lines. ✅Desktop font size for large headings are: (40px/2.5em — 64px/4em) max. ✅Mobile font size for large headings is 32px/2em or less. ✅Desktop font size for body: (16px/1em — 24px/1.5em) max. ✅Mobile font-size for body: at least 14px, sometimes minus 10% compared to desktop ✅Desktop: line length approximately 50–75 chars (25–37.5rem), line height equals about 1.5–1.6. ✅Mobile: characters on each line range between 40–50 (20–25rem), line height around 1.3–1.45. ✅If you had to pick one line-height value that would suit both desktop and mobile, choose the one that suits any display with a ratio of 1.5. ✅Smaller line heights like e.g., 1.1 work best with larger headings. ✅Ideally, the line height percentage relates to liquid measurements across which it flows. ✅When used against dark backgrounds always reduce the text’s font weight. ✅Always add letter spacing up to five percent when using uppercase letters. ✅Prefer lowercase or old-style figures if possible in numerals ✅Acronyms and Abbreviations should be applied in small-caps form Use table like numbering systems rather than proportional ones in data tables Three aspects of typography, namely type size, line height, and line length are interrelated. When you adjust one, there is a high probability that you will have to make changes to the others too. Altering the typefaces used, the type scale, and the number of characters per line can help achieve this goal.

Day 6: Alphabet F-Font Welcome to the world of fonts! Today, we'll explore the different font families and their classifications. Think of fonts as your design toolbox, with each type offering a unique personality to your text. There are five main font classifications: Serif:  These fonts have small decorative strokes at the ends of their characters, called serifs. They convey a sense of tradition, formality, and elegance. Think of classic book titles or newspaper headlines. (Examples: Times New Roman, Garamond) Sans Serif:  These fonts lack the serifs, offering a clean and modern look. They are ideal for clear communication and are widely used in web design and user interfaces. (Examples: Arial, Helvetica, Verdana) Monospace:  All characters in a monospaced font have the same width, giving a typewriter-like effect. They are perfect for code snippets, tables, and situations where consistent spacing is crucial. (Examples: Courier New, Consolas) Display:  These fonts are designed to grab attention and make a statement. They often have unique characteristics like bold strokes, decorative elements, or unconventional letterforms. Use them sparingly for headlines, logos, or short bursts of text. (Examples: Brush Script, Art Deco) Script:  These fonts mimic handwritten styles, adding a personal touch to your design. They are best used for short text or accents, as extended use can be difficult to read. (Examples: Pacifico, Lucida Handwriting) Choosing the right font: Consider the overall tone and purpose of your design. Formal documents: Opt for serifs like Times New Roman. Websites and apps: Sans serifs like Arial or Verdana provide clean readability. Code: Monospaced fonts like Courier New ensure consistent spacing. Headlines and logos: Display fonts can add a touch of personality. Invitations or greeting cards: Script fonts can convey a personal touch. Remember:  Don't go overboard! Using too many fonts can make your design look cluttered. Aim for a harmonious combination of 2-3 fonts from different classifications. Stay tuned for more design terms tomorrow! #design #designterms #fonts #fontfamilies #typography #graphicdesign #webdesign

Best Font Pairing Series - Part 7 Cartoon Font Pair is here, Looking for the best fonts for cartoon? Whether you're looking for comic cover fonts, the perfect graphic novel font for lettering, or a fun cartoon font style! ↳Check out ↳latest carousel ↳where I show you the ↳CARTOON FONT combos ↳that make designs looks playful. ↳I've picked out only 5 pairs of fonts. (with examples) ↳Which cartoon font pair you liked the most? Please check the below links for the font series 👇 Part -6 https://rb.gy/04yzdq Part -5 https://shorturl.at/gixyE Part -4 https://shorturl.at/floPZ Part -3 https://shorturl.at/aftJO Part -2 https://shorturl.at/anr18 Part -1 https://shorturl.at/kNPY7 ↳If still you are in struggling and don't know which font and pair to use, ↳Let me help you with your next designs. ↳DM "Woohoo" Now and get started. ------------------------------------------------------------------------------------------- For busy founders or coaches who are struggling to grow on LinkedIn with poor design visuals and Branding?? Spending hours trying to get your graphics just right?❌ Let me take care of everything while you focus on the essential things!✅️ Here's how I can help you: 🔴Stunning Carousel Designs 🔴Compelling Banners 🔴Social Media Designs Feel free to reach out for any design related tips. I am just a DM away to create awesome designs for you and collaborate! 📩 DM 'Woohoo' Now! ♻️ Repost if you find this helpful! 🔔 Follow me Ravi Alamuri