#+TITLE: Fonts - tags :: [[file:language.org][Language]], [[file:web_design.org][Web Design]] Notes on fonts and font design. * Cool Fonts ** Prose - [[https://gt-flexa.com][GT Flexa]] - [[https://github.com/froyotam/ferrite-core][Ferrite Core]] - Didot: :: 'Timeless elegance'; old and sophisticated. - Warnock :: Powerful with a lot of glyphs. It's an Adobe font and is probably expensive. - Trajan :: based on roman typography! - Bembo :: Revival of monotype. Graceful, stable and elegant! More subtle than a Didot. - [[https://dejavu-fonts.github.io/][DejaVu Fonts]] :: used for configuration a bit - Futura :: A classic futuristic font. Can be seen in places like [[https://ableton.com][Ableton's website]]. - Garamond :: Both a legal font and an exceptionally legible one. - Caslon :: Organic, beautiful style -- check this one out! - Freight Sans :: fun and cartoonish font feel. - Open Sans :: The new sans font with a neutral, flat design. - Gill Snas :: warm british, a bit tall, crisp lines - Gotham :: New York signage lettering style. - [[https://www.downloadfonts.io/akzidenz-grotesk-font-family-free/][Akzidenz Grotesk Font Free - Download Fonts]] https://www.indesignskills.com/inspiration/best-fonts-graphic-designers/ - Bodoni :: luxe, aspirational look font. more compressed and exaggerated - Univers :: 'the ultimate modernist font' - incredibly legible, clean, and functiona - Lombok :: very cool angular sans-serif font https://www.behance.net/gallery/17179851/Lombok-typeface - Ailerons :: inspired by airplane models (??) https://www.behance.net/gallery/25541553/Ailerons-Typeface - One Day :: modern uppercase light font? https://www.behance.net/gallery/23792563/ONE-DAY-Free-Font - Cooper Hewitt :: Smithsonian design museum work! https://www.canva.com/learn/modern-fonts/ - Koliko :: A font with larin and cyrillic characters. https://www.behance.net/gallery/30571471/kolikoe-FREE-FONT - Polya :: cool lightweight, 3d mesh title font. https://www.behance.net/gallery/20118341/POLYA-Free-Fon - Radnika :: multipurpose, workhorse typeface! https://www.behance.net/gallery/33818984/Radnika-Typeface - Komoda :: slimline, modern headline font https://www.behance.net/gallery/11623957/KOMODA-Font - Kolletif :: low contrast, modern, 21st century typeface https://www.behance.net/gallery/27386771/Kollektif - Nagasaki :: bold, condensed font for a large impact. looks very good in yellow, see poster - Hyperbola :: very cool typography https://www.behance.net/gallery/801635/Hyperbola - Distrito :: A flavorful, columbia font. https://www.dafont.com/distrito-caps.font - Maddac :: A headlining title font with some flair! https://www.behance.net/gallery/19645737/Maddac-Free-Font - Orkney :: A simple, sans-serif, readable font for web design. - Madda :: https://www.behance.net/gallery/19645737/Madda - Disclaimer :: A loud title font, very vertically oriented. https://www.behance.net/gallery/15024825/Disclaime - Qontra :: A very space-oriented, friendly font. https://www.behance.net/gallery/26829249/FREE-QONTRA-Font - Perfograma :: entirely dotted, perforated font. not sure how this is useful https://www.behance.net/gallery/23576901/Perfograma-free-font - Arenq :: bold, shaped font with double lines to highlight aspects. https://www.dafont.com/arenq.font - Intro :: comfortable, curvy, smooth font https://www.fontfabric.com/fonts/intro/ - ark :: wow https://stued.io/projects/ark-typeface - mondwest neuebit :: very cool retro fonts. https://pangrampangram.com/products/bitmap-fonts?variant=32840636858422 - space :: a typeface that manipulates space!! https://www.behance.net/gallery/115241051/SpaceType-Typeface ** To Investigate - https://about.easil.com/best-free-fonts/ -- these fonts are potentially cool as well! ** Monospace - source code pro - jet brains mono - [[https://getpocket.com/redirect?url=https%3A%2F%2Fgithub.com%2Fbe5invis%2FIosevka][iosveka]] - ibm plex - fira code - pragmata pro - dank mono - victor mono - menlo - consolas - roboto mono - adore64 - hermit light - opendyslexic mono - cascadia code pl - source code pro with emacs hasklig mode https://sourcefoundry.org/hack/ -- designed for source code! https://github.com/huytd/haskplex-font put this on the AUR! * Vocabulary ** Design - Motion Design :: Text in motion carefully chose to make text readable in videos and other animations. This text isn't visible all the time; rather, it's moving quickly and likely flashes past during a video. - Variable Fonts :: One or more axes that provide variation between different extremes of typeface design. These fonts allow for finer control over the design as it changes across the design space! A font can often be installed as regular, bold or both, and extended designs are expressed nicely. Formally, this is a specification that allows for multiple fonts to be packaged in a single file. - typeface :: A particular design of type. A single group of fonts; a set of fonts in the same style, or 'font family'. - font :: An instance of a typeface; a single weight of style within a typeface family. ** Type - baseline :: The line on which type sits. - height :: THe distance from baseline to the top of the lowercase letters, disregarding tall letters such as h. - cap height :: The distance between a capital letter and baseline. - ascenders :: The stem above lowercase letters that extends above the alloted height. - descenders :: Letters that extend below the baseline. - stem :: The main stroke of the letter (usually vertical). - tail :: Descending, decorative stroke on letters such as y and q. - serif :: The flair extending off of the edge of letters. Defines a 'font family' (serif vs sans serif). - counter :: The enclosed space within letters like o and g. - ear :: The small extension on lower half of the letter g. - terminal :: The end of a stroke without a serif. - aperture :: Partially closed negative space in characters like c, s, and n. This is always rounded. - bowl :: The curved part of the character enclosing the circular or curved parts of letters. This occurs in letters like o, d and b. - kerning :: Adjusting the space between individual characters. - tracking :: The spacing of a group of characters. - alignment :: text should probably be left aligned - justifying text :: adding a straight edge to text on boht sides - measure :: length of lines of text in a paragraph of column (column width) - Leading :: Vertical line spacing. generating sufficient space between lines to make it readable - Ligatures :: Fusing characters that are next to one another that look very similar. These characters may look awkward when next to one another if they aren't fused. - Hyphenation :: Breaking a word across a line and separating it with a dash; a technique typically used to prevent rag problems. - hyphen :: short dash '-'. used to divide words that break at the end of the line or to connect parts of co mpound words such as 'ill-fated'. these are used to represent relationships between individuals rather th an separating them.En-dash : slightly longer hthan the hyphe. used to indicate a range of values, such as a span of time or numerical quantities. sometimes the em-dash is used instead of the en-dash for aesthetic reasons, or a sm all amount of space is added befoer or after the dash for artistic purposes.Em-dash : longer than that!the em-dash is typically used to indicate a break in thought, and is normally followed with and preceded by space. It can be used to describe a thought within a sentence as well -- case in point!grid : guide by which graphic designers can organize, copy and add images in a flexible way while making the concepts easy to absorb and understand. - Rag :: The uneven vertical edge of a block of type -- most commonly the right-hand edge. if the rag is not clean, it can be very distracting to the eye; this can be fixed by reworking the line breaks or by editing a copy. - Widow :: A single word or short line left at the end of a column. This is considered bad typography. - Orphan :: A line exists at the top of the following column! This can be fixed just like the rag, by reworking the line breaks or editing the copy to remove these typography misdeeds. * History - printing press :: Used a font based on blackletter, similar ot the font traditionally used with handwritten material. This wasn't good for printing. Roman type was created to solve this problem. First, Jenson, but the most recognizable roman font is Cambria. ** Italics created to save space and money when printing books and long form texts.paved road for old style, transitional style and modern styles of typing. ** Caslon created 'old style' or 'Antiqua' of type : old style typefaces have thick serifs, low contrast. these are typically created from 1470 to 1600. ** Transitional typefaces thin serifs with high contrasts between these types. Baskerville is one such font (which was created as an improvement to the caslon typeface! ** Modern style very thin serifs with extreme contrast between strokes. created to reject traditional styles, annoyed with typefaces based on handwriting! Modern style initiated by Firmin Didot and Giambatista Bodoni ; Firmin Didot created modern style classification type, Didot, followed by the Bodoni typefaces ** William Caslon IV sans serif typefaces -- no projecting featues at the end of strokes! Helvetica : known as the favorite typeface, one of the most populat. variations on this include slab serifs and gemoetric sans. slab : magazines, newspaper headers; geometric : based on simple geometric shapes. ** Susan Kare - great apple designer! She did Chicago, a neat pixel sans-serif typeface -- this could be cool to use, as well as Monaco - (kind of boring) . geneva is the third typeface; it's inspired by helvetica and is a neo-grotesque typeface, a realist typeface including basic ligatures, long s and r rotunda as o ptionals. bitmap fonts are very cool and I should look into using them! realist ~=grotesquemore reading (TODO):: https://en.wikipedia.org/wiki/Sans-serif#GrotesqueCreative * Embellishments indents: indenting the first line of every paragraph has always been a convention -- to create a visual separation between paragraphsCreative ieaas : extreme indent, outdent. with room and for a cleaner, more open look, separate paragraph s with an extra line rather than using tab indentation at all!arabesques :; graphic ordaments and embellishments -- from simple geometric designs to ornate configurations. many are often digital recreations of historic designs. they have many uses - have fun with them * Classifying Type ** Serif Traditional typefaces with feet or arms hanging off of the end of letter strokes, adding a thick or thin look to the letter. These are considered the easiest fonts to read. Serif fonts are 'fancy' fonts -- they all have embellishments. Times New Roman, a serif font, is the most used font as the most common font found in newspapers. - Examples :: baskerville, clarendon, garamond, georgia, trajan ** Sans-Serif Fonts without serifs and having an overall more even stroke weight. clean, modern, minima list - Examples :: arial, futura, impact, myriad, tahoma ** Decorative Fonts typically used only for attention-grabbing headlines. Only one decorative font should be used, and not as the body font! ** Script Script fonts are intended to mimic handwriting, so the letters often touch one another. These fonts should never be used with all-caps. ** Dingbats These fonts contain characters that are small pieces of art, used to enhance the design of the page. Dingbats are usually packaged with a specific font and mimic its style. * Best Practices ** Font Size On computers, 72 pt. font corresponds to one inch on paper. Two different font sizes at the same point can correspond to different physical sizes, and correct size does depend on use. ** Spacing - character and word spacing, kerning, -- space between each character or letter, adjusted to create plea sing look tracking, -- adjustment of word spacing, similar to kerning but refers to space between words rather than characters line spacing, leading -- amount of space between lines of type -- larger the type, the more leading neede d! , paragraph spacing, alignment, -- alignment : text flowing on a page. center, left, right etc. justifie d : straight edge on boht sides! line breaks and rag, hyphens, -- don't have more than two hyphenations in a row, don't have too many hyphenated lines in a si ngle paragraph, ensure the rag checks out, make sure that justified text looks natural widows and orphans -- paragraph spacing -- at end: widow; at top of following; orphan! do not leave these distracting shapes! edit the copy to remove them. never use bold serif type, apparently? john cane is very against it. * type blogs / references http://www.atypeprimer.com/ -- written by northeastern prof, all about type! http://www.atypeprimer.com/exercises/understanding-letterforms/ http://www.thomasphinney.com/ http://typeforyou.blogspot.com/ https://www.adobe.com/products/type.html https://www.bertholdtypes.com/ https://fontbureau.typenetwork.com https://fontshop.com https://www.typography.com/ https://www.linotype.com/ -- cool fonts to browse https://www.monotype.com/ -- 'world's largest type library" https://www.monotype.com/ -- duo of complimentary typeface families https://www.amazon.co.uk/Type-Primer-John-Kane/dp/1856696448/ref=sr_1_2?s=books&ie=UTF8&qid=1295387779&sr =1-2 -- buy the book or something! https://www.amazon.com/Type-Primer-John-Kane-dp-1856696448/dp/1856696448/ref=mt_paperback?_encoding=UTF8& me=&qid=1587603890 -- some other link to it . https://fontsinuse.com/ -- showcases examples of fonts and their uses! * misc https://vistaserv.net/blog/90s-fonts-modern-browsers -- a quest to design a font that looks retro in the modern browser https://camd.northeastern.edu/art-design/research-approach-art-design/ cool art profs at northeastern https://camd.northeastern.edu/faculty/gloria-sutton/ https://camd.northeastern.edu/faculty/sarah-kanouse/ https://www.lyssn.io/ -- this person works at neu https://studycrafter.com/ this person is also at neu https://camd.northeastern.edu/faculty/casper-harteveld/ -- using games to improve technology! http://mutazionegame.com/ -- this is by someone at neu, apparently, seems cool https://www.prototypo.io/blog/news/how-make-a-monospaced-font-in-prototypo/ -- font tutorial https://design.tutsplus.com/tutorials/how-to-create-a-font-using-fontself-and-fontforge--cms-25923 -- using fontforge to make a font https://www.reddit.com/r/Design/comments/8bt8d4/today_i_decided_to_learn_how_to_make_fonts_after/ https://blog.golang.org/go-fonts -- fonts at Go! https://airbnb.design/introducing-airbnb-cereal/ -- airbnb neat font https://fontsinuse.com/uses/2291/ableton-website -- ableton fonts! [[https://www.creativebloq.com/features/5-ways-type-can-define-brands][reading on type defining a brand]] https://glyphsapp.com/ good tool http://typography.philipyoungg.com/ [[https://www.mass-driver.com/][Mass-Driver™]] [[https://github.com/be5invis/Iosevka][be5invis/Iosevka: Slender typeface for code, from code.]] [[https://int10h.org/blog/2020/07/oldschool-pc-font-pack-v2][Ultimate Oldschool PC Font Pack v2.0 Released]] [[https://github.com/aftertheflood/sparks][sparks]]: a typeface for creating spark lines in text without any code [[https://www.typeroom.eu/][Glorifying Eclectic Typography | TypeRoom]] [[https://blazetype.eu/typecatalogue/][Blaze Type | Type catalogue]] https://fonts.google.com/specimen/Rubik https://fonts.google.com/specimen/Roboto+Mono https://github.com/deuveir/design.typography https://practicaltypography.com/font-recommendations.html font advice from amtthew butterick