Table of Contents
The Future of Web Fonts looks Awesome – Variable Font Tutorial
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม
Today’s Question: How do you stay focused while working?
In this video, we’re going to take a look at variable fonts, which are a new type of font that gives us an amazing level of control over a variety of factors using CSS. I’m going to show you how to find and use variable fonts with the help of a couple resources. Variable fonts give designers an entirely new level of control over web typography.
Article mentioned in the video:
https://medium.com/clearleftthinking/howtousevariablefontsintherealworlde6d73065a604
Let’s get started!
Subscribe for NEW VIDEOS weekly!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^Chat with me and others
Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Web Fonts – The State of the Web
In this episode, Rick speaks with Dave Crossland about Google Fonts. They discuss what Google Fonts are exactly, how to use them effectively, and what’s new. Learn from Rick and Dave about how Google Fonts can distinguish your brand and develop your sites look and feel.
Google Fonts → http://bit.ly/2PTX1rt
MS Edge variable fonts demo → http://bit.ly/2Npj9x3
Decovar → http://bit.ly/2xAkvdh
Watch more State of the Web episodes here → http://bit.ly/2JhAzsh
Subscribe to the Chrome Developers channel to catch a new episode of The State of the Web every other Wednesday → http://bit.ly/ChromeDevs1
What are Web Fonts? (Best Practices for 2021)
Typography accounts for 95% of web design. Your font choice can be critical for branding, readability, and performance. Recommendations for using web fonts have changed as browsers adopted new standards. Now in 2021, this video shares the best practices for using web fonts for highperformance sites.
0:00 – Introduction
0:19 – Web Safe Fonts
1:08 – System Font Stack
1:42 – Why Web Fonts?
2:08 – SelfHosting
3:17 – Caching
3:39 – Font Display
4:24 – Flash of Unstyled Text (FOUT)
4:37 – Flash of Invisible Text (FOUT)
5:13 — Preloading
7:01 — Variable Fonts \u0026 Subsetting
8:28 – Conclusion
Links
–––––
1: https://ia.net/topics/thewebisallabouttypographyperiod
2: https://thehistoryoftheweb.com/webfonts/
3: https://developer.mozilla.org/enUS/docs/Learn/CSS/Styling_text/FundamentalsWeb_safe_fonts
4: https://systemfontstack.com/
5: https://almanac.httparchive.org/en/2020/fonts
6: https://developers.google.com/web/updates/2018/08/webperformancemadeeasy
7: https://developers.google.com/web/updates/2020/10/httpcachepartitioning
8: https://csswizardry.com/2020/05/thefastestgooglefonts/
9: https://web.dev/preloadcriticalassets/
10: https://web.dev/variablefonts/
11: https://github.com/leerob/leerob.io
12: https://www.youtube.com/watch?t=176\u0026v=Z6wjUOSh9Tk\u0026feature=youtu.be
–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Use Web safe fonts or iOS or Android specific fonts in Adobe XD
Full Course at: http://bit.ly/2VUvb4X
Free Exercise Files: http://bit.ly/2W1Mdhr
Free Cheatsheet: http://bit.ly/2VXbYQ1
In this video we’re going to look at how to bring in fonts from both Chrome and TypeKit, and bring them into XD and why we need to pick a couple of fonts, and only a couple of weights, otherwise our website or app will explode. Let’s go and check out why in this video.
AdobeXD Fonts WebSafeFonts
This video is part of a 92 video course titled \”User Experience Design Essentials Adobe XD UI UX Design\” by Bring Your Own Laptop, get your free downloadable exercise files and printable PDF above.
Follow us on Instagram: https://www.instagram.com/bringyourownlaptop/
Follow me on Twitter: https://twitter.com/danlovesadobe
Follow us on Facebook: https://www.facebook.com/BringYourOwnLaptop/
Web Fonts – Computerphile
In the first days of the web, font choice was down to the viewer Dr Tamir Hassan on how things developed.
More about Dr Hassan http://www.tamirhassan.com/index.html
Professor Brailsford on Font Hinting: The Font Magicians: https://youtu.be/jAdspOtgciQ
EXTRA BITS: https://youtu.be/lezYN7bJSW8
https://www.facebook.com/computerphile
https://twitter.com/computer_phile
This video was filmed and edited by Sean Riley.
Computer Science at the University of Nottingham: https://bit.ly/nottscomputer
Computerphile is a sister project to Brady Haran’s Numberphile. More at http://www.bradyharan.com
นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูวิธีอื่นๆINVESTMENT
